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

No:2246

2433

←

Prev Next

→

anonymous scholarship system for orphans whose par..ALL
Developer User3521｜Date and time 23/6/20 18:10:47
Build time 51.218 sec｜Game capacity 4.031KB｜

Script

ご要望通り、HTMLファイルにJavaScriptを含めたシンプルなゲームを実装しました。スマートフォンで簡単に操作でき、絵文字を多めに使用しています。ゲームの概要：画面上に表示される4つの絵文字のうち、1つをタップして正解を選ぶシンプルなクイズゲームです。制限時間内に正解を選べばクリアとなります。以下が実装したHTMLファイルのコードです。

Emoji Quiz

Score: 0

このゲームは、4つの絵文字のうち1つを正解とするクイズ形式です。制限時間内に正解を選ぶことでスコアを獲得することができます。スマートフォンで操作しやすいように、絵文字の大きさを大きめに設定しました。また、スマートフォンに標準的に備わっているArial等のフォントを使用しています。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

ご要望通り、HTMLファイルにJavaScriptを含めたシンプルなゲームを実装しました。スマートフォンで簡単に操作でき、絵文字を多めに使用しています。

ゲームの概要：
画面上に表示される4つの絵文字のうち、1つをタップして正解を選ぶシンプルなクイズゲームです。制限時間内に正解を選べばクリアとなります。

以下が実装したHTMLファイルのコードです。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Emoji Quiz</title>
	<style>
		body {
			background-color: #f2f2f2;
			font-family: Arial, sans-serif;
			text-align: center;
		}

#quiz-container {
			max-width: 500px;
			margin: 0 auto;
			padding: 20px;
			background-color: #fff;
			border-radius: 10px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		}

h1 {
			font-size: 36px;
			margin-top: 0;
		}

#score {
			font-size: 24px;
			margin-bottom: 10px;
		}

#time {
			font-size: 20px;
			margin-bottom: 20px;
		}

#emoji-container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-bottom: 20px;
		}

.emoji {
			font-size: 80px;
			margin: 10px;
			cursor: pointer;
			transition: transform 0.2s;
		}

.emoji:hover {
			transform: scale(1.1);
		}

.correct {
			color: green;
		}

.incorrect {
			color: red;
		}
	</style>
</head>
<body>
	<div id="quiz-container">
		<h1>Emoji Quiz</h1>
		<div id="score">Score: 0</div>
		<div id="time"></div>
		<div id="emoji-container"></div>
	</div>

const updateScore = () => {
			const scoreElement = document.getElementById('score');
			scoreElement.innerHTML = `Score: ${score}`;
		};

const updateTime = () => {
			const timeElement = document.getElementById('time');
			timeElement.innerHTML = `Time: ${timeLeft}`;
			timeLeft--;

if (timeLeft < 0) {
				clearInterval(timer);
				removeEventListeners();
				showGameOver();
			}
		};

const showEmojis = () => {
			const emojiContainer = document.getElementById('emoji-container');
			emojiContainer.innerHTML = '';

const emojiElements = document.getElementsByClassName('emoji');
			for (let i = 0; i < emojiElements.length; i++) {
				emojiElements[i].addEventListener('click', onEmojiClick);
			}
		};

const removeEventListeners = () => {
			const emojiElements = document.getElementsByClassName('emoji');
			for (let i = 0; i < emojiElements.length; i++) {
				emojiElements[i].removeEventListener('click', onEmojiClick);
			}
		};

const onEmojiClick = (event) => {
			const target = event.target;
			if (target.classList.contains('correct')) {
				score++;
				updateScore();
			}

removeEventListeners();
			showEmojis();
		};

const showGameOver = () => {
			const quizContainer = document.getElementById('quiz-container');
			quizContainer.innerHTML += `<div>Game Over! Your score is ${score}</div>`;
		};

showEmojis();
		updateScore();
		const timer = setInterval(updateTime, 1000);
	</script>
</body>
</html>
```