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

No:590

220

←

Prev Next

→

Bowling with a single pin
Developer User3025｜Date and time 23/6/16 1:20:03
Build time 46.469 sec｜Game capacity 2.964KB｜

Script

Bowling with a single pin

Click to roll the ball and calculate your score!

🎳

←

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 {
			font-family: Arial, sans-serif;
			text-align: center;
			background-color: #9ad3de;
		}
		h1 {
			color: #f5a76e;
		}
		#ball {
			position: relative;
			left: 40%;
			top: 300px;
			width: 60px;
			height: 60px;
			border-radius: 50%;
			background-color: #ffffff;
			cursor: pointer;
			animation-name: moveDown;
			animation-duration: 2s;
			animation-iteration-count: 1;
			animation-fill-mode: forwards;
		}
		@keyframes moveDown {
			from { top: 300px; }
			to { top: 60%; }
		}
		#pin1, #pin2, #pin3, #pin4, #pin5, #pin6, #pin7, #pin8, #pin9, #pin10 {
			position: relative;
			display: inline-block;
			margin: 10px;
			width: 60px;
			height: 60px;
			border-radius: 50%;
			background-color: #f5a76e;
			transform: rotate(45deg);
			animation-name: fallDown;
			animation-duration: 2s;
			animation-iteration-count: 1;
			animation-fill-mode: forwards;
		}
		@keyframes fallDown {
			from { transform: rotate(45deg); }
			to { transform: rotate(90deg); }
		}
		.score {
			font-size: 24px;
			font-weight: bold;
			margin-top: 20px;
		}
	</style>
	<script>
		var score = 0;
		var pins = [];
		var ball;
		var gameStarted = false;
		
		function initialize() {
			ball = document.getElementById("ball");
			for (var i = 1; i <= 10; i++) {
				var pin = document.getElementById("pin" + i);
				pins.push(pin);
			}
			ball.addEventListener("click", rollBall);
		}
		
		function rollBall() {
			if (!gameStarted) {
				gameStarted = true;
				ball.style.animationName = "moveDown";
				for (var i = 0; i < pins.length; i++) {
					pins[i].style.animationName = "fallDown";
				}
				score = 0;
				document.getElementById("score").innerHTML = "SCORE: " + score;
				setTimeout(resetGame, 2000);
			}
		}
		
		function resetGame() {
			ball.style.animationName = "";
			for (var i = 0; i < pins.length; i++) {
				pins[i].style.animationName = "";
			}
			gameStarted = false;
			calculateScore();
		}
		
		function calculateScore() {
			var fallenPins = 0;
			for (var i = 0; i < pins.length; i++) {
				if (pins[i].style.animationName == "fallDown") {
					fallenPins++;
				}
			}
			score = 10 - fallenPins;
			document.getElementById("score").innerHTML = "SCORE: " + score;
		}
	</script>
</head>
<body onload="initialize()">
	<h1>ピン一本のボーリング</h1>
	<p>クリックでボールを転がしてスコアを計算しよう！</p>
	<div id="ball">🎳</div>
	<div>
		<div id="pin1">🎳</div>
		<div id="pin2">🎳</div>
		<div id="pin3">🎳</div>
	</div>
	<div>
		<div id="pin4">🎳</div>
		<div id="pin5">🎳</div>
	</div>
	<div>
		<div id="pin6">🎳</div>
		<div id="pin7">🎳</div>
		<div id="pin8">🎳</div>
	</div>
	<div>
		<div id="pin9">🎳</div>
		<div id="pin10">🎳</div>
	</div>
	<div class="score" id="score"></div>
</body>
</html>