HTML５×Javascriptでブロック崩しっぽいものを作ってみた

職場でコンパイル言語にフルボッコにされてる恨みをJavascriptにぶつけてみた。

と言っても前回のテトリスに比べたら、
物凄く簡単なブロック崩しっぽいものを作ることに。

今回の肝は、60FPSでcanvas上に描画してみたらどうなるだろー？というところ。

・概要

今回はテトリスの時にも使用したsetInterval関数の値を60FPSに合わせるため、setInterval(〜,16)と引数を設定します。

何故かというと、setIntervalの第２引数はミリ秒ですので1秒＝1000ミリ秒、60FPS＝１秒に60回の描画となるので、
16ミリ秒毎に描画をすると16×60＝960となり、大体60FPSを再現出来る計算になるからです。

で、実際に書いてみたのが以下、

// 自機の初期位置
var posX = 210;
var posY = 400;

// canvas格納変数
var ctx;

// ボールの移動係数
var ballMoveX = 5;
var ballMoveY = -5;

// ボールの初期位置
var ballX = 220;
var ballY = 380;

var point = 0;

// 左右キーの押下フラグ
var pressKeyR = false;
var pressKeyL  = false;


// GAMEOVERフラグ
var gameOverFlag = false;

// setInterval格納変数
// ボール描画用
var loopBall;

// setInterval格納変数
// 自機描画用
var loopMe;


// 初期読み込み関数
function load() {
	var canvas = document.getElementById('canvas_test');
	if ( ! canvas || ! canvas.getContext ) { return false; }
	ctx = canvas.getContext('2d');
	ctx.fillStyle = "#ffffff";
	ctx.fillRect(posX, posY, 60, 10);
	ctx.font = "italic bold 18px";
	ctx.fillText("POINT : ", 400,30);
	ctx.fillText(point, 450,30);
	init_paint();
	loopBall = setInterval(paint, 16);
}



function paint(){
	init_paint();
	mePaint();
	ballPaint();
}



function init_paint(){
	ctx.strokeStyle = "#ffffff";
    ctx.moveTo(0,35);
    ctx.lineTo(500,35);
    ctx.stroke();
}




// ボール描画関数
function ballPaint(){
	if(ballX + ballMoveX <= 500 && ballX + ballMoveX >= 0){
		ballX = ballX + ballMoveX;
	}else{
		ballMoveX = ballMoveX * -1;
		ballX = ballX + ballMoveX;
	}
	
	
	ctx.clearRect(0,40,500,360);
	ctx.fillStyle = "#ffffff";
	ctx.beginPath();
	ctx.arc(ballX, ballY, 5, 0, Math.PI*2, false);
	ctx.fill();
	

	if(ballY + ballMoveY >= 50){
		if(ballY == 400){
			if(ballX > posX && ballX < posX + 60){
				ballMoveY = ballMoveY * -1;
			}else{
				ctx.fillStyle = "#ffffff";
				ctx.font = "italic bold 18px";
				ctx.fillText("GAME OVER", 10,30);
				clearInterval(loopBall);
				gameOverFlag = true;
				return;
			}
			point++;
			ctx.clearRect(450,0,500,30);
			ctx.fillText(point, 450,30);
		}
		ballY = ballY + ballMoveY;
	}else{
		ballMoveY = ballMoveY * -1;
	}
	
}


// 自機描画関数
function mePaint(){

	if(pressKeyL == true){
		posX = posX - 5;
	}

	if(pressKeyR == true){
		posX = posX + 5;
	}
	
	ctx.clearRect(0,400,500,100);
	ctx.fillStyle = "#ffffff";
	ctx.fillRect(posX, posY, 60, 10);
}


// キーダウン関数
function key(keyCode) {
	switch (keyCode) {
		case 37:
			if(gameOverFlag == true){
				break;
			}
			
			if(pressKeyL == false){
				pressKeyL = true;
			}
			break;
		case 39:
			if(gameOverFlag == true){
				break;
			}
			
			if(pressKeyR == false){
				pressKeyR = true;
			}
			break;
		default:
			return;
	}
}


// キーアップ関数
function keyup(keyCode) {
	switch (keyCode) {
		case 37:
			if(gameOverFlag == true){
				break;
			}
			pressKeyL = false;
			break;
		case 39:
			if(gameOverFlag == true){
				break;
			}
			pressKeyR = false;
			break;
		default:
			return;
	}
}

相変わらず変数の命名センスが皆無です。
で、今回プログラミングしてて初めて、Javascriptの命名規則はキャメルケースが普通というのを知りました。

Javascripterとしてまたひとつ勉強になりましたん。

あとは、これにブロックだの、ブロックとの衝突関数だのを加えればブロック崩しの出来上がりですね！
・・・まぁ自機自体の衝突のロジックが、このプログラムでは既に物凄く適当なんですがね。

まだまだ適当なプログラムですので、穴があったりだとかを見つけたらそこは自分色に染めちゃってください。

肝心の60FPSを再現した際の動きなんですが、こんな適当なプログラムでも一応変な動作になることはありませんでした。

やっぱり少しカクンカクンするところがあるかなー？とか気になる部分はあるのですが、概ねOKな範囲ではないかと。

いやー、HTML５があるとenchant.jsとか使って何か作りたくなりますねー。
今度何か作ってみようかしら。