4

我正在开发一个非常基本的基于 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>
4

2 回答 2

4

你有几个地方没有打电话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/

编辑：我认为 这个演示很好地说明了这个问题。这是最初问题的确切代码，只是颜色发生了变化。红色是炮塔填充/行程，黄色是外星填充，绿色是射击填充。

于 2013-06-28T22:06:39.577 回答
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();
}
于 2013-06-28T22:06:24.243 回答