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

No:1621

2866

←

Prev Next

→

Music note rhythm game
Developer User3370｜Date and time 23/6/18 19:49:12
Build time 42.207 sec｜Game capacity 3.212KB｜

Script

音符リズムゲーム

スコア: 0

👍

👌

👎

【ゲームの概要】音符が左から右に移動するので、指定されたボタンを押して音符を取るゲームです。正しいボタンを押すとスコアが加算され、間違ったボタンを押すとスコアが減点されます。スマホでも遊べるよう、ボタンは大きく表示されています。

←

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 {
			font-family: Arial, sans-serif;
			background-color: #F2F2F2;
		}
		h1 {
			text-align: center;
			color: #FFC107;
		}
		#score {
			float: right;
			font-size: 20px;
			color: #4CAF50;
		}
		#game {
			width: 100%;
			height: 400px;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #FFFFFF;
			margin-top: 20px;
			border: 5px solid #FFC107;
			border-radius: 10px;
			position: relative;
		}
		#note {
			width: 50px;
			height: 50px;
			background-color: #FFC107;
			border-radius: 50%;
			position: absolute;
			bottom: 0;
			animation-duration: 2s;
			animation-name: moveNote;
		}
		@keyframes moveNote {
			from {left: 0;}
			to {left: calc(100% - 50px);}
		}
		#buttons {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			margin-top: 20px;
		}
		.button {
			width: 80px;
			height: 80px;
			border-radius: 50%;
			background-color: #FFC107;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
			font-size: 40px;
			box-shadow: 2px 2px 5px #555555;
		}
		@media (max-width: 768px) {
			#game {
				height: 300px;
			}
			#buttons {
				flex-wrap: wrap;
			}
			.button {
				width: 60px;
				height: 60px;
				font-size: 30px;
				margin: 5px;
			}
		}
	</style>
</head>
<body>
	<h1>音符リズムゲーム</h1>
	<div id="score">スコア: 0</div>
	<div id="game">
		<div id="note"></div>
	</div>
	<div id="buttons">
		<div class="button" onclick="checkButton(1)">👍</div>
		<div class="button" onclick="checkButton(2)">👌</div>
		<div class="button" onclick="checkButton(3)">👎</div>
	</div>
	<script>
		var score = 0;
		var buttonNum = Math.floor(Math.random() * 3) + 1;
		var note = document.getElementById("note");
		var intervalId = setInterval(moveNote, 10);

【ゲームの概要】
音符が左から右に移動するので、指定されたボタンを押して音符を取るゲームです。正しいボタンを押すとスコアが加算され、間違ったボタンを押すとスコアが減点されます。スマホでも遊べるよう、ボタンは大きく表示されています。