Javascript：如何将新多边形添加为对象并为其设置动画？答案

【问题标题】：Javascript: How to add a new polygon as an object and animate it?Javascript：如何将新多边形添加为对象并为其设置动画？
【发布时间】：2017-11-21 17:25:40
【问题描述】：

我正在尝试创建一个简单的游戏。其中将有 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
        });

    };

错误：

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

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

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

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

【问题讨论】：

标签： javascript graphics polygon

【解决方案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
        });
    };

【讨论】：