JS CSS HTMLだけでブロックくずしゲームを作ってみた #JavaScript

JavaScriptコードは、ブロックくずしゲームを実装しています。ボールとパドルを描画し、ブロックを生成し、ゲームオーバーになるまでループを実行します。JavaScriptコードは、ボールがキャンバス内で移動し、壁やパドル、ブロックに当たるかどうかをチェックし、それに応じて反応します。また、キーボードの入力に対応して、パドルを左右に移動します。

注意：このコードは、単純なブロックくずしゲームの例です。

<!DOCTYPE html>
<html>
<head>
	<title>Block Breaker</title>
	<style>
		#gameCanvas {
			border: 1px solid black;
			background-color: #87CEEB;
		}
	</style>
</head>
<body onload="startGame()">
	<canvas id="gameCanvas" width="640" height="480"></canvas>
	<script>
		var canvas;
		var context;

		var ball = {
			x: 320,
			y: 240,
			radius: 10,
			speedX: 5,
			speedY: 5
		};

		var paddle = {
			x: 250,
			y: 460,
			width: 100,
			height: 10,
			speed: 10
		};

		var blocks = [];
		var blockWidth = 50;
		var blockHeight = 20;

		var score = 0;

		function startGame() {
			canvas = document.getElementById("gameCanvas");
			context = canvas.getContext("2d");

			document.addEventListener("keydown", handleKeyDown);
			document.addEventListener("keyup", handleKeyUp);

			resetGame();
			setInterval(updateGame, 20);
		}

		function resetGame() {
			// Reset ball
			ball.x = canvas.width / 2;
			ball.y = canvas.height / 2;
			ball.speedX = 5;
			ball.speedY = -5;

			// Reset paddle
			paddle.x = canvas.width / 2 - paddle.width / 2;
			paddle.y = 460;

			// Reset blocks
			blocks = [];
			for (var row = 0; row < 3; row++) {
				for (var col = 0; col < 10; col++) {
					blocks.push({
						x: col * blockWidth + 10,
						y: row * blockHeight + 50,
						width: blockWidth,
						height: blockHeight,
						color: getRandomColor(),
						visible: true
					});
				}
			}

			score = 0;
		}

		function updateGame() {
			context.clearRect(0, 0, canvas.width, canvas.height);

			drawBall();
			drawPaddle();
			drawBlocks();
			drawScore();

			moveBall();
			movePaddle();
			checkCollisions();
		}

		function drawBall() {
			context.beginPath();
			context.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI);
			context.fillStyle = "red";
			context.fill();
			context.closePath();
		}

		function drawPaddle() {
			context.fillStyle = "blue";
			context.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
		}

		function drawBlocks() {
			for (var i = 0; i < blocks.length; i++) {
				if (blocks[i].visible) {
context.fillStyle = blocks[i].color;
context.fillRect(blocks[i].x, blocks[i].y, blocks[i].width, blocks[i].height);
}
}
}
	function drawScore() {
		context.fillStyle = "black";
		context.font = "20px Arial";
		context.fillText("Score: " + score, 10, 25);
	}

	function moveBall() {
		ball.x += ball.speedX;
		ball.y += ball.speedY;

		// Check if ball hits left or right wall
		if (ball.x - ball.radius < 0 || ball.x + ball.radius > canvas.width) {
			ball.speedX = -ball.speedX;
		}

		// Check if ball hits top wall
		if (ball.y - ball.radius < 0) {
			ball.speedY = -ball.speedY;
		}

		// Check if ball hits bottom wall
		if (ball.y + ball.radius > canvas.height) {
			resetGame();
		}
	}

	function movePaddle() {
		if (leftKeyDown) {
			paddle.x -= paddle.speed;
			if (paddle.x < 0) {
				paddle.x = 0;
			}
		}

		if (rightKeyDown) {
			paddle.x += paddle.speed;
			if (paddle.x + paddle.width > canvas.width) {
				paddle.x = canvas.width - paddle.width;
			}
		}
	}

	function checkCollisions() {
		// Check if ball hits paddle
		if (collision(ball, paddle)) {
			ball.speedY = -ball.speedY;
		}

		// Check if ball hits blocks
		for (var i = 0; i < blocks.length; i++) {
			if (collision(ball, blocks[i]) && blocks[i].visible) {
				ball.speedY = -ball.speedY;
				blocks[i].visible = false;
				score++;
			}
		}
	}

	function collision(object1, object2) {
		if (object1.x < object2.x + object2.width && object1.x + object1.radius * 2 > object2.x &&
			object1.y < object2.y + object2.height && object1.y + object1.radius * 2 > object2.y) {
			return true;
		} else {
			return false;
		}
	}

	function getRandomColor() {
		var letters = "0123456789ABCDEF";
		var color = "#";
		for (var i = 0; i < 6; i++) {
			color += letters[Math.floor(Math.random() * 16)];
		}
		return color;
	}

	var leftKeyDown = false;
	var rightKeyDown = false;

	function handleKeyDown(event) {
		if (event.keyCode == 37) { // Left arrow
			leftKeyDown = true;
		} else if (event.keyCode == 39) { // Right arrow
			rightKeyDown = true;
		}
	}

	function handleKeyUp(event) {
		if (event.keyCode == 37) { // Left arrow
			leftKeyDown = false;
		} else if (event.keyCode == 39) { // Right arrow
			rightKeyDown = false;
		}
	}
</script>

このJavaScriptコードは、単一のHTMLファイルに埋め込まれ、ブロックくずしゲームを作成しています。

コードの詳細は以下の通りです。

var canvasとvar contextは、キャンバスのオブジェクトとそのコンテキストを保存するための変数です。
var ballは、ボールの位置、サイズ、速度などのプロパティを保存するためのオブジェクトです。
var paddleは、パドルの位置、サイズ、速度などのプロパティを保存するためのオブジェクトです。
var blocksは、ブロックの位置、サイズ、色、可視性などのプロパティを保存するための配列です。
var blockWidthとvar blockHeightは、ブロックの幅と高さを定義するための変数です。
var scoreは、プレーヤーのスコアを保存するための変数です。
function startGame()は、ゲームの初期化を行う関数です。キャンバス、イベントリスナー、ボール、パドル、ブロック、スコアを初期化し、ゲームのループを開始します。
function resetGame()は、ゲームをリセットする関数です。ボール、パドル、ブロック、スコアを初期化します。
function updateGame()は、ゲームのループで毎フレーム呼び出される関数です。キャンバスをクリアし、ボール、パドル、ブロック、スコアを描画し、ボールとパドル、ボールとブロックの当たり判定をチェックします。
function drawBall()は、ボールを描画する関数です。色は固定で、赤色になっています。
function drawPaddle()は、パドルを描画する関数です。色は固定で、青色になっています。
function drawBlocks()は、ブロックを描画する関数です。配列blocksに保存されているすべてのブロックを描画し、ブロックの色はランダムに決定されます。ブロックが非表示になっている場合は描画されません。
function drawScore()は、スコアを描画する関数です。黒色のフォントで、20pxのArialフォントで描画されます。
function moveBall()は、ボールを移動する関数です。ボールがキャンバスの端に当たった場合は、速度を反転させます。ボールがキャンバスの下端に到達した場合は、ゲームをリセットします。
function movePaddle()は、パドルを移動する関数です。左右の矢印キーの状態をチェックし、パドルを移動します。

function checkCollisions()は、ボールとパドル、ボールとブロックの当たり判定をチェックする関数です。ボールがパドルに当たった場合は、ボールの速度を反転させます。ボールがブロックに当たった場合は、ボールの速度を反転させ、ブロックを非表示にし、スコアを増やします。
function collision(object1, object2)は、2つのオブジェクトの当たり判定をチェックする関数です。
function getRandomColor()は、ランダムな色を生成する関数です。
var leftKeyDownとvar rightKeyDownは、キーボードの左右の矢印キーの状態を追跡するための変数です。
function handleKeyDown(event)は、キーボードのキーが押されたときに呼び出される関数です。左右の矢印キーの場合、対応する変数をtrueに設定します。
function handleKeyUp(event)は、キーボードのキーが離されたときに呼び出される関数です。左右の矢印キーの場合、対応する変数をfalseに設定します。

var canvasとvar contextは、キャンバスのオブジェクトとそのコンテキストを保存するための変数です。
var ballは、ボールの位置、サイズ、速度などのプロパティを保存するためのオブジェクトです。
var paddleは、パドルの位置、サイズ、速度などのプロパティを保存するためのオブジェクトです。
var blocksは、ブロックの位置、サイズ、色、可視性などのプロパティを保存するための配列です。
var scoreは、プレーヤーのスコアを保存するための変数です。
function startGame()は、ゲームの初期化を行う関数です。キャンバス、イベントリスナー、ボール、パドル、ブロック、スコアを初期化し、ゲームのループを開始します。
function resetGame()は、ゲームをリセットする関数です。ボール、パドル、ブロック、スコアを初期化します。
function updateGame()は、ゲームのループで毎フレーム呼び出される関数です。キャンバスをクリアし、ボール、パドル、ブロック、スコアを描画し、ボールとパドル、ボールとブロックの当たり判定をチェックします。
function drawBall()は、ボールを描画する関数です。
function drawPaddle()は、パドルを描画する関数です。
function drawBlocks()は、ブロックを描画する関数です。visibleプロパティがtrueの場合にのみブロックが描画されます。
function drawScore()は、スコアを描画する関数です。
function moveBall()は、ボールを移動する関数です。ボールがキャンバスの端に当たった場合は、速度を反転させます。ボールがキャンバスの下端に到達した場合は、ゲームをリセットします。
function movePaddle()は、パドルを移動する関数です。キーボード入力を監視して、パドルを左右に移動します。
function checkCollisions()は、ボールとパドル、ボールとブロックの当たり判定をチェックする関数です。ボールがパドルまたはブロックに当たった場合は、速度を反転させます。ブロックが当たった場合は、ブロックを非表示にし、スコアを増やします。

function collision(object1, object2)は、2つのオブジェクトの当たり判定をチェックする関数です。
function getRandomColor()は、ランダムな色を生成する関数です。
var leftKeyDownとvar rightKeyDownは、キーボードの左右の矢印キーの状態を追跡するための変数です。
function handleKeyDown(event)は、キーボードのキーが押されたときに呼び出される関数です。左右の矢印キーの場合、対応する変数をtrueに設定します。
function handleKeyUp(event)は、キーボードのキーが離されたときに呼び出される関数です。左右の矢印キーの場合、対応する変数をfalseに設定します。
以上が、このJavaScriptコードの概要です。このコードをHTMLファイルに埋め込み、ブラウザで開くことで、単純なブロックくずしゲームをプレイすることができます。