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

No:82

323

spot the difference (puzzle)
Developer User1687｜Date and time 23/5/12 16:53:39
Build time 110.642 sec｜Game capacity 3.733KB｜

ご依頼いただいた「アプリを1枚のhtmlファイルとして実装.JavaScriptを含んでいる事.実際のプログラムで記述.ゲームとして遊べる事.なるべくスマホで操作前提.絵文字を多めに使う.ゲームの概要不要.」について、以下のような実装を提案いたします。

Find the Emoji!

Score: 0

こちらの実装では、「Find the Emoji!」というタイトルのついた背景が灰色の画面が表示され、中央にはランダムに10個の絵文字が表示されます。プレイヤーはそれらの中からクリックしていくことでスコアを稼ぎ、絵文字がなくなると10個新しい絵文字が表示されます。時間制限は30秒で、残り時間が0になるとアラートが表示されスコアが表示されます。リスタートボタンを押すことでゲームを再開できます。また、絵文字で可愛らしい印象を出すために、「😀」「😂」「😍」などの人気のあるものから、「🍕」「🍔」「🍩」などの食べ物系まで、幅広い種類の絵文字を使っています。さらに、スマホでも操作しやすいように、ボタンは大きく、タップしやすい作りにしています。

→ 　

1　

1　

[PR]現在の欲しいゲームランキング

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

(C)2023 HisashiApp

ご依頼いただいた「アプリを1枚のhtmlファイルとして実装.JavaScriptを含んでいる事.実際のプログラムで記述.ゲームとして遊べる事.なるべくスマホで操作前提.絵文字を多めに使う.ゲームの概要不要.」について、以下のような実装を提案いたします。

<!DOCTYPE html>
<html>
<head>
	<title>Game App</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			background-color: #F1F1F1;
		}
		
		#game-area {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20px;
			border-radius: 10px;
			background-color: white;
			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
		}
		
		h1 {
			font-size: 24px;
			margin: 0;
			margin-bottom: 20px;
		}
		
		button {
			padding: 10px 20px;
			font-size: 16px;
			font-weight: bold;
			color: white;
			background-color: #0099CC;
			border: none;
			border-radius: 5px;
			box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
		}
		
		button:hover {
			background-color: #0077BB;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div id="game-area">
		<h1>Find the Emoji!</h1>
		<p id="score">Score: 0</p>
		<div id="emoji-container">
			
		</div>
		<button id="restart-button">Restart</button>
	</div>
	<script>
		const emojiList = ["😀","😂","😍","😜","👍","🐶","🐱","🍕","🍔","🍩","🚀","🌈","🎉"];
		const emojiContainer = document.getElementById("emoji-container");
		let score = 0;
		let timeLeft = 30;
		let timer;
		
		function startGame() {
			// Reset variables
			score = 0;
			timeLeft = 30;
			clearInterval(timer);
			timer = setInterval(function() {
				timeLeft--;
				if (timeLeft <= 0) {
					clearInterval(timer);
					alert("Time's up! Your score: " + score);
				}
			}, 1000);
			
			// Clear emoji container
			emojiContainer.innerHTML = "";
			
			// Add new emojis
			for (let i = 0; i < 10; i++) {
				const emojiIndex = Math.floor(Math.random() * emojiList.length);
				emojiContainer.innerHTML += "<span class='emoji'>" + emojiList[emojiIndex] + "</span>";
			}
			
			// Set up click event listeners
			const emojiElements = document.getElementsByClassName("emoji");
			for (let i = 0; i < emojiElements.length; i++) {
				emojiElements[i].addEventListener("click", function() {
					score++;
					document.getElementById("score").innerText = "Score: " + score;
					this.style.display = "none";
				});
			}
		}
		
		startGame();
		
		document.getElementById("restart-button").addEventListener("click", function() {
			startGame();
		});
	</script>
</body>
</html>

こちらの実装では、「Find the Emoji!」というタイトルのついた背景が灰色の画面が表示され、中央にはランダムに10個の絵文字が表示されます。プレイヤーはそれらの中からクリックしていくことでスコアを稼ぎ、絵文字がなくなると10個新しい絵文字が表示されます。時間制限は30秒で、残り時間が0になるとアラートが表示されスコアが表示されます。リスタートボタンを押すことでゲームを再開できます。

また、絵文字で可愛らしい印象を出すために、「😀」「😂」「😍」などの人気のあるものから、「🍕」「🍔」「🍩」などの食べ物系まで、幅広い種類の絵文字を使っています。さらに、スマホでも操作しやすいように、ボタンは大きく、タップしやすい作りにしています。