500-man battalion (Zhou-dynasty Chinese army)'s game

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

No:1965

504

←

Prev Next

→

500-man battalion (Zhou-dynasty Chinese army)
Developer User1006｜Date and time 23/6/19 15:26:24
Build time 22.98 sec｜Game capacity 1.788KB｜

Script

うかいしました。以下、サンプルプログラムです。このアプリは「Emoji Catcher」というゲームで、ユーザーが画面上に表示される絵文字をクリックして得点を稼ぐというものです。

Score: 0

ゲームは、画面上に表示されるランダムな絵文字をクリックすることで得点を稼ぎます。絵文字は自動的に生成され、3秒で消えます。得点は画面上部に表示されます。スマホでも操作可能です。

←

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>Emoji Catcher</title>
	<style>
		body {
			background-color: #f5f5f5;
			font-size: 24px;
			text-align: center;
		}
		#score {
			color: #ff0000;
			font-size: 36px;
			margin: 20px;
		}
		.emoji {
			cursor: pointer;
			font-size: 48px;
			margin: 20px;
		}
	</style>
</head>
<body>
	<div id="score">Score: 0</div>
	<div id="emojis"></div>
	
	<script>
		const emojis = ["🐶", "🐱", "🐻", "🐘", "🐴", "🐺", "🦁", "🐵", "🦄", "🐊"];
		let score = 0;
		
		function generateEmoji() {
			const index = Math.floor(Math.random() * emojis.length);
			const emoji = emojis[index];
			const x = Math.random() * (window.innerWidth - 100) + 50;
			const y = Math.random() * (window.innerHeight - 200) + 100;
			const div = document.createElement("div");
			div.innerHTML = emoji;
			div.className = "emoji";
			div.style.top = y + "px";
			div.style.left = x + "px";
			div.addEventListener("click", () => {
				score++;
				document.getElementById("score").innerHTML = "Score: " + score;
				div.remove();
			});
			document.getElementById("emojis").appendChild(div);
			setTimeout(() => {
				div.remove();
			}, 3000);
		}
		
		setInterval(() => {
			generateEmoji();
		}, 1000);
	</script>
</body>
</html>