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

No:1324

185

←

Prev Next

→

Reset button available. A game in which you tap ic..ALL
Developer User3300｜Date and time 23/6/18 11:05:32
Build time 31.615 sec｜Game capacity 2.755KB｜

Script

アイコンタップゲーム！

制限時間：20秒

スコア：0

←

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>
		body{
			background-color: #f8f8f8;
			font-size: 24px;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		.icon{
			display: inline-block;
			padding: 10px;
			margin: 20px;
			background-color: #ff9800;
			color: #fff;
			border-radius: 50%;
			cursor: pointer;
		}
		#score{
			font-size: 36px;
			color: #4caf50;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<h1>アイコンタップゲーム！</h1>
	<p>制限時間：<span id="time">20</span>秒</p>
	<p>スコア：<span id="score">0</span></p>
	<div id="icon-container"></div>
	<button id="reset-button">ゲームリセット</button>

resetButton.addEventListener("click", resetGame);

buildIcons(iconContainer);

const countdown = setInterval(function(){
			time--;
			timeDisplay.textContent = time;
			if(time === 0){
				clearInterval(countdown);
				iconContainer.removeEventListener("click", iconClickHandler);
				alert("制限時間が終了しました！\nあなたのスコアは" + score + "点です。");
			}
		}, 1000);

function resetGame(){
			score = 0;
			scoreDisplay.textContent = score;
			time = 20;
			timeDisplay.textContent = time;
			iconContainer.innerHTML = "";
			buildIcons(iconContainer);
		}

function buildIcons(container){
			const icons = [ "😀", "😂", "😍", "🙌", "🤔", "🐱‍🐉", "🍕", "🎂", "🎉", "👑" ];
			shuffleArray(icons);
			for(let i = 0; i < 10; i++){
				const icon = document.createElement("div");
				icon.setAttribute("class", "icon");
				icon.textContent = icons[i];
				container.appendChild(icon);
			}
			container.addEventListener("click", iconClickHandler);
		}

function iconClickHandler(e){
			if(e.target.matches(".icon")){
				const clickedIcon = e.target;
				score++;
				scoreDisplay.textContent = score;
				moveIcon(clickedIcon);
			}
		}

function moveIcon(icon){
			const newX = Math.floor(Math.random() * (window.innerWidth - 100));
			const newY = Math.floor(Math.random() * (window.innerHeight - 100));
			icon.style.transform = "translate(" + newX + "px, " + newY + "px)";
			setTimeout(function(){
				icon.style.transform = "";
			}, 500);
		}

function shuffleArray(array){
			for(let i = array.length - 1; i > 0; i--){
				const j = Math.floor(Math.random() * (i + 1));
				[array[i], array[j]] = [array[j], array[i]];
			}
		}
	</script>
</body>
</html>