0

以下は、私が作業しようとしている HTML5 ドキュメントのコードです。キーボードで制御する必要があるボールと、壁に当たると正方形の周りを移動して方向を変える正方形があります。しかし、私の移動機能は、小さなピンクがかった正方形ではなく、穴の正方形を移動していると思います。何か案は？

ここに画像の説明を入力

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Test</title>
</head>
<body>
<section>

<div>
<canvas id="canvas" width="300" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>

<script type="text/javascript">
var canvas;
var ctx;
var dx = 5;
var dy = 5;
var x = 150;
var y = 100;
var WIDTH = 300;
var HEIGHT = 200;
var x1 = 0,
    y1 = 0;
var dx1 = 4,
    dy1 = 5;

function circle(x, y, r) {
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2, true);
    ctx.fill();
}


function clear() {
    ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function rect(x, y, w, h) {
    ctx.beginPath();
    ctx.rect(x, y, w, h);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
}

function moveball() {    
    x1 += dx1;
    y1 += dy1;
    if (x1 <= 0) dx1 = 4;
    else if (x1 >= 550) dx1 = -4;
    if (y1 <= 0) dy1 = 5;
    else if (y1 >= 550) dy1 = -5;
    ctx.translate(x1, y1);    
}

function init() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    return setInterval(draw, 10);
}

function doKeyDown(evt) {
    switch (evt.keyCode) {
        case 38:
            /* Up arrow was pressed */
            if (y - dy > 0) {
                y -= dy;
            }
            break;
        case 40:
            /* Down arrow was pressed */
            if (y + dy < HEIGHT) {
                y += dy;
            }
            break;
        case 37:
            /* Left arrow was pressed */
            if (x - dx > 0) {
                x -= dx;
            }
            break;
        case 39:
            /* Right arrow was pressed */
            if (x + dx < WIDTH) {
                x += dx;
            }
            break;
    }
}

function draw() {
    clear();
    ctx.fillStyle = "white";
    ctx.strokeStyle = "black";
    rect(0, 0, WIDTH, HEIGHT);
    ctx.fillStyle = "purple";
    circle(x, y, 10);

    ctx.fillStyle = "#CC00FF";
    ctx.fillRect(0, 0, 50, 50);
    moveball();    
}

init();
window.addEventListener('keydown', doKeyDown, true);
</script>
</section>
</body>
</html>

デモ: http://jsfiddle.net/8nsQB/2/

働く：

私の moveball 関数は movesquare と呼ばれるべきでした。関数 square を追加し、これを moveball 関数で呼び出しました。これは正しく movesquare と名付けました

    function square(x1, y1){

ctx.fillStyle="#CC00FF"; 
ctx.fillRect(x1,y1,50,50); 

}

作業コード:

http://jsfiddle.net/VeEGW/

4

1 に答える 1

1

近づく: JSFiddle ;

奇妙なことが起こる原因となっている多くのバグがありました。ここにリストされています：

1) setInterval によって繰り返し呼び出された moveball() の ctx 変数を使用して、キャンバス全体を再配置しました。あなたがしようとしていたのは、単にボールを呼び出すことでしたが、代わりにキャンバス全体を移動しました。

function moveball() {    
    x1 += dx1;
    y1 += dy1;
    if (x1 <= 0) dx1 = 4;
    else if (x1 >= 550) dx1 = -4;
    if (y1 <= 0) dy1 = 5;
    else if (y1 >= 550) dy1 = -5;
    ctx.translate(x1, y1);    
}

コードを次のように更新しました。

function moveball() {
    x1 += dx1;
    y1 += dy1;

    if (x1 <= 0) dx1 = 4;
    else if (x1 >= 300) dx1 = -4;
    if (y1 <= 0) dy1 = 5;
    else if (y1 >= 200) dy1 = -5;  

    ctx.fillStyle = "purple";
    circle(x1, y1, 10);
}

2) ボールの動きの高さと幅の境界がずれていました。私はそれらを 300 x 200 に制限しました。

3) まだあなたの広場をキーダウンで動かせていませんが、前進していると思います。さらにいくつかのことを微調整して、この回答を最新の状態に保ちます。

于 2013-10-11T23:03:59.017 に答える