如何將控件鏈接到Canvas精靈？

Question

任何輸入都非常感謝！長話短說，我需要弄清楚如何使用HTML5/CSS3按鈕來控制畫布上的精靈動畫。按鈕分別控制精靈的方向和速度。我有兩個數組，代表兩種類型的精靈控件，每個精靈控件都有不同程度的索引（1 w/3個索引和1 w/8索引）。我應該採用什麼方法將按鈕鏈接到它們各自的「精靈」變形？我的精靈在8索引陣列中平鋪和索引，因此傳統上轉換圖像是不必要的。我需要單擊每個按鈕將特定數組更改爲特定索引，然後將其插入到drawImage（）和clearRect（）公式中以創建動畫。每次點擊只能改變一個數組和索引號，而其他所有內容都是一樣的。 。 。我是否正確地將速度和方向值放在數組中？有任何想法嗎？

HTML

股利ControlPanel控制爲z索引畫布上方，幷包含所有的控制按鈕的。

<div id="controlPanel"> 
    <div id="rightButtons"> 
     <div id="fast"> 
      <button type="button" class="speed" name="fast" value="2"></button> 
     </div>  
     <div id="medium"> 
      <button type="button" class="speed" name="medium" value="1"></button> 
     </div> 
     <div id="slow"> 
      <button type="button" class="speed" name="slow" value="0"></button> 
     </div> 
    </div> 

    <div id="bottomButtons"> 
     <div id="H0"> 
      <button type="button" class="heading" name="H0" value="0"></button> 
     </div> 
     <div id="H1"> 
      <button type="button" class="heading" name="H1" value="1"></button> 
     </div> 
     <div id="H2"> 
      <button type="button" class="heading" name="H2" value="2"></button> 
     </div> 
     <div id="H3"> 
      <button type="button" class="heading" name="H3" value="3"></button> 
     </div> 
     <div id="H4"> 
      <button type="button" class="heading" name="H4" value="4"></button> 
     </div> 
     <div id="H5"> 
      <button type="button" class="heading" name="H5" value="5"></button> 
     </div> 
     <div id="H6"> 
      <button type="button" class="heading" name="H6" value="6"></button> 
     </div> 
     <div id="H7"> 
      <button type="button" class="heading" name="H7" value="7"></button> 
     </div> 
    </div> 

EXT。 JAVASCRIPT

var heading = [180,210,0,30,60,90,120,150] //x-coordinates of the sprite tile 
var speed = [5,10,20]; 


document.getElementById("plane").onload=function(){ 
var canvasTwo = document.getElementById("canvasTwo"); 
var cxt = canvasTwo.getContext("2d"); 
var plane = document.getElementById("plane"); 
animatePlane(); 
} 

    function animatePlane(){ 

    setInterval(drawPlane,200); 
    } 

    var plane = document.getElementById("plane"); 
    var dy = speed; 
    var dx = s; 
    var x = 400; 
    var y = 475; 

    function drawPlane(){ 

     y = y+dy; 
     x = x + dx; 
     cxt.save(); 
     cxt.clearRect(x-dx,y-dy,30,30); 
     cxt.drawImage(plane,heading,0,30,30,x,y,30,30); 
     cxt.restore(); 
    } 

     //This is where dx and dy get alittle funky. The value of dx and dy depend on the heading. Quite frankly I don't know where to place this block of code. 

     //to determine the value of dx 
     if (heading[]= 0){ 
      dx= speed[]; 
      dy= 0; 
     } 
     if (heading[]= 30){ 
      dx= speed[]; 
      dy= speed[]*-1; 
     } 
     if (heading[]= 60){ 
      dx= 0; 
      dy= speed[]*-1; 
     } 
     if (heading[]= 90){ 
      dx= speed[]*-1; 
      dy= speed[]*-1; 
     } 
     if (heading[]= 150){ 
      dx= speed[]*-1; 
      dy= speed[]; 
     } 
     if (heading[]= 180){ 
      dx= 0; 
      dy= speed[]; 
     } 
     if (heading[]= 210){ 
      dx= speed[]; 
      dy= speed[]; 
     } 

Answer 1

我希望我可以只發表評論，但這裏有一些事情。

您對按鈕的使用非常好，但type="button"是多餘的，所以如果您覺得合適，您可以將其取出。

而且這樣的：

var speed = [5,10,20]; 
... 
var dy = speed; 
var dx = s; 
var x = 400; 
var y = 475; 
... 
y = y+dy; 
... 
if (heading[]= 0){ 
    dx= speed[]; 
... 

混淆了我。 dy = speed意味着dy是一個數組，但您試圖將其與一個整數相加，該整數產生一個字符串;

dx = s但您沒有在代碼中發佈s的初始化（儘管它可能在其他地方）。

當引用數組中的索引（在JavaScript中）時，您必須在括號內包含正整數或0。 heading[]將引發錯誤。我想這可能暫時是空的，但你會在稍後填寫它。

在javascript中進行等式比較時，您使用==。 =是一個asignment。因此，if(myVar=0)將爲myVar分配0，而不是將其與0比較。

讓陣列中的所有速度和標題都是一個很好的方法。爲了利用它們，你將不得不建立一些變量來包含正在使用的索引。如

var i_heading = 0; // the heading array's index 
var i_speed = 0; // the speed array's index 

然後，您可以使用onclick=事件的按鈕，使用其他功能。

<div id="fast"> 
    <button class="speed" name="fast" value="2" onclick="setSpeedIndex(this.value)"></button> 
</div> 

<script> 
    function setSpeedIndex(newSpeedIndex){ 
     i_speed = newSpeedIndex; 
    } 
    ... 
    if (heading[i_heading]= 0){ 
     dx= speed[i_speed]; 
     dy= 0; 
    } 
</script> 

你也可以擴展標題。

最後。在屏幕上放置多個精靈可以用很多方法完成，但是你需要一個包含所有飛機的數組。基本上你需要製造一架飛機「課程」。這可以是一個function Plane()或只是一個數據結構。您可以通過在陣列中循環並從循環中繪製來獲取每架飛機的信息。或者，如果您將該功能用作飛機課程，您可以讓飛機自己繪製。

功能類

var planes = []; // array of planes 
... 
function Plane(x, y, s, h){ // plane function, a.k.a. class 
    this.x = x; 
    ... 
    this.drawMyself = function(){ // function to draw itself 
     this.y = this.y+this.dy; 
     ... // the rest of the drawing function 
    } 
} 
... 
planes.add(new Plane(0,0,0,0)); // adding a plane 
... 
for (var i in planes){ // drawing all the planes 
    var p = planes[i]; 
    p.drawMyself(); 
} 

數據結構

var planes = []; // array of planes 
... 
planes.add({ // adding the data structure 
    x: 0, 
    ... 
}); 
... 
for (var i in planes){ // drawing all the planes 
    var p = planes[i]; 
    p.y = p.y+p.dy; 
    ... // the rest of the drawing function 
} 

如果您需要在JavaScript中的任何更多的幫助，THIS是一個偉大的來源。