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 并在我正确命名为 movesquare 的 moveball 函数中调用它

    function square(x1, y1){

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

}

工作代码：

http://jsfiddle.net/VeEGW/

4

1 回答 1

1

接近：JSFiddle；

有许多错误导致奇怪的事情发生。此处列出：

1) 您通过 moveball() 上的 ctx 变量重新定位整个画布，setInterval 反复调用该变量。你的意思是简单地调用球，而是移动整个画布。

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) 我还没有让你的方格在 keydown 上继续前进，但是嘿，我认为我们正在取得进展。我将尝试调整更多内容并更新此答案。

于 2013-10-11T23:03:59.017 回答