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

No:2639

1029

←

Prev Next

→

Platform
Developer User3595｜Date and time 23/6/22 5:43:47
Build time 30.395 sec｜Game capacity 2.794KB｜

Script

a: HTML, CSS, JavaScript

Emoji Game

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

a: HTML, CSS, JavaScript

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Emoji Game</title>
	<style>
		body {
			background-color: #fff;
			color: #000;
			font-family: Arial, sans-serif;
		}
		
		h1 {
			text-align: center;
			margin-top: 50px;
			font-size: 40px;
		}
		
		.container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 50px;
		}
		
		.box {
			width: 80px;
			height: 80px;
			font-size: 60px;
			text-align: center;
			margin: 10px;
			border-radius: 50%;
			cursor: pointer;
		}
		
		.hidden {
			display: none;
		}
		
		.win {
			font-size: 80px;
		}
		
		.gameover {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 30px;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<h1>Emoji Game</h1>
	<div class="container"></div>
	<div class="win hidden">🎉</div>
	<div class="gameover hidden">
		<p>Game Over</p>
		<button onclick="restart()">Restart</button>
	</div>
	
	<script>
		const emojis = ['😀', '😂', '😍', '🤔', '😜', '😎', '😇', '😘', '🤢', '🤯'];
		let score = 0;
		let lives = 3;
		
		function createEmoji() {
			const container = document.querySelector('.container');
			container.innerHTML = '';
			const random = Math.floor(Math.random() * emojis.length);
			const emoji = emojis[random];
			const positions = [];
			
			for (let i = 0; i < 9; i++) {
				const position = Math.floor(Math.random() * 9);
				if (!positions.includes(position)) {
					positions.push(position);
					const box = document.createElement('div');
					box.classList.add('box');
					box.textContent = position === 4 ? emoji : emojis[Math.floor(Math.random() * emojis.length)];
					box.addEventListener('click', () => {
						if (position === 4) {
							score += 10;
							if (score < 100) {
								createEmoji();
							} else {
								document.querySelector('.win').classList.remove('hidden');
							}
						} else {
							lives--;
							if (lives === 0) {
								document.querySelector('.gameover').classList.remove('hidden');
							}
						}
						updateScore();
						updateLives();
					});
					container.append(box);
				} else {
					i--;
				}
			}
		}
		
		function updateScore() {
			document.querySelector('.score').textContent = `Score: ${score}`;
		}
		
		function updateLives() {
			document.querySelector('.lives').textContent = `Lives: ${'❤️'.repeat(lives)}`;
		}
		
		function restart() {
			score = 0;
			lives = 3;
			updateScore();
			updateLives();
			document.querySelector('.win').classList.add('hidden');
			document.querySelector('.gameover').classList.add('hidden');
			createEmoji();
		}
		
		createEmoji();
		updateScore();
		updateLives();
	</script>
</body>
</html>