Question

我正在制作一个非常基本的JS画布游戏，它是导弹防御和太空入侵者之间的交叉，需要一些帮助。

我在屏幕底部有一个小炮塔从枪管射出圆圈，但由于某种原因，最近拍摄的圆圈似乎有一个第二个圆圈落在它后面。然而，当另一个镜头被射击时，滞后圆圈从原件后面消失，然后出现在新镜头后面。此外，我有一个广场从屏幕下来，代表什么将是一个奇怪的行为的外星入侵者。外星人飞行下来250像素，然后开始在方形路径中移动，直到它被摧毁。似乎代表外星人的方形在沿着方形路径的边缘移动时会改变大小，这显然不应该发生。

除了这两个问题，我很想听听你对这些代码的任何建议。我之前从未使用过JavaScript，而且一般来说编码也不多，所以我们非常感谢任何帮助/指导。

这是一个有效的演示：http://jsbin.com/ehezuj/1/edit

这是我的代码：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Space Game Demo</title>
    </head>
    <body>
        <section>
            <div>
                <canvas id="canvas" width="800" height="600">
                    Your browser does not support HTML5.
                </canvas>
            </div>
            <script type="text/javascript">
//Start of script
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var x = 400;
var y = 0;
var direction = 0;
var mouseDown = false;
var gloop;
var shots = new Array;
var aliens = new Array;
aliens.push(new basicAlien());
var playerTurret = new (function() { //turret object
    var that = this;
    that.draw = function() {
        ctx.fillStyle = "white";
        ctx.strokeStyle = "white";
        ctx.rect(380, 540, 40, 60); //draw base
        ctx.fill();

        ctx.beginPath();
        ctx.arc(400, 540, 20, Math.PI, 2*Math.PI);
        ctx.fill();

        ctx.beginPath();
        ctx.lineWidth="10";
        ctx.moveTo(400, 540);
        var tempX, tempY, temp;
        temp = getTrajectory(x, y);
        tempX = 35 * temp[0]; tempY = 35 * temp[1];
        ctx.lineTo(tempX + 400, 540 - tempY);
        ctx.stroke();
    }
});

function basicAlien() {
    var that = this;
    that.step = 0; that.bottom = false;
    that.vel = 2;
    that.pos = [(Math.random() * 740) + 30, -10];
    that.move = function() {
        if (that.pos[1] >= 250) {that.bottom = true;}
        if (!that.bottom) {
            that.pos[1] += that.vel;
        }
        else {
            if (that.step < 20) {
                that.pos[0] += that.vel;
            }
            else if (that.step < 40) {
                that.pos[1] -= that.vel;
            }
            else if (that.step < 60) {
                that.pos[0] -= that.vel;
            }
            else {
                that.pos[1] += that.vel;
            }
            that.step = (that.step+1)%80;
        }
    }
    that.draw = function() {
        ctx.fillStyle = "white";
        ctx.rect(that.pos[0] - 10, that.pos[1] - 5, 20, 10);
        ctx.fill();
    }
};

function shotObject(shotX, shotY) {
    var that = this;
    that.traj = getTrajectory(shotX, shotY);
    that.vel = 10;
    that.pos = [400, 540];
    that.draw = function() {
        ctx.fillStyle = "white";
        ctx.beginPath();
        ctx.arc(that.pos[0], that.pos[1], 5, 0, 2 * Math.PI);
        ctx.fill();
    }
    that.move = function() {
        that.pos[0] += that.vel * that.traj[0];
        that.pos[1] -= that.vel * that.traj[1];
        if (that.pos[0] < -10 || that.pos[0] > 810 || that.pos[1] < -10 || that.pos[1] > 610) {
            shots.splice(shots.indexOf(that), 1);
        }
    }
};

function getTrajectory(coordx, coordy) {
    var tempX, tempY, neg = false;
    if (coordx == 400)  {
        if (coordy <= 540) {
            direction = degToRad(90);
        }
        else {
            direction = degToRad(270);
        }
    }
    else {
        direction = Math.atan((540 - coordy)/(coordx - 400));
        if (coordx < 400) {
            neg = true;
        }        
    }
    tempX = Math.cos(direction);
    tempY = Math.sin(direction);
    if (neg) {
        tempX = -tempX;
        tempY = -tempY;
        neg = false;
    }
    return [tempX, tempY];
};

function degToRad(angle) {
    return angle * (Math.PI/180);
}; //end degToRad()

function getMousePos(canvas, e) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
    };
};

function process() {
    for (var i = 0; i < shots.length; i++) {
        shots[i].move();
    };
    for (var i = 0; i < aliens.length; i++) {
        aliens[i].move();
    };
};

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    playerTurret.draw();
    for (var i = 0; i < shots.length; i++) {
        shots[i].draw();
    };
    for (var i = 0; i < aliens.length; i++) {
        aliens[i].draw();
    };
}; //end draw()

function loop() {
    process();
    draw();
    gloop = setTimeout(loop, 25);
}; //end loop()

canvas.addEventListener('mousemove', function(e) {
    var mousePos = getMousePos(canvas, e);
    x = mousePos.x;
    y = mousePos.y;
}, false);

canvas.addEventListener('mousedown', function(e) {
    var mousePos = getMousePos(canvas, e);
    var shotX = mousePos.x;
    var shotY = mousePos.y;
    shots.push(new shotObject(shotX, shotY));
    mouseDown = true;
}, false);

canvas.addEventListener('mouseup', function(e) {
    mouseDown = false;
});

loop();

            </script>
        </section>
    </body>
</html>

Answer 1

您有几个地方没有打电话给beginPath而你应该这样做。特别是造成你额外射击和外星人伸长的那个是你的玩家炮塔绘制功能：

ctx.beginPath();  // THIS LINE FIXES IT
ctx.fillStyle = "white";
ctx.strokeStyle = "white";
ctx.rect(380, 540, 40, 60); //draw base
ctx.fill();

您的rect此处被添加到上一次迭代的最后一次拍摄路径中并填充它。同样地，外星人从前一次迭代开始的路径被填充，导致一个盒子紧紧跟在外星人后面，使它看起来沿着它正在移动的方向伸长（左或右时更宽，上或下时更高）

http://jsfiddle.net/W3wKw/

编辑： This demo我认为很好地说明了这个问题。这是初始问题的确切代码，仅更改了颜色。红色是炮塔填充/描边，黄色是外星人填充，绿色是镜头填充。

Answer 2

在basicAlien的draw（）中添加ctx.beginPath（）;

that.draw = function() {
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.rect(that.pos[0] - 10, that.pos[1] - 5, 20, 10);
    ctx.fill();
}

基本JS画布游戏

2 个答案: