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

Question

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

这是我的代码：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
        });

    };

错误：

当用户按下提交按钮时，会添加一个新的非常大的宇宙飞船。（我不知道为什么，我根本没有使用缩放）：

当你 select 这艘新宇宙飞船（它会变成蓝色）并四处移动（按向上，然后向下，然后向右，然后向左）时，它将变成与其他宇宙飞船一样的正常大小：

为了调试它，我在函数renderSpaceships中打印x新添加的宇宙飞船的值当用户输入 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
        });
    };

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

Javascript: How to add a new polygon as an object and animate it?

javascript

graphics

polygon