Javascript：如何在多个位置绘制相同的多边形？答案

【问题标题】：Javascript: how to draw same polygon in many positions?Javascript：如何在多个位置绘制相同的多边形？
【发布时间】：2017-11-20 17:42:50
【问题描述】：

我正在尝试创建一个简单的游戏模拟，用户将在其中选择一架飞机并四处移动。我能够绘制一个平面并添加 4 个按钮来移动它。但是，我不确定如何在随机位置创建 6 个完全相同的平面并绘制它们。此外，用户必须能够选择其中一个平面并四处移动。

Jsfiddle：https://jsfiddle.net/fvtjzLhr/

HTML 代码：

<canvas id="canvas" width="500" height="500"></canvas>
<br>
<button id="Left">Left</button>
<button id="Up">Up</button>
<button id="Down">Down</button>
<button id="Right">Right</button>

Javascript 代码：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var poly=[ 20,0, 40,0, 50,15, 100,10, 130,30, 100,50, 50,45, 40,60, 20,60, 30,45, 20,40, 10,40, 0,45, 0,15, 10,20, 20,20, 30,15];

    var spaceship1 = {
        x: 0,
        y: 0,
        speed: 50,
        altitude: 360,
        id: 68,
        direction: 150
    }

    document.getElementById("Up").addEventListener("click", function(){
        spaceship1.y -= 30;
    });
    document.getElementById("Down").addEventListener("click", function(){
        spaceship1.y += 30;
    });
    document.getElementById("Left").addEventListener("click", function(){
        spaceship1.x -= 30;
    });
    document.getElementById("Right").addEventListener("click", function(){
        spaceship1.x += 30;
    });

    function renderSpaceship(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
        //ctx.fillStyle = '#D3D3D3';
        ctx.beginPath();
        ctx.moveTo(poly[0]+spaceship1.x, poly[1]+spaceship1.y);
        for( item=2 ; item < poly.length-1 ; item+=2 ){ctx.lineTo( poly[item]+spaceship1.x , poly[item+1]+spaceship1.y )}
        ctx.closePath();
        ctx.fill();
        ctx.font="17px Georgia";

        ctx.fillText("ID: "+spaceship1.id, spaceship1.x, 120+spaceship1.y);
        ctx.fillText("Altitude: "+spaceship1.altitude, spaceship1.x, 105+spaceship1.y);
        ctx.fillText("Speed: "+spaceship1.speed, spaceship1.x, 90+spaceship1.y);
        ctx.fillText("Direction: "+spaceship1.direction, spaceship1.x, 75+spaceship1.y);
    }

    function renderAll(){

        renderSpaceship();
    }

    setInterval(renderAll, 10);

它应该看起来像这样：

忽略背景。蓝色用于所选平面。

【问题讨论】：

标签： javascript graphics polygon

【解决方案1】：

您将希望避免命名船舶并将它们存储在诸如Spaceship1 之类的变量中，一旦您需要开始实施许多船舶，这会导致大量重复代码。

为避免重复代码，请创建一个数组来保存游戏中的每艘船。你的 draw 函数应该循环遍历 ship 数组的每个元素并绘制它。

您可以创建一个名为selectedShip 的变量，并在单击上/下/右/左按钮时更新该位置。要“选择”另一艘船，只需监听画布上的点击并检测对一艘船的点击。如果点击了一艘船，请将您的 selectedShip 变量更新为被点击的那个。

对您的小提琴进行一些编辑：

绘制时遍历每艘船

function renderSpaceships() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for(var i = 0; i < ships.length; i++) {
    var ship = ships[i];      
    ...
  }

添加辅助函数以在一行中创建船只

function addShip(x, y, id){
  ships.push({
    x: x,
    y: y,
    speed: 50,
    altitude: 320,
    id: id,
    direction: 150
  });
}

addShip(getRand(1, 400), getRand(1, 400), 68);

我没有为你的飞船添加任何点击监听器，你需要获取点击的坐标并检查你的数组中是否有任何飞船与点击的点重叠。然后更新selectedShip。

New fiddle

这应该会让你找到一个好的方向，在保持整洁的同时不断添加功能。祝你好运！

【讨论】：