Javascript:如何添加一个新的多边形作为对象并将其动画化？

Question

我试图创造一个简单的游戏。在其中，将有6艘宇宙飞船在周围飞行，用户将能够选择一艘并四处移动。我做到了。现在，我想添加一个新功能，用户可以通过输入速度、方向等参数来添加一个新的宇宙飞船。我试过这样做，但是我的代码中有一个很大的部分我无法调试。

这是我的代码：https://jsfiddle.net/fvtjzLhr/4/

我将每艘宇宙飞船的参数存储在一个名为ships的全局数组中。我正在通过调用addShip函数和随机传递参数来生成6艘宇宙飞船的初始参数：

var ships = [];

function addShip(x, y, speed, topSpeed, altitude, direction, id){
  ships.push({
        selected: false,
    x: x,
    y: y,
    speed: speed,
    topSpeed: topSpeed,
    altitude: altitude,
    id: id,
    direction: direction
    });
}

for(var i = 0; i < 6; i++) {
 addShip(getRand(1, canvas.width), getRand(1, canvas.height), getRand(1, 100), getRand(1, 100), getRand(1, 100), getRand(1, 100), i+1);
}

为了允许用户输入新飞船的参数，我正在使用<input type="text">字段。我正在读取这些参数并将其插入到ships中。

// Creating a new Spaceship
    var xd = document.getElementById('x');
    var yd = document.getElementById('y');
    var speed = document.getElementById('speed');
    var topSpeed = document.getElementById('topSpeed');
    var altitude = document.getElementById('altitude');
    var direction = document.getElementById('direction');

    document.getElementById('submit').onclick = function () {
        ships.push({
            selected: false,
        x: xd.value,
        y: yd.value,
        speed: speed.value,
        topSpeed: topSpeed.value,
        altitude: altitude.value,
        id: ships.length+1,
        direction: direction.value
        });

    };

BUG:

当用户按下提交按钮时，会增加一艘新的非常大的飞船。(我不知道为什么，我根本不使用缩放)：

​

当你选择这艘新的宇宙飞船(它将变成蓝色)并移动它(按下，然后向下，然后右，然后左)，它将成为正常大小的其他宇宙飞船：

​

为了调试它，我在函数renderSpaceships中打印新添加的宇宙飞船的1000000……值，当用户输入x的1时，它正在打印1000000……。删除startFlying();的注释，亲自查看它。

//DEBUG
    if(ship.id == 7){
        document.getElementById("demo").innerHTML = ship.x + " ";
    }

​

​

Answer 1

我通过在代码中进行以下更改来解决这个问题：

// Creating a new Spaceship
    var xd = document.getElementById('x');
    var xz = parseInt(xd.value);
    var yd = document.getElementById('y');
    var yz = parseInt(yd.value);
    var speed = document.getElementById('speed');
    var topSpeed = document.getElementById('topSpeed');
    var altitude = document.getElementById('altitude');
    var direction = document.getElementById('direction');

    document.getElementById('submit').onclick = function () {
        ships.push({
            selected: false,
            x: xz,
            y: yz,
            speed: speed.value,
            topSpeed: topSpeed.value,
            altitude: altitude.value,
            id: ships.length+1,
            direction: direction.value
        });
    };