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

No:2592

1187

←

Prev Next

→

Cavity cure rhythm game
Developer AI絵師｜Date and time 23/6/22 1:24:30
Build time 66.64 sec｜Game capacity 2.896KB｜

Script

虫歯治療リズムゲーム

Ahhh!

Ouch!

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>虫歯治療リズムゲーム</title>
	<style>
		body {
			text-align: center;
			font-size: 24px;
			background-color: #F5F5F5;
		}
		h1 {
			margin-top: 50px;
			font-size: 48px;
			color: #FF8C00;
		}
		#game {
			display: inline-block;
			margin-top: 50px;
			background-color: #FFFFFF;
			border-radius: 10px;
			box-shadow: 10px 10px 10px #888888;
			padding: 20px;
			width: 70%;
			height: 400px;
			position: relative;
		}
		.tooth {
			position: absolute;
			bottom: 0;
			background-image: url("https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/microsoft/209/tooth_1f9b7.png");
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
			width: 150px;
			height: 150px;
			animation-name: move-tooth;
			animation-duration: 1s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}
		@keyframes move-tooth {
			0% {
				left: 0;
			}
			50% {
				left: 80%;
			}
			100% {
				left: 0;
			}
		}
		.btn {
			display: inline-block;
			margin-top: 20px;
			padding: 10px 20px;
			background-color: #FF8C00;
			color: #FFFFFF;
			border-radius: 5px;
			font-size: 24px;
			cursor: pointer;
			user-select: none;
		}
		.btn:hover {
			background-color: #FFA07A;
		}
		.score {
			position: absolute;
			top: 0;
			right: 0;
			margin: 20px;
			font-size: 24px;
			color: #000000;
		}
	</style>
</head>
<body>
	<h1>虫歯治療リズムゲーム</h1>
	<div id="game">
		<div class="tooth"></div>
		<div class="btn" id="btn1">Ahhh!</div>
		<div class="btn" id="btn2">Ouch!</div>
		<div class="score">Score: 0</div>
	</div>
	<script>
		let score = 0;
		let toothSpeed = 5;
		let toothPosition = 0;
		let gameOver = false;

const game = document.getElementById("game");
		const tooth = document.getElementsByClassName("tooth")[0];
		const btnA = document.getElementById("btn1");
		const btnO = document.getElementById("btn2");
		const scoreDiv = document.getElementsByClassName("score")[0];

btnA.addEventListener("click", () => {
			if (!gameOver && toothPosition <= 60 && toothPosition >= -60) {
				score++;
				scoreDiv.innerHTML = "Score: " + score;
				toothSpeed += 0.5;
				toothPosition = 0;
				tooth.style.left = toothPosition + "%";
			}
		});

btnO.addEventListener("click", () => {
			if (!gameOver && (toothPosition > 60 || toothPosition < -60)) {
				score++;
				scoreDiv.innerHTML = "Score: " + score;
				toothSpeed += 0.5;
				toothPosition = 0;
				tooth.style.left = toothPosition + "%";
			}
		});

setInterval(() => {
			if (!gameOver) {
				toothPosition += toothSpeed;
				tooth.style.left = toothPosition + "%";
				if (toothPosition >= 100) {
					gameOver = true;
					alert("ゲームオーバー。スコアは" + score + "です。");
					location.reload();
				}
			}
		}, 50);
	</script>
</body>
</html>