A game where you have to press the notes falling from above at the right moment.'s game

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

No:149

682

←

Prev Next

→

A game where you have to press the notes falling f..ALL
Developer User2908｜Date and time 23/5/29 12:08:19
Build time 41.857 sec｜Game capacity 1.984KB｜

Script

I made it. The following is the program

This game is、This is a game in which you press the notes falling from above with good timing. Since it is designed to be operated with a smartphone、Scores are added by tapping on the notes. Since the notes are represented by pictograms、It gives a cute impression. Also、Because scores are displayed in real time、Players can easily keep track of their scores.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

作りました。

以下がプログラムです。

```html
<!DOCTYPE html>
<html>
<head>
	<title>音符タイミングゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: black;
		}

#game-container {
			position: relative;
			height: 100vh;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
		}

#score {
			position: absolute;
			top: 10px;
			right: 10px;
			font-size: 30px;
			color: white;
		}

.note {
			position: absolute;
			top: -30px;
			left: 50%;
			transform: translateX(-50%);
			font-size: 80px;
			color: #ffcc66;
			animation: fall 3s linear infinite;
		}

@keyframes fall {
			0% {
				top: -30px;
			}
			100% {
				top: 100vh;
			}
		}
	</style>
</head>
<body>
	<div id="game-container">
		<div id="score">0</div>
	</div>

function createNote() {
			const noteElem = document.createElement('div');
			noteElem.classList.add('note');
			noteElem.innerText = '♫';
			gameContainer.appendChild(noteElem);

noteElem.addEventListener('animationiteration', () => {
				gameContainer.removeChild(noteElem);
			});

noteElem.addEventListener('mousedown', () => {
				score++;
				document.querySelector('#score').textContent = score;
				gameContainer.removeChild(noteElem);
			});
		}

setInterval(createNote, 1000);
	</script>
</body>
</html>
```

このゲームは、上から落ちてくる音符をタイミングよく押すゲームです。スマホで操作することを前提としているため、音符をタップすることでスコアが加算されます。絵文字で音符を表現しているため、可愛らしい印象を与えます。また、スコアがリアルタイムで表示されるため、プレイヤーは自分のスコアを把握しやすくなっています。