Javascript 如何将控件链接到画布精灵？

非常感谢您的任何意见

长话短说，我需要弄清楚如何使用HTML5/CSS3按钮来控制画布上的精灵动画。这些按钮分别控制精灵的方向和速度

我有两个数组，它们表示两种类型的sprite控件，每个控件的索引程度不同（1 w/3个索引和1 w/8个索引）。我应该用什么方法将按钮链接到我的精灵各自的“转换”上？我的精灵在8索引数组中平铺和索引，因此传统上不需要变换图像。我需要单击每个按钮，将特定数组更改为特定索引，然后将其插入drawImage（）和clearRect（）公式以创建动画。每次单击都应该只更改一个数组和索引号，其他内容保持不变。在数组中放置速度和方向值是否正确？有什么想法吗

HTML

Div控制面板在画布上方为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>

---

我希望我能对这篇文章发表评论，但这里有几件事

您对按钮的使用非常好，但是

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<代码>标题[]引发错误。我想那可能暂时是空的，但你以后会填的

在javascript中进行相等比较时，使用

==

<代码>=是一个辅助符号。因此，

if（myVar=0）

将把0分配给myVar，而不是将其与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>

数据结构

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方面的帮助，这是一个很好的源代码。

您可以发布一个您现在拥有的代码示例吗？基本上，您要做的是让您的按钮编辑与绘制的项目相关的一些数据，然后根据编辑的数据重新绘制项目。从我看来，你的想法是正确的。@Cerbrus感谢你的回应。我已经用包含的代码更新了我的帖子。我应该使用还是用于我的控件？此外，在任何给定的时间，屏幕上都会出现多个精灵。我还没有完全弄明白怎么做，但知道这一点可能会对你有所帮助。非常感谢！你绝对是摇滚明星！！！非常感谢你的帮助。正如你所看到的，至少可以说，我的代码边缘有点粗糙。我大概三周前才开始自学这门语言。非常感谢你的帮助，我很乐意帮忙！此外，还有一所名为Udacity的在线（免费）大学。他们现在有一个HTML5JavaScript游戏制作课程，您可能会感兴趣。

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
}