0

非常感谢任何输入！

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

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

HTML

Div 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>

分机。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[];
        }
4

1 回答 1

0

我希望我可以对帖子发表评论，但这里有几件事。

您对按钮的使用非常好，但这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 = speedmeandy是一个数组，但您试图将它与一个整数相加，这会产生一个字符串；

dx = s但是您还没有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 的帮助，这是一个很好的来源。

于 2013-02-03T21:54:31.697 回答