자바 스크립트 : 여러 위치에서 동일한 폴리곤을 그리는 방법은 무엇입니까?

Question

나는 사용자가 비행기를 선택하고 주위를 움직일 간단한 게임 시뮬레이션을 만들려고합니다. 하나의 비행기를 그릴 수 있고 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> 

자바 스크립트 코드 :

이

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); 

그것은 다음과 비슷한 모습이 될 것입니다

이 배경을 무시합니다. 청색은 선택된 평면을 나타냅니다.

Answer 1

네이밍 배송을하지 말고 Spaceship1과 같은 변수에 저장하는 것이 좋습니다. 많은 배송을 시작해야하는 경우 많은 반복 코드가 필요합니다.

코드 복제를 피하려면 게임에서 각 배를 보관할 어레이를 만드십시오. 그리기 기능은 배 배열의 각 요소를 반복하여 그려야합니다.

위/아래/오른쪽/왼쪽 버튼을 클릭 할 때마다 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

이것은 당신이 깔끔한 일을 유지하면서 기능을 추가 계속 좋은 방향으로 지적 받아야합니다. 행운을 빕니다!