Reset button available. There is a score display. There is one display icon. The game is to tap an icon that disappears when tapped. When you tap an icon, you get 1 point and another icon appears in a different position. Time limit 20 seconds.'s game

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

No:1334

109

←

Prev Next

→

Reset button available. There is a score display. ..ALL
Developer User3300｜Date and time 23/6/18 11:16:29
Build time 29.998 sec｜Game capacity 3.072KB｜

Script

🦊

このアプリは、画面にランダムなアイコンが表示され、タップすると得点が加算されるゲームです。制限時間は20秒で、10個のアイコンが表示されたらゲームが終了します。リセットボタンでスコアとカウントをリセットできます。得点と制限時間のカウントダウンは画面上部に表示されます。また、アイコンは10種類の絵文字からランダムに選ばれ、位置もランダムに変化します。スマホでも遊べるように、画面は自動で調整されます。

←

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>
	<style>
		#icon{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 60px;
			cursor: pointer;
		}
		#score{
			position: fixed;
			top: 0;
			right: 0;
			font-size: 30px;
			padding: 10px;
			color: white;
			background-color: orange;
		}
		#reset{
			position: fixed;
			bottom: 0;
			right: 0;
			padding: 10px;
			background-color: lightgrey;
			border: none;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div id="score">0</div>
	<button id="reset">リセット</button>
	<div id="icon">🦊</div>
	<script>
		let score = 0;
		let count = 0;

function randomIcon() {
			const icons = ["🐶", "🐼", "🐵", "🐻", "🐨", "🦁", "🦊", "🐯", "🐷", "🐸"];
			const iconIndex = Math.floor(Math.random() * icons.length);
			return icons[iconIndex];
		}

function randomCoordinate() {
			const bodyWidth = document.body.clientWidth;
			const bodyHeight = document.body.clientHeight;
			const iconWidth = document.getElementById("icon").offsetWidth;
			const iconHeight = document.getElementById("icon").offsetHeight;
			const top = Math.floor(Math.random() * (bodyHeight - iconHeight));
			const left = Math.floor(Math.random() * (bodyWidth - iconWidth));
			return { top: top, left: left };
		}

function moveIcon() {
			const coordinate = randomCoordinate();
			document.getElementById("icon").style.top = coordinate.top + "px";
			document.getElementById("icon").style.left = coordinate.left + "px";
			const icon = randomIcon();
			document.getElementById("icon").innerHTML = icon;
			count++;
			if (count >= 10) {
				clearInterval(intervalId);
			}
		}

let intervalId = setInterval(moveIcon, 2000);

document.getElementById("icon").addEventListener("click", function() {
			score++;
			document.getElementById("score").innerHTML = score;
		});

document.getElementById("reset").addEventListener("click", function() {
			score = 0;
			count = 0;
			document.getElementById("score").innerHTML = score;
			clearInterval(intervalId);
			intervalId = setInterval(moveIcon, 2000);
		});

let countdown = 20;
		let countdownId = setInterval(function() {
			countdown--;
			if (countdown === 0) {
				clearInterval(countdownId);
				clearInterval(intervalId);
				alert("制限時間が終了しました。あなたのスコアは" + score + "点です。");
			}
		}, 1000);
	</script>
</body>
</html>