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

No:3249

216

←

Prev Next

→

Golf course is nature!
Developer User3589｜Date and time 23/6/24 9:52:33
Build time 41.067 sec｜Game capacity 3.912KB｜

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 charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color:#82E0AA;
			text-align:center;
		}
		#container {
			margin: 0 auto;
			border: 5px solid #2C3E50;
			border-radius: 10px;
			padding-top: 20px;
			padding-bottom: 30px;
			width: 90%;
			max-width: 700px;
			background-color: #ECF0F1;
		}
		#container h1 {
			font-size: 2.5rem;
			color: #2C3E50;
			margin-bottom: 20px;
		}
		#container .hole {
			margin-top: 20px;
			padding-bottom: 10px;
		}
		#container .hole p {
			font-size: 1.5rem;
			margin: 0;
			padding-bottom: 5px;
		}
		#container .hole img {
			max-width: 100%;
			margin-bottom: 10px;
		}
		#container .hole input[type="number"] {
			padding: 5px;
			margin-right: 10px;
			border-radius: 5px;
			border: none;
			width: 60px;
			font-size: 1.2rem;
			text-align: center;
			background-color: #DCDCDC;
		}
		#container .hole button {
			padding: 5px 20px;
			border-radius: 5px;
			border: none;
			background-color: #2C3E50;
			color: #FFFFFF;
			font-size: 1.2rem;
			cursor: pointer;
		}
		#container .results {
			margin-top: 20px;
			font-size: 1.2rem;
			background-color: #FFFFFF;
			padding: 10px;
			border-radius: 5px;
			text-align: left;
		}
		@media only screen and (max-width: 600px) {
			#container {
				font-size: 0.8rem;
			}
			#container .hole input[type="number"] {
				width: 40px;
			}
			#container .hole button {
				padding: 5px 10px;
			}
		}
	</style>
	<script>
		const holesData = [
			{
				name: "ホール1",
				image: "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/flag-in-hole_1f98f.png",
				par: 3,
				score: 0
			},
			{
				name: "ホール2",
				image: "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/flag-in-hole_1f98f.png",
				par: 4,
				score: 0
			},
			{
				name: "ホール3",
				image: "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/flag-in-hole_1f98f.png",
				par: 5,
				score: 0
			}
		];
		
		let currentHoleIndex = 0;
		
		function displayHole() {
			const currentHole = holesData[currentHoleIndex];
			document.getElementById("hole-name").textContent = currentHole.name;
			document.getElementById("hole-image").src = currentHole.image;
			document.getElementById("hole-par").textContent = currentHole.par;
			document.getElementById("hole-score").value = currentHole.score;
		}
		
		function submitScore() {
			const currentHole = holesData[currentHoleIndex];
			currentHole.score = parseInt(document.getElementById("hole-score").value);
			let totalScore = 0;
			for (let i = 0; i <= currentHoleIndex; i++) {
				totalScore += holesData[i].score;
			}
			document.getElementById("total-score").textContent = totalScore;
			document.getElementById("hole-score").value = '';
			if (currentHoleIndex == holesData.length - 1) {
				document.getElementById("submit-score-btn").style.display = "none";
				document.getElementById("game-over").style.display = "block";
			} else {
				currentHoleIndex++;
				displayHole();
			}
		}

window.onload = function() {
			displayHole();
			document.getElementById("submit-score-btn").addEventListener('click', submitScore);
		};
	</script>
</head>
<body>
	<div id="container">
		<h1>ゴルフゲーム</h1>
		<div class="hole">
			<p id="hole-name"></p>
			<img id="hole-image" src="" alt="ホールイメージ">
			<p>パー: <span id="hole-par"></span></p>
			<p>スコア: <input type="number" id="hole-score" placeholder="スコア"></p>
			<button id="submit-score-btn">スコアを送信</button>
		</div>
		<div class="results">
			<p>合計スコア: <span id="total-score">0</span></p>
			<p id="game-over" style="display:none;"><strong>ゲームオーバー！</strong> お疲れ様でした。</p>
		</div>
	</div>
</body>
</html>