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

No:128

338

←

Prev Next

→

boring
Developer ひさひさ｜Date and time 23/5/23 18:23:34
Build time 78.915 sec｜Game capacity 3.683KB｜

Script

🎳 boring 🎳

bowling 0

Score: 1 💔

Ill do it again.、This is a bowling game. You can play it on your phone. Drop the ball on the screen.、Lets knock down the pins on the course, although the first one will always fall.、After the second time, the number of falls will vary randomly. When the score reaches 100 points, the、画面下部に表示された「game over」ボタンを押してください。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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.0">
	<style>
		body {
			background-color: #7CFC00;
			text-align: center;
		}

h1 {
			font-size: 48px;
			color: #FFD700;
			margin-top: 50px;
		}

#frame {
			display: inline-block;
			width: 300px;
			height: 500px;
			background-color: #D2B48C;
			margin-top: 50px;
			border-radius: 5px;
			position: relative;
		}

#ball {
			display: block;
			width: 50px;
			height: 50px;
			background-color: #FFD700;
			border-radius: 50%;
			position: absolute;
			left: 125px;
			animation: ball-fall 2s forwards;
			animation-iteration-count: 1;
		}

@keyframes ball-fall {
			0% {
				top: -50px;
			}
			100% {
				top: 400px;
				left: 135px;
			}
		}

#pins {
			display: block;
			width: 100px;
			height: 100px;
			background-color: #A9A9A9;
			margin: 0 auto;
			margin-top: 200px;
			border-radius: 50%;
			position: relative;
			animation: pins-rise 2s forwards;
			animation-iteration-count: 1;
			animation-delay: 2s;
		}

@keyframes pins-rise {
			0% {
				top: 500px;
			}
			100% {
				top: 200px;
			}
		}

.score {
			position: absolute;
			bottom: 20px;
			color: #FFD700;
			font-size: 36px;
			left: 50%;
			transform: translateX(-50%);
		}

.game-over {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.8);
			position: absolute;
			top: 0;
			left: 0;
			display: none;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

.text-over {
			color: #FFD700;
			font-size: 48px;
			margin-bottom: 20px;
		}

.restart {
			background-color: #4B0082;
			color: #FFD700;
			font-size: 24px;
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}

.restart:hover {
			background-color: #8A2BE2;
			color: white;
		}
	</style>
</head>
<body>
	<h1>🎳 ボウリング 🎳</h1>
	<div id="frame">
		<div id="ball"></div>
		<div id="pins"></div>
		<div class="score">スコア: <span id="score">0</span></div>
	</div>
	<div class="game-over" id="game-over">
		<div class="text-over">ゲームオーバー 💔</div>
		<button class="restart" id="restart">もう一度やる 🔁</button>
	</div>

ball.addEventListener("animationend", () => {
			let ballPosition = ball.getBoundingClientRect();
			let pinsPosition = pins.getBoundingClientRect();

if (ballPosition.bottom >= pinsPosition.top) {
				score += Math.floor(Math.random() * 10);

if (score >= 100) {
					gameOver.style.display = "flex";
				} else {
					document.getElementById("score").textContent = score;
					ball.style.animation = "ball-fall 2s forwards";
				}
			} else {
				gameOver.style.display = "flex";
			}
		});

restart.addEventListener("click", () => {
			score = 0;
			document.getElementById("score").textContent = score;
			ball.style.animation = "ball-fall 2s forwards";
			pins.style.animation = "pins-rise 2s forwards";
			gameOver.style.display = "none";
		});
	</script>
</body>
</html>

ボーリングゲームです。スマホで遊べます。画面上でボールを落とし、コースにあるピンを倒そう。1回目は必ず倒れますが、2回目以降はランダムで倒れる数が変動します。スコアが100点になると、ゲームオーバーになります。もう一度やる場合は、画面下部に表示された「もう一度やる」ボタンを押してください。