Question

所以我想做一个简单的太空游戏。你将有一艘左右移动的船，小行星将在随机X位置和大小的画布顶部上方生成，它们将向下移向船。

如何在单独的位置创建小行星对象？就像在画布中同时存在多个，而不是将它们创建为具有单独变量的完全独立的对象？

这设置了我想要创建小行星的变量。

 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 = {
	x:canvas.width/2,
	y:canvas.height-100,
	defaultSpeed: 5,
	speed: 10
	};
	
var asteroids = {
	size: Math.floor((Math.random() * 40) + 15),
	startY: 100,
	startX: Math.floor((Math.random() * canvas.width-200) + 200),
	speed: 1
}

var left = false;
var right = false;



////// Arrow keys //////

function onkeydown(e) {
		if(e.keyCode === 37) { 
			left = true;
		} 
		
		if(e.keyCode === 39) {
			right = true;	
		} 
}

function onkeyup(e) {
		if (e.keyCode === 37) { 
			left = false;
		} 
		
		if(e.keyCode === 39) {
			right = false;	
		} 
}
	

////// other functions //////


//function to clear canvas
function clearCanvas() {
	ctx.clearRect(0,0,canvas.width,canvas.height);
}

// draw the score in the upper left corner
function drawscore(score) {
	var score = 0;
	ctx.fillStyle = "#FFFFFF";
	ctx.fillText(score,50,50);
}

// Draw Player ship.
function ship(x,y) {
	var x = player.x;
	var y = player.y;
	ctx.fillStyle = "#FFFFFF";

	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() {
	document.onkeydown = onkeydown;
	document.onkeyup = onkeyup;
	if (left === true && player.x > 50) {
		player.x -= player.speed;
	}
	if (right === true && player.x < canvas.width - 50) {
		player.x += player.speed;
	}
}


// Draw Asteroid
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();
		
}

// move Asteroid
function moveAsteroid() {
	//don't know how I should go about this.
}



// update
setInterval (update, 1000/canvas.fps);

function update() {
	
// test collisions and key inputs
	moveShip();
	
// redraw the next frame of the animation
	clearCanvas();
	drawasteroid();
	drawscore();
	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>

Answer 1

您希望创建小行星动态...所以为什么不设置一个随机间隔调用的setInterval，如下所示。您不需要为您创建的每个Asteroids对象单独声明。您只需在setInterval函数中声明一个临时的。这将使用相同的声明实例化多个不同的对象。当然，您需要将每个对象存储在与数组完全相同的位置。

如果要调用moveAsteroid函数（如果它们不在画布中），则还必须确保从数组中删除小行星。下面的setInterval函数应该在窗口加载时调用，并且与主渲染setInterval函数一起存在。

您还必须稍微更改moveAsteroid函数，以便能够从数组中指向特定的Asteroids对象。您可以通过添加Asteroids对象作为函数的参数或通过使该函数成为Asteroids类的属性并使用 this 来完成此操作。我在下面的例子中做了后者。

 var astArray = [];
 var manageAsteroidFrequency = 2000;


 var Asteroids {
      X: //something
      Y://something
      speed:1
      move: function() {
             this.X -= speed;
       }

   }


 var mainRenderingFunction = setInterval( function() {

      for (var i = astArray.length-1 ; i > -1; i --){
            if(astArray[i].Y < 0){
                 astArray.splice(i, 1)
             }else{
                 astArray[i].move;
              }
        }

  }, 40);


 var manageAsteroids = setInterval( function () {

       if (astArray.length < 4){
             var tmpAst = new Asteroids();
             astArray.push(tmpAst);
           }

       manageAsteroidFrequency = Math.floor(Math.random()*10000);
       }, manageAsteroidFrequency);

使相同的对象在Javascript Canvas中独立移动

1 个答案: