塔防javascript动画

时间:2014-03-18 20:51:22

标签: javascript canvas

嗨:)首先抱歉我的英语很糟糕,我的英语很差,但是我希望我的辞职是可以理解的。

所以,我17岁,我的bac(你知道这个毕业生吗?)在大学之前,我有一个项目,我的计算机科学。我的项目是简单地在javascript / Html / Css中创建一个塔防,没有graphism等。所以我的目标是在我的广场附近产生x小怪,然后这些小怪会冲塔,如果塔上有2个小怪,她被摧毁,如果有任何塔离开,游戏就会丢失。所以,这是我的代码,我会在代码后问你问题。

    var canvas = document.getElementById("fenetreJeu");
var ctx = canvas.getContext("2d");

var mob = document.getElementById("mobile");

var fenetreDuJeuHauteur = canvas.height-5;
var fenetreDuJeuLargeur = canvas.width-5;

var largeurMobile = mob.offsetLeft;
var vx = 2; // vitesse en pixel vers la droite
var xmin = 0; // limite gauche
var xmax = fenetreDuJeuLargeur;

var hauteurMobile = mob.offsetTop; //ordonnée du mobile
var vy= 2;
var ymin = 0;
var ymax=fenetreDuJeuHauteur;

var timer1;

window.onload = function()
{

    var debut = document.getElementById("start");
    var arret   = document.getElementById("stop");
    var blocCentrale = document.getElementById("blocCentrale");
    var tour = document.getElementById("tour");


    debut.addEventListener("click",debutPartie);
    arret.addEventListener("click",pause);


    quadrillage();
    generationMob();

    ensembleMob = document.getElementsByClassName("monstre");
    ensembleMob[0].style.backgroundColor = "blue";



}
function generationMob()
{
    for(i = 0; i < 10; i++){
    creationPositionnement();
    }
}

function creationPositionnement(){

    var ensembleMob = [];
    var mobCree = document.createElement("div");

        mobCree.className = "monstre";
        mobCree.style.width = "5px";
        mobCree.style.height = "5px";
        mobCree.style.backgroundColor = "red";
        mobCree.style.position = "absolute";
        ensembleMob = document.getElementsByClassName("monstre");


    var mobCreeHauteur = mobCree.style.top = Math.floor(Math.random()*595)+"px";
    var mobCreeLargeur = mobCree.style.left = Math.floor(Math.random()*595)+"px";
    var aleatoirePosition = Math.floor((Math.random()*4)+1);

    if (aleatoirePosition == 1){
        if (mobCreeHauteur != 0){
            mobCree.style.left = "0"+"px";}
    }if (aleatoirePosition == 2){
        if (mobCreeLargeur != 0){
            mobCree.style.top = "0"+"px";}
    }if (aleatoirePosition == 3){
        if (mobCreeHauteur != 0){
            mobCree.style.left = "595"+"px";}
    }if (aleatoirePosition == 4){
        if (mobCreeLargeur != 0){
            mobCree.style.top = "595"+"px";}
    }
    blocCentrale.appendChild(mobCree);

    return ensembleMob;
}

function positionCurseur ()
{


}

function quadrillage (){
    var larg = 50;
    var haut = 50;

    for (var i = 0; i < 40;i++){
        ctx.beginPath();
        ctx.moveTo(larg,0); 
        ctx.lineTo(larg,600);
        ctx.stroke();
        larg +=50;
    }

    for (var i = 0; i < 20;i++){
        ctx.beginPath();
        ctx.moveTo(0,haut); 
        ctx.lineTo(canvas.width,haut);
        ctx.stroke();
        haut +=50;
    }
}

function debutPartie(){
    // lance le changement de position tout les 0,01 secondes.
    clearInterval(timer1); //arrête un éventuel timer déjà en place.
    timer1 = setInterval(animation2,10); // Lance le déplacement
}


function pause(){
    clearInterval(timer1);
}

var animation = function() {
    // déplace le mobile de Vx pixels vers la droite et change Vx si on arrive au bord.
    largeurMobile = largeurMobile + Vx;    
    if ((largeurMobile<=xmin) || (largeurMobile>=xmax)) {
        Vx=-Vx; // Si on est au bord, on change le sens de déplacement.
    }
    mobile.style.left=largeurMobile+"px"; // déplacement de l'objet à l'écran.

    hauteurMobile = hauteurMobile + Vy;    
    if ((hauteurMobile<=ymin) || (hauteurMobile>=ymax)) {
        Vy=-Vy; // Si on est au bord, on change le sens de déplacement.
    }
    mobile.style.top=hauteurMobile+"px"; // déplacement de l'objet à l'écran.
}

function animationBis(){

    for (i = 0; i < 10; i++){
        ensembleMob[i].style.left = ensembleMob[i].offsetLeft + vy + "px";
        if (ensembleMob[i].offsetLeft <= 0 || ensembleMob[i].offsetLeft >= 595){
        vx =- vx;
        }


        ensembleMob[i].style.top = ensembleMob[i].offsetTop + vx + "px";
        if (ensembleMob[i].offsetTop <= 0 || ensembleMob[i].offsetTop >= 595){
        vy =- vy;
        }

    }
}

function animation2(){


        ensembleMob[0].style.left = ensembleMob[0].offsetLeft + vy + "px";
            if (ensembleMob[0].offsetLeft <= 0 || ensembleMob[0].offsetLeft >= 595){
            vy =- vy;
            }
        ensembleMob[0].style.top = ensembleMob[0].offsetTop + vx + "px";
            if (ensembleMob[0].offsetTop <= 0 || ensembleMob[0].offsetTop >= 595){
            vx =- vx;
            }


}

// calculer la position d'un element sur la page 
/*calcul la position d'un élément sur la page

            var item = document.getElementById(img);
            var parent = item.offsetParent;
            var posElmX = 0;
            var posElmY = 0;
            while(parent) {
                posElmX += parent.offsetLeft;
                posElmY += parent.offsetTop;
                parent = parent.offsetParent;
            }
            var positionX = item.offsetLeft + posElmX;
            var positionY = item.offsetTop + posElmY;



changer les dimension d'un élément

            item.style.width = item.offsetWidth+10+'px';
                        item.style.height = item.offsetHeight+5+'px';
                        */

不要关心某些功能,例如:函数动画是一个测试,animationBis不起作用,但animation2工作,除非div位于块中央的底部或右侧。

所以我的问题是关于animationBis它是一个“测试”但我想我以后需要这个功能的想法为最后的动画,它不起作用。 Div(暴民)移动是的,但真的很奇怪的举动,就像他们在另一个div中但不在我的区块中央。我想这是因为我的var vitesse,但我不确定。

另一个问题,如果我可以:) 我怎么能说暴徒“你冲塔(自动从他的位置移动到塔上)”?

如你所见,我的javascript级别非常糟糕,我只使用函数,所以如果你能给我一个我更喜欢的函数答案:)

仍然并且仍然抱歉我可怕的英语和thx的答案和耐心阅读我。再见:)

1 个答案:

答案 0 :(得分:0)

我将举例说明使用两种非常方便的技术:

// Define state variables like so:
var MOVING_LEFT = 1;
var MOVING_RIGHT = 2;
var MOVING_UP = 3;
var MOVING_DOWN = 4;

// Use these human-readable variable names to set states
var current_moving_direction = MOVING_RIGHT;

// Use these variables to check for the state again
switch (current_moving_direction){
    case MOVING_LEFT:
    // Execute code for moving left
    break;
    case MOVING_RIGHT:
    // Execute code for moving right
    break;
    case MOVING_UP:
    // Execute code for moving up
    break;
    case MOVING_DOWN:
    // Execute code for moving down
    break;
}

大写字母的变量是含义。它们包含您必须以自己的方式管理自己的数字1-4。那样,你从这些数字中看到的就是他们的意思。不过,您仍然可以检查现在存储在其中的数字。

switch-case语句为每个'case'标签定义的所有状态检查变量'current_moving_direction'。一旦条件成立,“休息”对于打破开关案例是必要的。