Reset button available. One display icon. A game in which you tap an icon that disappears when tapped. When you tap an icon, it changes its position and another icon appears. Time limit 20 seconds.'s game

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

No:1314

122

←

Prev Next

→

Reset button available. One display icon. A game i..ALL
Developer User3300｜Date and time 23/6/18 10:57:03
Build time 26.874 sec｜Game capacity 2.241KB｜

Script

🍍

20秒

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>アイコンゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			font-size: 2em;
			text-align: center;
			background-color: #f5f5f5;
		}

#icon {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 4em;
			cursor: pointer;
		}

#time {
			font-size: 1.5em;
			display: inline-block;
			padding: 0.2em 1em;
			background-color: #003366;
			color: #fff;
			border-radius: 1em;
			margin-top: 1em;
		}
	</style>
</head>
<body>
	<div id="icon">🍍</div>
	<div id="time">20秒</div>

// 位置を変えてアイコンを表示する
		function showIcon() {
			const x = Math.random() * window.innerWidth;
			const y = Math.random() * window.innerHeight;
			icon.style.top = `${y}px`;
			icon.style.left = `${x}px`;
		}

// ゲームの制限時間をカウントダウンする
		function countdown() {
			remainingTime--;
			time.textContent = `${remainingTime}秒`;
			if (remainingTime === 0) {
				clearInterval(timerId);
				icon.removeEventListener("click", handleClick);
				alert("ゲームオーバー！");
			}
		}

// アイコンがタップされたら次のアイコンを表示する
		function handleClick() {
			showIcon();
		}

// 初期化処理
		function init() {
			// イベントリスナーを登録する
			icon.addEventListener("click", handleClick);
			// タイマーを開始する
			timerId = setInterval(countdown, 1000);
			// 初期のアイコンを表示する
			showIcon();
		}

// リセット処理
		function reset() {
			remainingTime = startTime;
			time.textContent = `${remainingTime}秒`;
			showIcon();
		}

// 初期化処理を実行する
		init();

// リセットボタンを追加する
		const resetButton = document.createElement("button");
		resetButton.textContent = "リセット";
		resetButton.addEventListener("click", reset);
		document.body.appendChild(resetButton);
	</script>
</body>
</html>