Question

下面是我试图开始工作的HTML5文档的代码，我有一个应该控制我的键盘的球和一个应该在方块周围移动的方块，一旦它撞到墙壁就改变方向。但我认为我的移动功能是移动孔方形而不是小粉红色方形。有什么想法吗？

enter image description here

<!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/

Answer 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）我仍然没有让你的广场继续前进，但嘿，我认为我们正在取得进展。我会尝试调整更多内容并更新此答案。

html5移动错误的对象

1 个答案: