見出し画像

JavaScript+html+Canvas でゲーム作成（基本部分）

sanbunnoichi

基本的には以下をベースにあとは中身を作るだけ。
中身とは、入力とか描画とか処理とか入れれば良し。

<html>
<head>
<style type="text/css">
<!-- canvas { background: #000 ; } -->
</style>
</head>
<body>
<canvas id="myCanvas" width="512" height="512"></canvas>
<script language="JavaScript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

function draw() {
/* プログラム実行部分 */

    /* たとえばCanvasに描画 */
    ctx.beginPath();
    ctx.fillStyle = "blue";
    ctx.fillRect( 200, 200, 10, 10 );
    ctx.closePath();

}

/* draw()関数がsetIntervalの中で16ミリ秒おきに実行 */
setInterval(draw, 16);

</script>
</body>
</html>

続き１：
上記の"function draw(){}"と下記を入れ替えると玉がいっぱい表示されます。

/* 玉の半径 */
var ballRadius = 10;

/* 玉準備 */
var pos = new Array(1000);
for( var i = 0; i < pos.length; i++ ){
	pos[i] = new Array(8);	/* x,y,speedx,speedy,color */
}

/* 初期座標セット */
for( var i = 0; i < pos.length; i++ ){
	pos[i][0] = ( Math.random() * canvas.width ) ;		/* xpos */
	pos[i][1] = ( Math.random() * canvas.height );		/* ypos */
	pos[i][2] = ( Math.random() * 4 ) + 2 - 3;			/* speedx */
	pos[i][3] = ( Math.random() * 4 ) + 2 - 3;			/* speedy */
	pos[i][4] = ( Math.random() * 256 ) / 16 * 16;		/* RGBのR */
	pos[i][5] = ( Math.random() * 256 ) / 16 * 16;		/* RGBのG */
	pos[i][6] = ( Math.random() * 256 ) / 16 * 16;		/* RGBのB */
	pos[i][7] = 0;
}

/* 描画 */
function draw(){
	/* 画面クリア */
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	/* 描画 */
	for( var i = 0; i < pos.length; i++ ){
		ctx.beginPath();
		ctx.arc( pos[i][0], pos[i][1], ballRadius, 0, Math.PI*2 );
		ctx.fillStyle = "rgb(" + (~~pos[i][4]) + ", " + (~~pos[i][5]) + ", " + (~~pos[i][6]) + ")" ;
		ctx.fill();
		ctx.closePath();
	}

	/* Canvas衝突判定 */
	for( var i = 0; i < pos.length; i++ ){
		/* 玉を壁のx方向で反射させる */
		if( ( pos[i][0] + pos[i][2] > canvas.width-ballRadius ) || ( pos[i][0] + pos[i][2] < ballRadius ) ){
			pos[i][2]  = pos[i][2] * (-1);
		}
    
		/* 玉を壁のy方向で反射させる */
		if( ( pos[i][1] + pos[i][3] > canvas.height-ballRadius ) || ( pos[i][1] + pos[i][3] < ballRadius ) ){
			pos[i][3] = pos[i][3] * (-1);
		}
 
		/* 玉移動 */
		pos[i][0] += pos[i][2];
		pos[i][1] += pos[i][3];
	}
}

続き２：
これをちょっと編集して以下のようにします。

/* 玉の半径 */
var ballRadius = 2;
/* 隣り合う玉の間隔 */
var ballInterval = 4;

var w_size = canvas.width / ballInterval;
var h_size = canvas.height / ballInterval;

/* 玉準備 */
var pos = new Array( w_size * h_size );
for( var i = 0; i < pos.length; i++ ){
	pos[i] = new Array(8);	/* x,y,speedx,speedy,color */
}

/* 初期座標セット */
for( var i = 0; i < pos.length; i++ ){
	pos[i][0] = ( ( i % w_size ) * ballInterval );		/* xpos */
	pos[i][1] = ( ( i / h_size ) * ballInterval );		/* ypos */
	pos[i][4] = ( Math.random() * 256 ) / 16 * 16;		/* RGBのR */
	pos[i][5] = ( Math.random() * 256 ) / 16 * 16;		/* RGBのG */
	pos[i][6] = ( Math.random() * 256 ) / 16 * 16;		/* RGBのB */
	pos[i][2] = pos[i][3] = pos[i][7] = 0;
}

/* 描画 */
function draw(){
	/* 画面クリア */
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	/* 描画 */
	for( var i = 0; i < pos.length; i++ ){
		ctx.beginPath();
		ctx.arc( pos[i][0], pos[i][1], ballRadius, 0, Math.PI*2 );
		ctx.fillStyle = "rgb(" + (~~pos[i][4]) + ", " + (~~pos[i][5]) + ", " + (~~pos[i][6]) + ")" ;
		ctx.fill();
		ctx.closePath();
	}
}

動かすパソコン等の性能にもよりますが、昔のドットタイプのゲームならこれで作れそうです。

この記事が気に入ったらサポートをしてみませんか？