Question

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

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

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

当您选择这个新的太空船（它会变成蓝色）并移动它（按向上，然后向下，然后向右，然后向左）时，它将变为与其他太空船一样正常的尺寸：

为了调试它，我在函数x中打印新添加的太空船的renderSpaceships值当用户输入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：如何将新多边形添加为对象并为其设置动画？

1 个答案: