任何输入都非常感谢!
长话短说,我需要弄清楚如何使用HTML5/CSS3按钮来控制画布上的精灵动画。按钮分别控制精灵的方向和速度。
我有两个数组,它们代表两种类型的精灵控件,每种控件都以不同的程度(1 w/三个索引和 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>
分机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[];
}
我能对这篇文章发表评论,但这里有几件事。
你对按钮的使用是完全可以的,但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 中进行相等比较时,使用 ==
。 =
是一种分配。因此,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>
您也可以将其扩展到标题。
最后。在屏幕上放置多个精灵可以通过多种方式完成,但您需要一个包含所有平面的数组。从本质上讲,您需要制作飞机"类"。这可以是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方面需要更多帮助,这是一个很好的来源。