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

No:2387

2357

←

Prev Next

→

Banana Guru
Developer sayaensm｜Date and time 23/6/21 8:45:06
Build time 18.417 sec｜Game capacity 2.516KB｜

Script

バナナの達人

制限時間内にできるだけ多くのバナナをクリックしよう！

←

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 {
			font-size: 2em;
		}
		.board {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			grid-gap: 10px;
		}
		.banana {
			background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/81/banana_1f34c.png');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			cursor: pointer;
			opacity: 0;
			transition: opacity 0.5s;
		}
		.active {
			opacity: 1;
		}
		.timer {
			position: fixed;
			top: 0;
			right: 0;
			padding: 10px;
			background-color: yellow;
			border: 5px solid black;
		}
	</style>
</head>
<body>
	<h1>バナナの達人</h1>
	<p>制限時間内にできるだけ多くのバナナをクリックしよう！</p>
	<div class="board"></div>
	<div id="timer" class="timer"></div>

const init = () => {
			for (let i=0; i<15; i++) {
				const div = document.createElement('div');
				div.classList.add('banana');
				board.appendChild(div);
			}
		}

const activateRandomBanana = () => {
			const bananas = document.querySelectorAll('.banana:not(.active)');
			if (bananas.length === 0) {
				return gameOver();
			}
			const index = Math.floor(Math.random() * bananas.length);
			bananas[index].classList.add('active');
			setTimeout(() => bananas[index].classList.remove('active'), 1000);
		}

const gameOver = () => {
			score = Math.round(score * 100 / gameDuration);
			clearInterval(countDownIntervalId);
			clearInterval(gameIntervalId);
			alert(`ゲーム終了！あなたのスコアは${score}点です。`);
		}

init();
		board.addEventListener('click', (evt) => {
			if (evt.target.classList.contains('active')) {
				score++;
				evt.target.classList.remove('active');
			}
		});
		startGame();
	</script>
</body>
</html>