0

どんな入力でも大歓迎です！

簡単に言うと、HTML5/CSS3 ボタンを使用してキャンバス上のスプライト アニメーションを制御する方法を理解する必要があります。ボタンは、スプライトの方向と速度を個別に制御します。

2 つのタイプのスプライト コントロールを表す 2 つの配列があり、それぞれがさまざまな程度にインデックス付けされています (1 w/3 インデックスと 1 w/8 インデックス)。ボタンをスプライトのそれぞれの「変換」にリンクするには、どのような方法が必要ですか? 私のスプライトはタイル化され、8 インデックス配列でインデックス付けされているため、従来のように画像を変換する必要はありません。各ボタンをクリックして、特定の配列を特定のインデックスに変更し、それを drawImage() および clearRect () 式に挿入してアニメーションを作成する必要があります。クリックするたびに、1 つの配列とインデックス番号のみが変更され、他のすべては同じままになります。. . 速度と方向の値を配列に配置するのは正しいですか? 何か案は？

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>

EXT. ジャバスクリプト

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 = speed手段dyは配列ですが、文字列を生成する整数で追加しようとしています。

dx = ssしかし、コードに の初期化を投稿していません(ただし、別の場所にある可能性があります)。

(javascript で) 配列内のインデックスを参照するときは、括弧内に正の整数または 0 を含める必要があります。heading[]エラーをスローします。当分の間は空になるかもしれませんが、後で埋めます。

JavaScript で等価比較を行う場合は、==. =課題です。したがって、if(myVar=0)0 と比較するのではなく、0 を myVar に割り当てます。

配列内にすべての速度と方向を含めることは、良い方法です。それらを利用するには、使用されているインデックスを含むいくつかの変数を確立する必要があります。そのような

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 に答える