Walking game with white piano keys coming from above's game

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

No:445

168

←

Prev Next

→

Walking game with white piano keys coming from abo..ALL
Developer User3044｜Date and time 23/6/14 15:48:39
Build time 75.488 sec｜Game capacity 4.97KB｜

Script

スコア: 0

このゲームは、ピアノ鍵盤を歩いていくゲームです。プレイヤーは矢印キーで鍵盤を移動させ、上から降ってくるキーをクリックして得点を稼ぎます。クリックしなかったキーや、時間内にクリックしなかったキーに触れると減点されます。プレイヤーが画面下まで落ちる前に、どれだけ高いスコアを稼げるか挑戦しましょう。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>ピアノ鍵盤ゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			background-color: #f2f2f2;
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
			font-size: 16px;
		}
		.piano {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: flex-end;
			height: 50vh;
			padding: 20px;
		}
		.white-key {
			background-color: white;
			border: 1px solid black;
			height: 40px;
			width: 40px;
			cursor: pointer;
			transition: background-color 0.2s;
			margin-bottom: -1px;
		}
		.black-key {
			background-color: black;
			border: 1px solid black;
			height: 30px;
			width: 20px;
			cursor: pointer;
			transition: background-color 0.2s;
			position: relative;
			left: -10px;
			margin-bottom: -10px;
			z-index: 1;
		}
		.player {
			width: 40px;
			height: 40px;
			background-color: yellow;
			position: absolute;
			bottom: 0;
			left: calc(50% - 20px);
			border-radius: 50%;
			z-index: 2;
			transition: bottom 0.2s ease-out;
		}
		.score {
			text-align: center;
			margin-top: 10px;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<div class="piano">
		<div class="white-key"></div>
		<div class="black-key"></div>
		<div class="white-key"></div>
		<div class="black-key"></div>
		<div class="white-key"></div>
		<div class="white-key"></div>
		<div class="black-key"></div>
		<div class="white-key"></div>
		<div class="black-key"></div>
		<div class="white-key"></div>
		<div class="black-key"></div>
		<div class="white-key"></div>
		<div class="white-key"></div>
		<div class="black-key"></div>
		<div class="white-key"></div>
		<div class="black-key"></div>
		<div class="white-key"></div>
		<div class="black-key"></div>
		<div class="white-key"></div>
		<div class="black-key"></div>
		<div class="white-key"></div>
		<div class="black-key"></div>
		<div class="white-key"></div>
		<div class="white-key"></div>
		<div class="black-key"></div>
		<div class="white-key"></div>
		<div class="black-key"></div>
		<div class="white-key"></div>
		<div class="black-key"></div>
		<div class="white-key"></div>
		<div class="black-key"></div>
		<div class="white-key"></div>
		<div class="black-key"></div>
		<div class="white-key"></div>
		<div class="white-key"></div>
		<div class="black-key"></div>
		<div class="white-key"></div>
		<div class="black-key"></div>
		<div class="white-key"></div>
		<div class="black-key"></div>
		<div class="white-key"></div>
	</div>
	<div class="player"></div>
	<div class="score">スコア: 0</div>
	<script>
		var score = 0;
		var player = document.querySelector(".player");

document.addEventListener("keydown", function(event) {
			if (event.code === "ArrowLeft") {
				movePlayer(-40);
			} else if (event.code === "ArrowRight") {
				movePlayer(40);
			}
		});

var whiteKeys = document.querySelectorAll(".white-key");
		var blackKeys = document.querySelectorAll(".black-key");
		var keys = [...whiteKeys, ...blackKeys];
		var currentKey = 0;

setInterval(function() {
			if (currentKey < keys.length) {
				keys[currentKey].classList.add("active");
			}
			setTimeout(function() {
				if (currentKey < keys.length) {
					if (!keys[currentKey].classList.contains("clicked")) {
						score -= 10;
						document.querySelector(".score").textContent = "スコア: " + score;
					}
					keys[currentKey].classList.remove("active");
					currentKey++;
				}
			}, 2000);
		}, 1000);

keys.forEach(function(key) {
			key.addEventListener("click", function() {
				if (key.classList.contains("active")) {
					score += 10;
					document.querySelector(".score").textContent = "スコア: " + score;
				}
				key.classList.add("clicked");
			});
		});

setInterval(function() {
			var bottomPosition = parseInt(player.style.bottom) || 0;
			player.style.bottom = (bottomPosition + 10) + "px";
			if (bottomPosition > 120) {
				alert("ゲームオーバー！スコアは" + score + "点でした。");
				location.reload();
			}
		}, 500);
	</script>
</body>
</html>