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

No:1401

←

Prev Next

→

musical (music) game
Developer User3328｜Date and time 23/6/18 13:52:00
Build time 41.401 sec｜Game capacity 3.58KB｜

Script

音楽ゲーム

「Yesterday」(The Beatles)

←

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 name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			background-color: #282c34;
			color: white;
			font-family: Arial, sans-serif;
			text-align: center;
			margin: 0;
			padding: 0;
		}
		h1 {
			font-size: 48px;
			margin: 20px;
		}
		#game {
			height: 500px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.circle {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			margin: 40px;
			background-color: white;
			cursor: pointer;
		}
		.circle:hover, .active {
			background-color: #61dafb;
			animation: pulse 0.5s infinite;
		}
		@media (max-width: 600px) {
			h1 {
				font-size: 32px;
			}
			.circle {
				width: 30px;
				height: 30px;
				margin: 20px;
			}
		}
		@keyframes pulse {
			0% {
				transform: scale(1);
			}
			50% {
				transform: scale(1.2);
			}
			100% {
				transform: scale(1);
			}
		}
	</style>
	<script>
		// 曲の情報
		const song = {
			name: 'Yesterday',
			artist: 'The Beatles',
			duration: 135,  // 曲の長さ(秒)
			notes: [
				{time: 0, circle: 2},
				{time: 1, circle: 3},
				{time: 2, circle: 1},
				{time: 3, circle: 4},
				// ...
				{time: 134, circle: 2}
			]
		};

// 画面の初期化
		function init() {
			// 曲情報を表示
			document.getElementById('song-name').innerHTML = song.name;
			document.getElementById('song-artist').innerHTML = song.artist;

// ノーツを表示
			let game = '';
			for (let i = 1; i <= 4; i++) {
				game += '<div class="circle" data-circle="' + i + '"></div>';
			}
			document.getElementById('game').innerHTML = game;

// 再生ボタンを表示
			document.getElementById('play-button').style.display = 'block';
		}

// 再生ボタンクリック時の処理
		function play() {
			// 再生ボタンを非表示にする
			document.getElementById('play-button').style.display = 'none';

// ノーツを順番に表示
			let index = 0;
			let interval = setInterval(function() {
				if (index == song.notes.length) {
					// 全部表示し終わったら終了
					clearInterval(interval);
					// 結果を表示
					showResult();
					return;
				}
				let note = song.notes[index];
				let circle = document.querySelector('.circle[data-circle="' + note.circle + '"]');
				circle.classList.add('active');
				setTimeout(function() {
					circle.classList.remove('active');
				}, 500);
				index++;
			}, 1000);
		}

// 結果を表示
		function showResult() {
			// 正解数をカウント
			let count = 0;
			let lastTime = -1;
			for (let i = 0; i < song.notes.length; i++) {
				let note = song.notes[i];
				if (note.time == lastTime) {
					// 同じ時間に複数のノーツがある場合はカウントしない
					continue;
				}
				let circle = document.querySelector('.circle[data-circle="' + note.circle + '"]');
				if (circle.classList.contains('active')) {
					// 正解の場合
					count++;
				}
				lastTime = note.time;
			}
			// 正解率を計算
			let accuracy = Math.round(count / song.notes.length * 100);
			// 結果を表示
			document.getElementById('result').innerHTML = '正解率：' + accuracy + '%';
			document.getElementById('result').style.display = 'block';
		}
	</script>
</head>
<body onload="init()">
	<h1>音楽ゲーム</h1>
	<p>「Yesterday」(The Beatles)</p>
	<p id="song-name"></p>
	<p id="song-artist"></p>
	<div id="game"></div>
	<button id="play-button" onclick="play()">再生</button>
	<div id="result" style="display: none;"></div>
</body>
</html>