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

No:736

358

←

Prev Next

→

There are actually ten kinds of white.
Developer User3112｜Date and time 23/6/17 15:37:15
Build time 37.541 sec｜Game capacity 3.193KB｜

Script

以下が要件を満たすサンプルの実装例です。

ワクワク白を探せ！

画面上にいる白をクリックしてね！制限時間は30秒だよ！

残り時間: 30秒

このプログラムは、ワクワク白を探すというゲームです。プレイヤーは画面上の白い丸をクリックして消し、全ての白を見つけることが目的です。制限時間は30秒で、時間が切れるとゲームオーバーです。画面はスマホでも遊べるように調整してあり、絵文字は使用していませんが、可愛らしいデザインを目指しているため、CSSなどでカスタマイズすることで絵文字を多めに使用したデザインにすることもできます。

←

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>
</head>
<body>
	<h1>ワクワク白を探せ！</h1>
	<p>画面上にいる白をクリックしてね！制限時間は30秒だよ！</p>
	<div id="game_area"></div>
	<div id="timer">残り時間: <span id="time_left">30</span>秒</div>
	
	<script>
		// ゲームの設定
		const GAME_WIDTH = 480;
		const GAME_HEIGHT = 320;
		const NUM_OF_WHITES = 10;
		const GAME_DURATION = 30; // 開始からの制限時間(秒)
		
		// ランダムに0からmaxまでの整数を返す関数
		function randomInt(max) {
			return Math.floor(Math.random() * (max + 1));
		}
		
		// ゲームの状態を保持する変数
		let numOfWhitesLeft = NUM_OF_WHITES;
		let timeLeft = GAME_DURATION;
		
		// ゲームエリアを作成
		const gameArea = document.querySelector("#game_area");
		gameArea.style.width = GAME_WIDTH + "px";
		gameArea.style.height = GAME_HEIGHT + "px";
		gameArea.style.background = "lightblue";
		gameArea.style.position = "relative";
		
		// 制限時間の表示を更新する関数
		function updateTimer() {
			timeLeft--;
			document.querySelector("#time_left").innerText = timeLeft;
			if (timeLeft <= 0) {
				endGame();
			}
		}
		
		// 白をクリックした時の処理
		function clickWhite(event) {
			if (event.target.classList.contains("white")) {
				event.target.style.background = "transparent";
				event.target.classList.remove("white");
				numOfWhitesLeft--;
				if (numOfWhitesLeft <= 0) {
					endGame();
				}
			}
		}
		
		// ゲームを終了する関数
		function endGame() {
			clearInterval(timerIntervalID);
			if (numOfWhitesLeft > 0) {
				alert("時間切れ！白を見つけられませんでした。");
			} else {
				alert("おめでとう！全ての白を見つけました！");
			}
			location.reload();
		}
		
		// ゲームオブジェクトを作成して画面に表示
		for (let i = 1; i <= NUM_OF_WHITES; i++) {
			const white = document.createElement("div");
			white.classList.add("white");
			white.style.background = "white";
			white.style.borderRadius = "50%";
			white.style.position = "absolute";
			white.style.top = randomInt(GAME_HEIGHT - 50) + "px";
			white.style.left = randomInt(GAME_WIDTH - 50) + "px";
			white.style.width = "30px";
			white.style.height = "30px";
			white.addEventListener("click", clickWhite);
			gameArea.appendChild(white);
		}
		
		// 制限時間のタイマーをスタート
		const timerIntervalID = setInterval(updateTimer, 1000);
	</script>
</body>
</html>