宇宙飞船运动

时间:2012-02-15 07:48:02

标签: javascript raphael game-physics

我正在创造一种类似于逃逸速度的迷你太空飞船游戏。我似乎无法使惯性正常工作。 我也有转向功能的问题。如果我点击左或右箭头键,则它不会跟随应该发生的圆形类型运动。

$(function() {
var canvas = Raphael('game', 1000, 800);
var background = canvas.rect(0, 0, 1000, 800);
background.attr("fill", "black");

var ship = canvas.rect(200, 200, 10, 35);
ship.attr("fill", "red");
ship.angle = 0;
ship.turnrate = 4;
ship.maxSpeed = 2;
ship.acc = 0;
ship.accSpeed = 0.25;
ship.vel = [0,0];

var up = 0;
var left = 0;
var right = 0;
var speedx = 0;
var speedy = 0;

function moveShip() {
    if (left == 1) {
        ship.angle = (ship.angle - ship.turnrate) % 360;
    }

    if (right == 1) {
        ship.angle = (ship.angle + ship.turnrate) % 360;
    }

    if (up == 1) {
        if (ship.acc < ship.maxSpeed) {
            ship.acc += ship.accSpeed;
        }

        if (ship.acc > ship.maxSpeed) {
            ship.acc = ship.speed;
        }
    }

    if (up == 0) {
        if (ship.acc > 0) {
            ship.acc -= ship.accSpeed;
        }

        if (ship.acc < 0) {
            ship.acc = 0;
        }
    }

    speedx = ship.vel[0] + ship.acc * Math.sin(ship.angle);
    speedy = ship.vel[1] + ship.acc * Math.cos(ship.angle);

    ship.vel = [speedx, speedy];

    ship.transform("");
    ship.rotate(ship.angle);
    ship.attr({x: ship.vel[0], y: ship.vel[1]});

    $("#stats").text("ship.angle: " + ship.angle
            + " vel[0]: " + ship.vel[0] + " vel[1]: " + ship.vel[1]
    + " ship.speed: " + ship.maxSpeed + " speedx: " + speedx + " speedy: " + speedy);
}

function keyPressed(evt) {
    if (evt.keyCode == 38) {
        up = 1;
    }

    if (evt.keyCode == 37) {
        left = 1;
    }

    if (evt.keyCode == 39) {
        right = 1;
    }
}

function keyReleased(evt) {
    if (evt.keyCode == 38) {
        up = 0;
    }

    if (evt.keyCode == 37) {
        left = 0;
    }

    if (evt.keyCode == 39) {
        right = 0;
    }
}

function gameloop() {
    moveShip();
}

$(document).keydown(keyPressed);
$(document).keyup(keyReleased);
setInterval(gameloop, 30);
});

我一直在搜索堆栈溢出和互联网,但大多数问题都与经典的Space Invaders类型游戏有关,不涉及转向或惯性。

任何帮助都会受到赞赏,我真的只是想要了解我所缺少的东西。

1 个答案:

答案 0 :(得分:1)

您确定要使用箭头键更改船舶的加速度吗?请记住,加速度是速度的变化率。这意味着,如果你有一个恒定的加速度,那么你的速度将开始增长并增长和增长。很快你就会有一艘太快的船。

聊天室的结果,这里是后人:

$(function() {
    var canvas = Raphael('game', 1000, 800);
    var background = canvas.rect(0, 0, 1000, 800);
    background.attr("fill", "black");

    var ship = canvas.rect(200, 200, 10, 35);
    ship.attr("fill", "red");
    ship.angle = 0;
    ship.turnrate = 4;
    ship.maxSpeed = 0.25;
    ship.acc = 0.25;
    ship.vel = [0,0];
    ship.pos = [500,400];

    var up = 0;
    var left = 0;
    var right = 0;
    var speedx = 0;
    var speedy = 0;

    function moveShip() {
        if (left == 1) {
            ship.angle = (ship.angle - ship.turnrate) % 360;
        }

        if (right == 1) {
            ship.angle = (ship.angle + ship.turnrate) % 360;
        }

        if (up == 1) {
            speedx = ship.vel[0] + ship.acc * Math.sin(ship.angle * Math.PI / 180);
            speedy = ship.vel[1] - ship.acc * Math.cos(ship.angle * Math.PI / 180);

            ship.vel = [speedx, speedy];
        }
        ship.pos = [ship.pos[0] + speedx, ship.pos[1] + speedy];

        ship.transform("");
        ship.rotate(ship.angle);
        ship.attr({x: ship.pos[0], y: ship.pos[1]});

        $("#stats").text("ship.angle: " + ship.angle
                + " vel[0]: " + ship.vel[0] + " vel[1]: " + ship.vel[1]
        + " ship.speed: " + ship.maxSpeed + " speedx: " + speedx + " speedy: " + speedy);
    }

    function keyPressed(evt) {
        if (evt.keyCode == 38) {
            up = 1;
        }

        if (evt.keyCode == 37) {
            left = 1;
        }

        if (evt.keyCode == 39) {
            right = 1;
        }
    }

    function keyReleased(evt) {
        if (evt.keyCode == 38) {
            up = 0;
        }

        if (evt.keyCode == 37) {
            left = 0;
        }

        if (evt.keyCode == 39) {
            right = 0;
        }
    }

    function gameloop() {
        moveShip();
    }

    $(document).keydown(keyPressed);
    $(document).keyup(keyReleased);
    setInterval(gameloop, 30);
});​

修复了两个错误。添加了pos属性,以便可以单独更新速度和位置。此外,Math.sinMath.cos以弧度为单位,因此我们转换了这些函数的角度。

您可以使用结果:http://jsfiddle.net/mJcN7/8/