Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
Reset button available. A game in which you tap icons. When you tap an icon, it disappears, but other icons appear in different positions. When you tap an icon, one icon is added to your score. Time limit 20 seconds.'s game | AI game creator

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

No:1324

214

←

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]現在の売れ筋Kindle本ランキング

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>