AI game creator

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

No:355

197

←

Prev Next

→

Absolute pitch game
Developer User2983｜Date and time 23/6/12 22:16:28
Build time 58.754 sec｜Game capacity 4.588KB｜

Script

以下の音符を覚えてから、あとで同じ順番でクリックしてください。

🎵

🎶

🎷

🎸

【絶対音感ゲーム】このゲームは、4つの絵文字による音符を使っています。Startボタンを押すと、10個のランダムな音符が1つずつ演奏されます。演奏を受けて、同じ順序でクリックする必要があります。クリックが正解なら、スコアが1ポイント増え、別の一連の音符が演奏されます。一連の演奏が終了すると、やりなおすことができます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>絶対音感ゲーム</title>
	<style>
		body {
			background-color: #f2f2f2;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		#container {
			margin: 0 auto;
			max-width: 600px;
		}
		#board {
			background-color: #ffffff;
			border: 1px solid #cccccc;
			padding: 20px;
			margin-bottom: 20px;
		}
		#instructions {
			color: #777777;
			font-size: 14px;
			padding-bottom: 20px;
		}
		#score {
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 20px;
		}
		#buttons {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 20px;
		}
		.button {
			background-color: #8dc63f;
			border: none;
			color: #ffffff;
			font-size: 18px;
			font-weight: bold;
			padding: 10px;
			margin: 0 10px;
			cursor: pointer;
			border-radius: 5px;
		}
		.button:hover {
			background-color: #6fb02c;
		}
		#message {
			font-size: 18px;
			margin-bottom: 20px;
		}
		#notes {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			margin-bottom: 20px;
		}
		.note {
			font-size: 100px;
			padding: 50px;
			margin: 10px;
			cursor: pointer;
			box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
			border-radius: 5px;
		}
		.note:hover {
			box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
		}
		.note.selected {
			background-color: #8dc63f;
			color: #ffffff;
			box-shadow: none;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="board">
			<div id="instructions">以下の音符を覚えてから、あとで同じ順番でクリックしてください。</div>
			<div id="score">0</div>
			<div id="buttons">
				<button id="startButton" class="button">Start</button>
				<button id="resetButton" class="button">Reset</button>
			</div>
			<div id="message"></div>
			<div id="notes">
				<div class="note note1">🎵</div>
				<div class="note note2">🎶</div>
				<div class="note note3">🎷</div>
				<div class="note note4">🎸</div>
			</div>
		</div>
	</div>
	<script>
		var notes = [1, 2, 3, 4];
		var sequence = [];
		var index = 0;
		var userSequence = [];
		var score = 0;
		var playing = false;

function startGame() {
			if (!playing) {
				sequence = [];

for (var i = 0; i < 10; i++) {
					var note = notes[Math.floor(Math.random() * notes.length)];
					sequence.push(note);
				}

userSequence = [];
				index = 0;
				score = 0;
				playing = true;

document.getElementById('score').innerHTML = score;
				document.getElementById('message').innerHTML = '';
				document.getElementById('notes').classList.remove('disabled');

playNote();
			}
		}

function checkSequence() {
			if (userSequence.length == sequence.length) {
				if (JSON.stringify(userSequence) == JSON.stringify(sequence)) {
					score++;
					document.getElementById('score').innerHTML = score;
					document.getElementById('message').innerHTML = '正解！';
				} else {
					document.getElementById('message').innerHTML = '残念。。。';
				}

userSequence = [];
				index = 0;

setTimeout(playNote, 2000);
			}
		}

function selectNote() {
			if (playing && this.classList.contains('disabled') == false) {
				var note = parseInt(this.classList[1].slice(4));
				userSequence.push(note);
				this.classList.add('selected');

setTimeout(function() {
					document.querySelectorAll('.note').forEach(function(note) {
						note.classList.remove('selected');
					});

checkSequence();
				}, 500);
			}
		}

document.getElementById('startButton').addEventListener('click', startGame);
		document.getElementById('resetButton').addEventListener('click', function() {
			location.reload();
		});

document.querySelectorAll('.note').forEach(function(note) {
			note.addEventListener('click', selectNote);
		});
	</script>
</body>
</html>

【絶対音感ゲーム】

このゲームは、4つの絵文字による音符を使っています。Startボタンを押すと、10個のランダムな音符が1つずつ演奏されます。演奏を受けて、同じ順序でクリックする必要があります。クリックが正解なら、スコアが1ポイント増え、別の一連の音符が演奏されます。一連の演奏が終了すると、やりなおすことができます。