悪に堕ちる

この実装例では、Canvas要素を使って画面上にゲーム画面を描画しています。プレイヤーはマウスの移動で操作し、天使を倒すことでスコアが増えます。天使とプレイヤーが接触するとゲームオーバーになります。絵文字は使用していませんが、文字列を使ってスコアを表示するようにしています。スマホでも動作するように、Canvas要素のサイズは320×480にしています。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

以下に、スマホで操作可能な「悪に堕ちる」というゲームの実装例を示します。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>悪に堕ちる</title>
	<style>
		body {
			background-color: black;
			color: white;
			font-family: sans-serif;
			text-align: center;
		}
		#canvas {
			margin: 0 auto;
			background-color: white;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>悪に堕ちる</h1>
	<canvas id="canvas" width="320" height="480"></canvas>

// Canvas 要素の取得
		const canvas = document.getElementById("canvas");
		const ctx = canvas.getContext("2d");

// プレイヤーの初期位置とサイズ
		let playerX = canvas.width / 2;
		let playerY = canvas.height - 50;
		let playerSize = 30;

// 天使の初期位置とサイズ
		let angelX = Math.random() * (canvas.width - playerSize);
		let angelY = 0;
		let angelSize = 20;

// ゲームのスコア
		let score = 0;

// プレイヤーが天使に接触したかどうかを判定する関数
		function checkCollision() {
			let dx = playerX - angelX;
			let dy = playerY - angelY;
			let distance = Math.sqrt(dx*dx + dy*dy);

if (distance < playerSize + angelSize) {
				return true;
			} else {
				return false;
			}
		}

// ゲームループ
		function gameLoop() {
			// Canvas をクリア
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// 天使を描画
			ctx.beginPath();
			ctx.arc(angelX, angelY, angelSize, 0, Math.PI*2);
			ctx.fillStyle = "white";
			ctx.fill();
			ctx.closePath();

// プレイヤーを描画
			ctx.beginPath();
			ctx.arc(playerX, playerY, playerSize, 0, Math.PI*2);
			ctx.fillStyle = "red";
			ctx.fill();
			ctx.closePath();

// スコアを表示
			ctx.fillText(`Score: ${score}`, canvas.width - 80, 30);

// 天使を落下させる
			angelY += 3;

// 天使が画面下に到達したら新しい天使を生成し、スコアを増やす
			if (angelY > canvas.height) {
				angelX = Math.random() * (canvas.width - playerSize);
				angelY = 0;
				score++;
			}

// プレイヤーの移動
			canvas.addEventListener("mousemove", e => {
				playerX = e.clientX - (canvas.offsetLeft + playerSize/2);
			});

// 天使とプレイヤーが接触した場合の処理
			if (checkCollision()) {
				alert(`ゲームオーバー！ スコア：${score}`);
				location.reload();
			}

// ゲームループを再帰的に呼び出す
			requestAnimationFrame(gameLoop);
		}

// ゲーム開始
		gameLoop();
	</script>
</body>
</html>