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

No:104

1444

←

Prev Next

→

Pitfall Games
Developer ひさひさ｜Date and time 23/5/17 22:47:40
Build time 121.438 sec｜Game capacity 2.99KB｜

Script

落とし穴ゲーム

ゲームの概要：プレイヤーを操作して、落とし穴に落ちずにスコアを稼ぐゲームです。プレイヤーは左右キーを押して移動し、落とし穴は上から下に動いてきます。落ちたらゲームオーバーです。スマホで操作可能です。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>落とし穴ゲーム</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	body {
		background-color: #f2f2f2;
		font-family: Arial, sans-serif;
		text-align: center;
	}
	h1 {
		margin-top: 40px;
		font-size: 36px;
	}
	canvas {
		margin-top: 20px;
		border: 2px solid black;
	}
	button {
		margin-top: 30px;
		padding: 15px;
		background-color: #4CAF50;
		color: white;
		border: none;
		border-radius: 5px;
		font-size: 24px;
		cursor: pointer;
	}
	</style>
</head>
<body>
	<h1>落とし穴ゲーム</h1>
	<canvas id="gameCanvas" width="600" height="400"></canvas>
	<button id="startButton" onclick="startGame()">スタート！</button>

// ゲーム用変数
	var isGameStarted = false; // ゲーム開始フラグ
	var playerX = canvas.width/2; // プレイヤーの初期位置
	var trapY = -50; // 落とし穴の初期位置
	var score = 0; // スコア

// キーイベントのリスナー登録
	document.addEventListener("keydown", keyDownHandler, false);

// キーが押された時に呼び出される関数
	function keyDownHandler(e) {
		if (e.key == "Right" || e.key == "ArrowRight") {
			playerX += 10;
			if (playerX > canvas.width-50) {
				playerX = canvas.width-50;
			}
		}
		else if (e.key == "Left" || e.key == "ArrowLeft") {
			playerX -= 10;
			if (playerX < 0) {
				playerX = 0;
			}
		}
	}

// ゲームを開始する関数
	function startGame() {
		isGameStarted = true;
		startButton.style.display = "none";
		draw();
	}

// ゲームを描画する関数
	function draw() {
		// 背景
		ctx.fillStyle = "#f2f2f2";
		ctx.fillRect(0, 0, canvas.width, canvas.height);

// プレイヤー
		ctx.fillStyle = "yellow";
		ctx.fillRect(playerX, canvas.height-50, 50, 50);

// 落とし穴
		ctx.fillStyle = "black";
		ctx.fillRect(0, trapY, canvas.width, 50);
		trapY += 5;
		if (trapY > canvas.height) {
			score += 10;
			trapY = -50;
		}

// スコア
		ctx.font = "24px Arial";
		ctx.fillStyle = "red";
		ctx.fillText("Score: " + score, 10, 30);

// ゲームオーバー判定
		if (trapY > canvas.height-50 && playerX < 0) {
			ctx.font = "64px Arial";
			ctx.fillStyle = "red";
			ctx.fillText("Game Over", canvas.width/2-150, canvas.height/2);
			startButton.style.display = "block";
			isGameStarted = false;
			score = 0;
			playerX = canvas.width/2;
			trapY = -50;
		}

if (isGameStarted) {
			requestAnimationFrame(draw);
		}
	}
	</script>
</body>
</html>