塔防javascript動畫

Question

嗨:)首先對我可怕的英語感到抱歉，我是一個糟糕的英語壞法國人，但我希望我的resquest可以理解。

因此，我17歲，爲我的bac（你知道這個畢業生嗎？）在大學之前，我有一個爲我的specilisation計算機科學項目。我的項目是在javascript/Html/Css中創建一個塔防，沒有圖形等等。所以我的目標是在我的廣場周圍產生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工作。

所以我的問題是關於animationBis這是一個「測試」，但我認爲我需要這個功能的想法後來爲最終動畫，它不工作。 Div（暴徒）移動是的，但真正奇怪的舉動，就像他們在其他div但不在我的塊中央。我想這是因爲我的var vitesse，但我不確定。

另一個問題，如果我可以:) 我怎麼能說在暴徒「ü衝高塔（從他的位置自動移動到塔）」？

正如你看到的，我的javascript的水平實在是太差了，我只使用功能，因此，如果ü可以給我一個答案與功能我喜歡:)

儘管如此，仍然對不起我的可怕的英語和THX爲您答案和耐心閱讀我。再見:)

Answer 1

我給你使用兩個非常方便的技術的一個例子：

// 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; 
} 

在大寫字母的變量是contants。它們包含您必須按自己的方式管理自己的數字1-4。這樣，你從這些數字看到的就是他們的意思。不過，您可以檢查現在存儲在其中的數字。

switch-case語句爲每個'case'標籤定義的所有狀態檢查變量'current_moving_direction'。一旦條件成立，'中斷'對於打破開關情況是必要的。