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

No:3905

679

Undersea exploration game! Search for treasure fro..ALL
Developer User3589｜Date and time 23/6/26 22:45:51
Build time 53.542 sec｜Game capacity 5.187KB｜

プログラムの実装に入る前に、ゲームのルールを決めましょう。ルール： - プレイヤーは1匹のダイバーとして海底探索を行う。 - ゲームが開始されると、ランダムに埋まっている宝物が設置される。 - ダイバーはスマホのタッチボタンを使って、上下左右に移動することができる。 - ダイバーが宝物を探し当てると、宝物を回収できる。 - タイムリミットは3分間。それでは、実装していきましょう。

海底探索ゲーム

青い海から宝を探そう！

タイムリミット：3分間

以上が海底探索ゲームのプログラムです。タッチ操作には対応しておらず、キーボード操作になりますが、スマホでもプレイできると思います。CSSでゲームボードをスタイリングし、JavaScriptでゲームのロジックを実装しました。宝物を見つけるとゲームがクリアとなり、タイムリミットが切れるとゲームオーバーとなります。絵文字を使って、ダイバーと宝物を表示させました。

→ 　

1　

1　

　
　
　
　

[PR]現在のゲームギフトランキング

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

(C)2023 HisashiApp

プログラムの実装に入る前に、ゲームのルールを決めましょう。

ルール：

- プレイヤーは1匹のダイバーとして海底探索を行う。
- ゲームが開始されると、ランダムに埋まっている宝物が設置される。
- ダイバーはスマホのタッチボタンを使って、上下左右に移動することができる。
- ダイバーが宝物を探し当てると、宝物を回収できる。
- タイムリミットは3分間。

それでは、実装していきましょう。

```
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>海底探索ゲーム</title>
</head>
<body>
	<h1>海底探索ゲーム</h1>
	<h3>青い海から宝を探そう！</h3>
	<p>タイムリミット：3分間</p>
	<div id="gameBoard">
		
	</div>
	<script>
		// ダイバーの初期位置
		let diverPosition = {x: 0, y: 0};

// 宝物の位置をランダムに決定
		let treasurePosition = {
			x: Math.floor(Math.random() * 10),
			y: Math.floor(Math.random() * 10)
		};

// ゲームボードの作成
		let gameBoard = document.getElementById("gameBoard");
		for(let i = 0; i < 10; i++){
			let row = document.createElement("div");
			row.classList.add("row");
			for(let j = 0; j < 10; j++){
				let cell = document.createElement("div");
				cell.classList.add("cell");
				row.appendChild(cell);
			}
			gameBoard.appendChild(row);
		}

// ダイバーの表示
		let diverCell = gameBoard.querySelectorAll(".row")[diverPosition.y].querySelectorAll(".cell")[diverPosition.x];
		diverCell.innerHTML = "🤿"; // 絵文字を使ってダイバーを表示

// 宝物の表示
		let treasureCell = gameBoard.querySelectorAll(".row")[treasurePosition.y].querySelectorAll(".cell")[treasurePosition.x];
		treasureCell.innerHTML = "💎"; // 絵文字を使って宝物を表示

// ゲームの開始
		let timeLeft = 180; // タイムリミットの設定
		let timeLeftDisplay = document.createElement("div");
		timeLeftDisplay.innerHTML = "残り時間：" + Math.floor(timeLeft / 60) + "分" + (timeLeft % 60) + "秒";
		gameBoard.appendChild(timeLeftDisplay);

let timer = setInterval(function(){
			timeLeft--;
			timeLeftDisplay.innerHTML = "残り時間：" + Math.floor(timeLeft / 60) + "分" + (timeLeft % 60) + "秒";
			if(timeLeft <= 0){
				clearInterval(timer);
				gameOver("時間切れでゲームオーバー...");
			}
		}, 1000);

// キーボードのイベントリスナーを登録
		document.addEventListener("keydown", function(event){
			switch(event.key){
				case "ArrowUp":
					// 上に移動する
					if(diverPosition.y > 0){
						diverPosition.y--;
						diverCell.innerHTML = ""; // ダイバーを一度削除してから、新しい場所に表示
						diverCell = gameBoard.querySelectorAll(".row")[diverPosition.y].querySelectorAll(".cell")[diverPosition.x];
						diverCell.innerHTML = "🤿";
					}
					break;
				case "ArrowDown":
					// 下に移動する
					if(diverPosition.y < 9){
						diverPosition.y++;
						diverCell.innerHTML = "";
						diverCell = gameBoard.querySelectorAll(".row")[diverPosition.y].querySelectorAll(".cell")[diverPosition.x];
						diverCell.innerHTML = "🤿";
					}
					break;
				case "ArrowLeft":
					// 左に移動する
					if(diverPosition.x > 0){
						diverPosition.x--;
						diverCell.innerHTML = "";
						diverCell = gameBoard.querySelectorAll(".row")[diverPosition.y].querySelectorAll(".cell")[diverPosition.x];
						diverCell.innerHTML = "🤿";
					}
					break;
				case "ArrowRight":
					// 右に移動する
					if(diverPosition.x < 9){
						diverPosition.x++;
						diverCell.innerHTML = "";
						diverCell = gameBoard.querySelectorAll(".row")[diverPosition.y].querySelectorAll(".cell")[diverPosition.x];
						diverCell.innerHTML = "🤿";
					}
					break;
			}

// 宝物との衝突判定
			if(diverPosition.x === treasurePosition.x && diverPosition.y === treasurePosition.y){
				clearInterval(timer);
				gameOver("おめでとうございます！宝を発見しました！");
			}
		});

// ゲームオーバー時の処理
		function gameOver(message){
			alert(message);
			location.reload();
		}
	</script>
	<style>
		/* ゲームボードのスタイル */
		#gameBoard {
			display: flex;
			flex-wrap: wrap;
			width: 300px;
			height: 300px;
			border: 1px solid black;
		}

.row {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			height: 30px;
			box-sizing: border-box;
		}

.cell {
			flex: 1;
			height: 100%;
			background-color: #1E90FF;
			text-align: center;
			font-size: 25px;
		}
	</style>
</body>
</html>
```

以上が海底探索ゲームのプログラムです。タッチ操作には対応しておらず、キーボード操作になりますが、スマホでもプレイできると思います。CSSでゲームボードをスタイリングし、JavaScriptでゲームのロジックを実装しました。宝物を見つけるとゲームがクリアとなり、タイムリミットが切れるとゲームオーバーとなります。絵文字を使って、ダイバーと宝物を表示させました。