Question

我正在准备一个简单的坦克战游戏的逻辑。这个想法是你有一个坦克（矩形）。通过推动a或d进行旋转，同时按w或s - 向上（向前）或向下（向后）移动。

if(keys[65] === true) {
    gun.angle -= gun.speed;
}

if(keys[68] === true) {
    gun.angle += gun.speed;
}

if(keys[87] === true) {
    gun.x += gun.speed * Math.cos(radians(gun.angle));
    gun.y += gun.speed * Math.sin(radians(gun.angle));
}

if(keys[83] === true) {
    gun.x -= gun.speed * Math.cos(radians(gun.angle));
    gun.y -= gun.speed * Math.sin(radians(gun.angle));
}

脚本工作得很好，但有一个问题我很难解决。如果您旋转坦克没有问题，但是当您向上或向下移动时，会有跳跃效果。

当你向上移动时它向下跳跃，而当你向下移动它跳跃时。

可以使用此demo fiddle轻松测试。我怀疑这个问题可能与以下事实有关：受移动影响的点是坦克的x和y，而翻译（旋转）是基于坦克的中心点。我不知道如何解决它。

任何帮助都会很好;）

Answer 1

在动画功能中，您在更新喷枪位置之前计算喷枪中心。结果，坦克的枪（即圆和线）被拉到旧位置，但坦克的身体（即矩形）在坦克移动时被拉到新的位置。

更改...

var animate = function() {

    gun_center_x = gun.x + (gun.w / 2);
    gun_center_y = gun.y + (gun.h / 2);

    if(keys[65] === true) {
        gun.angle -= gun.speed;
    }

    if(keys[68] === true) {
        gun.angle += gun.speed;
    }

    if(keys[87] === true) {
        gun.x += gun.speed * Math.cos(radians(gun.angle));
        gun.y += gun.speed * Math.sin(radians(gun.angle));
    }

    if(keys[83] === true) {
        gun.x -= gun.speed * Math.cos(radians(gun.angle));
        gun.y -= gun.speed * Math.sin(radians(gun.angle));
    }

    ...

};

为...

var animate = function() {


    if(keys[65] === true) {
        gun.angle -= gun.speed;
    }

    if(keys[68] === true) {
        gun.angle += gun.speed;
    }

    if(keys[87] === true) {
        gun.x += gun.speed * Math.cos(radians(gun.angle));
        gun.y += gun.speed * Math.sin(radians(gun.angle));
    }

    if(keys[83] === true) {
        gun.x -= gun.speed * Math.cos(radians(gun.angle));
        gun.y -= gun.speed * Math.sin(radians(gun.angle));
    }

    gun_center_x = gun.x + (gun.w / 2);
    gun_center_y = gun.y + (gun.h / 2);

    ...

};

移动旋转矩形时的跳跃效果

1 个答案: