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

No:1593

856

←

Prev Next

→

A game like Rhythm Heaven
Developer AI絵師｜Date and time 23/6/18 19:13:36
Build time 41.5 sec｜Game capacity 3.756KB｜

Script

を作りました。

Rhythm Game

Score: 0

😁

😂

😃

😄

このゲームでは、4つの絵文字が表示され、ランダムなボタンが継続的に点滅します。プレイヤーの目的は、ボタンが点滅している間に正しいボタンをクリックすることで、スコアを得ます。10点以上獲得した場合は、勝利のアラートが表示されます。ゲームではカウントダウンとして3秒が用意され、プレーヤーはそれが終わるまで待たなければなりません。スマホで遊ぶ場合、指でボタンをタップすることで操作が可能です。

←

Prev　Next

→ 　

Back　

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

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

を作りました。

<!DOCTYPE html>
<html>
<head>
	<title>Rhythm Game</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #1DB954;
			color: white;
			font-family: sans-serif;
			text-align: center;
		}
		
		h1 {
			font-size: 4rem;
			margin-top: 3rem;
		}
		
		#score {
			font-size: 3rem;
			margin-bottom: 1.5rem;
		}
		
		#buttons {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 3rem;
		}
		
		.button {
			width: 5rem;
			height: 5rem;
			border-radius: 50%;
			background-color: white;
			margin: 1.5rem;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
			cursor: pointer;
		}
		
		.button:hover {
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
			transform: translateY(-5px);
			transition: all 0.3s ease;
		}
		
		.smile {
			font-size: 2rem;
		}
		
		#countdown {
			font-size: 6rem;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(255, 255, 255, 0.8);
			z-index: 1;
			visibility: hidden;
		}
		
	</style>
</head>
<body>
	<h1>Rhythm Game</h1>
	<div id="score">Score: 0</div>
	<div id="buttons">
		<div class="button" id="button1"><span class="smile">😁</span></div>
		<div class="button" id="button2"><span class="smile">😂</span></div>
		<div class="button" id="button3"><span class="smile">😃</span></div>
		<div class="button" id="button4"><span class="smile">😄</span></div>
	</div>
	<div id="countdown"></div>
	<script>
		let score = 0;
		let countdown = document.getElementById('countdown');
		let buttons = document.querySelectorAll('.button');
		let interval;
		
		function getRandomButton() {
			let randomIndex = Math.floor(Math.random() * buttons.length);
			return buttons[randomIndex];
		}
		
		function showCountdown() {
			let counter = 3;
			countdown.innerHTML = counter;
			countdown.style.visibility = 'visible';
			interval = setInterval(function() {
				counter--;
				if (counter == 0) {
					countdown.style.visibility = 'hidden';
					startGame();
					clearInterval(interval);
				} else {
					countdown.innerHTML = counter;
				}
			}, 1000);
		}
		
		function startGame() {
			let button = getRandomButton();
			button.style.backgroundColor = '#1DB954';
			button.style.color = 'white';
			button.addEventListener('click', function() {
				score++;
				document.getElementById('score').innerHTML = 'Score: ' + score;
				button.style.backgroundColor = 'white';
				button.style.color = '#1DB954';
			});
			setTimeout(function() {
				button.style.backgroundColor = 'white';
				button.style.color = '#1DB954';
				button.removeEventListener('click', function() {
					score++;
					document.getElementById('score').innerHTML = 'Score: ' + score;
					button.style.backgroundColor = 'white';
					button.style.color = '#1DB954';
				});
				if (score < 10) {
					startGame();
				} else {
					alert('You win!');
				}
			}, 1000);
		}
		
		showCountdown();
	</script>
</body>
</html>