0
所以我試圖做一個簡單的空間遊戲。你將會有一艘左右移動的船隻，隨機的X位置和尺寸將在帆布頂部以上產生小行星，並且它們會向船上移動。使相同的對象在Javascript Canvas中獨立移動
如何在獨立位置創建Asteroid對象？就像在畫布上同時存在多個對象一樣，而不是將它們創建爲具有獨立變量的完全獨立的對象？
這設置我想要創建小行星的變量。
var asteroids = {
size: Math.floor((Math.random() * 40) + 15),
startY: 100,
startX: Math.floor((Math.random() * canvas.width-200) + 200),
speed: 1
}
這是我用來畫小行星的東西。 （它使具有隨機尺寸的六邊形形狀，在一個隨機的x座標）
function drawasteroid() {
this.x = asteroids.startX;
this.y = 100;
this.size = asteroids.size;
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.moveTo(this.x,this.y-this.size*0.5);
ctx.lineTo(this.x+this.size*0.9,this.y);
ctx.lineTo(this.x+this.size*0.9,this.y+this.size*1);
ctx.lineTo(this.x,this.y+this.size*1.5);
ctx.lineTo(this.x-this.size*0.9,this.y+this.size*1);
ctx.lineTo(this.x-this.size*0.9,this.y);
ctx.fill();
}
我包括所有我的代碼在這個段中。一旦運行它，你會看到我目前有一艘移動的小船，小行星以隨機大小和隨機x座標繪製。我只需要知道如何去做小行星移動，同時創造其他新的小行星，也將下移。
謝謝你的一切幫助！我是新來的JavaScript。
// JavaScript Document
////// Variables //////
var canvas = {width:300, height:500, fps:30};
var score = 0;
var player = {
\t x:canvas.width/2,
\t y:canvas.height-100,
\t defaultSpeed: 5,
\t speed: 10
\t };
\t
var asteroids = {
\t size: Math.floor((Math.random() * 40) + 15),
\t startY: 100,
\t startX: Math.floor((Math.random() * canvas.width-200) + 200),
\t speed: 1
}
var left = false;
var right = false;
////// Arrow keys //////
function onkeydown(e) {
\t \t if(e.keyCode === 37) {
\t \t \t left = true;
\t \t }
\t \t
\t \t if(e.keyCode === 39) {
\t \t \t right = true; \t
\t \t }
}
function onkeyup(e) {
\t \t if (e.keyCode === 37) {
\t \t \t left = false;
\t \t }
\t \t
\t \t if(e.keyCode === 39) {
\t \t \t right = false; \t
\t \t }
}
\t
////// other functions //////
//function to clear canvas
function clearCanvas() {
\t ctx.clearRect(0,0,canvas.width,canvas.height);
}
// draw the score in the upper left corner
function drawscore(score) {
\t var score = 0;
\t ctx.fillStyle = "#FFFFFF";
\t ctx.fillText(score,50,50);
}
// Draw Player ship.
function ship(x,y) {
\t var x = player.x;
\t var y = player.y;
\t ctx.fillStyle = "#FFFFFF";
\t ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x+15,y+50);
ctx.lineTo(x-15,y+50);
ctx.fill();
}
// move player ship.
function moveShip() {
\t document.onkeydown = onkeydown;
\t document.onkeyup = onkeyup;
\t if (left === true && player.x > 50) {
\t \t player.x -= player.speed;
\t }
\t if (right === true && player.x < canvas.width - 50) {
\t \t player.x += player.speed;
\t }
}
// Draw Asteroid
function drawasteroid() {
\t this.x = asteroids.startX;
\t this.y = 100;
\t this.size = asteroids.size;
\t ctx.fillStyle = "#FFFFFF";
\t
\t ctx.beginPath();
ctx.moveTo(this.x,this.y-this.size*0.5);
ctx.lineTo(this.x+this.size*0.9,this.y);
ctx.lineTo(this.x+this.size*0.9,this.y+this.size*1);
\t ctx.lineTo(this.x,this.y+this.size*1.5);
\t ctx.lineTo(this.x-this.size*0.9,this.y+this.size*1);
\t ctx.lineTo(this.x-this.size*0.9,this.y);
ctx.fill();
\t \t
}
// move Asteroid
function moveAsteroid() {
\t //don't know how I should go about this.
}
// update
setInterval (update, 1000/canvas.fps);
function update() {
\t
// test collisions and key inputs
\t moveShip();
\t
// redraw the next frame of the animation
\t clearCanvas();
\t drawasteroid();
\t drawscore();
\t ship();
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Game</title>
<script src="game-functions.js"></script>
<!--
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
-->
</head>
<body>
<canvas id="ctx" width="300" height="500" style="border: thin solid black; background-color: black;"></canvas>
<br>
<script>
////// Canvas setup //////
var ctx = document.getElementById("ctx").getContext("2d");
</script>
</body>
</html>
爲什麼你不想把它們放在一個數組中？這樣你可以迭代你的小行星陣列，並且每次調用setainterval時都會移動它們。一旦離開畫布，您可以創建一個從陣列中移除小行星的條件。只有在數組長度特定時，纔可以通過添加一個小行星來指定最大的小行星。 –
雖然這是一個正確的方法嗎？ 我認爲這將最終得到許多與不同名稱下的變量相同的代碼。 （小行星1，小行星2，小行星3，小行星4，小行星5） –
有沒有辦法做這樣的事情，其中變量名稱本身會改變爲單獨的小行星？如果是小行星＃並且＃會被每個新小行星的新編號替換？我知道它不會是＃，但你明白我的意思嗎？ –