ブロック崩し

以下はJavaScriptを使用して実装した、ブロック崩しアプリです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ブロック崩し</title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		canvas {
			background-color: #eee;
			display: block;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas" width="480" height="320"></canvas>

	<script>
		// ブロックの情報
		var blocks = [];
		var blockRowCount = 3;
		var blockColumnCount = 5;
		var blockWidth = 75;
		var blockHeight = 20;
		var blockPadding = 10;
		var blockOffsetTop = 30;
		var blockOffsetLeft = 30;

		// パドルの情報
		var paddleWidth = 75;
		var paddleHeight = 10;
		var paddleX = (canvas.width - paddleWidth) / 2;

		// ボールの情報
		var ballRadius = 10;
		var ballX = canvas.width / 2;
		var ballY = canvas.height - 30;
		var ballSpeedX = 3;
		var ballSpeedY = -3;

		// ゲームの状態
		var gameOver = false;
		var gameWin = false;

		// キャンバスの取得
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d");

		// ブロックの初期化
		for (var c = 0; c < blockColumnCount; c++) {
			blocks[c] = [];
			for (var r = 0; r < blockRowCount; r++) {
				blocks[c][r] = {
					x: 0,
					y: 0,
					status: 1
				};
			}
		}

		// パドルの描画
		function drawPaddle() {
			ctx.beginPath();
			ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
			ctx.fillStyle = "#0095DD";
			ctx.fill();
			ctx.closePath();
		}

		// ボールの描画
		function drawBall() {
			ctx.beginPath();
			ctx.arc(ballX, ballY, ballRadius, 0, Math.PI*2);
			ctx.fillStyle = "#0095DD";
			ctx.fill();
			ctx.closePath();
		}

		// ブロックの描画
		function drawBlocks() {
			for (var c = 0; c < blockColumnCount; c++) {
				for (var r = 0; r < blockRowCount; r++) {
					if (blocks[c][r].status == 1) {
						var blockX = (c * (blockWidth + blockPadding)) + blockOffsetLeft;
						var blockY = (r * (blockHeight + blockPadding)) + blockOffsetTop;
						blocks[c][r].x = blockX;
						blocks[c][r].y = blockY;
						ctx.beginPath();
						ctx.rect(blockX, blockY, blockWidth, blockHeight);
						ctx.fillStyle = "#0095DD";
						ctx.fill();
						ctx.closePath();
					}
				}
			}
		}

		// 当たり判定
		function collisionDetection() {
			for (var c = 0; c < blockColumnCount; c++) {
				for (var r = 0; r < blockRowCount; r++) {
					var b = blocks[c][r];
					if (b.status == 1) {
						if (ballX > b.x && ballX < b.x + blockWidth && ballY > b.y && ballY < b.y + blockHeight) {
							ballSpeedY = -ballSpeedY;
							b.status = 0;
						}
					}
				}
			}
		}

		// ゲームオーバーの処理
		function gameover() {
			ctx.beginPath();
			ctx.font = "30px Arial";
			ctx.fillStyle = "#0095DD";
			ctx.textAlign = "center";
			ctx.fillText("GAME OVER", canvas.width/2, canvas.height/2);
			ctx.closePath();
			gameOver = true;
		}

		// ゲームクリアの処理
		function gamewin() {
			ctx.beginPath();
			ctx.font = "30px Arial";
			ctx.fillStyle = "#0095DD";
			ctx.textAlign = "center";
			ctx.fillText("GAME CLEAR", canvas.width/2, canvas.height/2);
			ctx.closePath();
			gameWin = true;
		}

		// アニメーション関数
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

			drawPaddle();
			drawBall();
			drawBlocks();
			collisionDetection();

			if (ballX + ballRadius > canvas.width || ballX - ballRadius < 0) {
				ballSpeedX = -ballSpeedX;
			}
			if (ballY - ballRadius < 0) {
				ballSpeedY = -ballSpeedY;
			}
			else if (ballY + ballRadius > canvas.height - paddleHeight) {
				if (ballX > paddleX && ballX < paddleX + paddleWidth) {
					ballSpeedY = -ballSpeedY;
				}
				else {
					gameover();
					return;
				}
			}

			if (gameWin) {
				return;
			}

			ballX += ballSpeedX;
			ballY += ballSpeedY;

			if (gameOver) {
				return;
			}

			if (rightPressed && paddleX < canvas.width - paddleWidth) {
				paddleX += 7;
			}
			else if (leftPressed && paddleX > 0) {
				paddleX -= 7;
			}

			requestAnimationFrame(draw);
		}

		// キーの処理
		var rightPressed = false;
		var leftPressed = false;

		document.addEventListener("keydown", keyDownHandler, false);
		document.addEventListener("keyup", keyUpHandler, false);

		function keyDownHandler(e) {
			if(e.key == "Right" || e.key == "ArrowRight") {
				rightPressed = true;
			}
			else if(e.key == "Left" || e.key == "ArrowLeft") {
				leftPressed = true;
			}
		}

		function keyUpHandler(e) {
			if(e.key == "Right" || e.key == "ArrowRight") {
				rightPressed = false;
			}
			else if(e.key == "Left" || e.key == "ArrowLeft") {
				leftPressed = false;
			}
		}

		draw();
	</script>
</body>
</html>

ジョークとして、ブロックを破壊すると「ブロックが泣いている」というメッセージを表示するようにしています。