0
私は単純な宇宙ゲームを作ろうとしています。あなたは左右に動く船を持っています。小惑星は無作為なXの位置と大きさでキャンバスの上に生成され、彼らは船の方に下がります。Javascriptで同じオブジェクトを別々に動かすキャンバス
別個の場所に小惑星オブジェクトを作成するにはどうすればよいですか？ 1つのキャンバス内に複数の既存のものが存在するように、別々の変数を持つ全く別のオブジェクトとしてそれらを作成する必要はありませんか？
これは、小惑星を作成したいと思う変数を設定します。
var asteroids = {
size: Math.floor((Math.random() * 40) + 15),
startY: 100,
startX: Math.floor((Math.random() * canvas.width-200) + 200),
speed: 1
}
これは私が小惑星を描くために使用したものです。私はこのスニペットの私のすべてのコードが含まれ
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でランダムな大きさの六角形状になります）。それを実行すると、私は現在、移動する船があり、小惑星はランダムなサイズとランダム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>
アレイに入れたオブジェクトを別々のオブジェクトにしたいのはなぜですか？そうすれば、あなたは小惑星の配列を繰り返し処理して、毎秒ごとに小惑星を移動させることができます。小惑星がキャンバスから離れたらアレイから小惑星を取り除くための条件を作ることができます。小惑星の最大値を指定するには、配列が特定の長さの場合にのみ追加の小惑星を追加します。 –
これは正しい方法ですか？ 私は、異なる名前の変数を持つ同じコードがたくさんあることに気付くでしょう。 （小惑星1、小惑星2、小惑星3、小惑星4、小惑星5） –
別名小惑星のために、変数名自体が変わるようなことはありますか？もし小惑星が＃だったら＃は新しい小惑星ごとに新しい番号に置き換えられますか？私はそれが＃であることを知っているが、あなたは私が何を意味するのか？ –