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

No:3528

3628

←

Prev Next

→

Baseball vs. Soccer
Developer anonymous｜Date and time 70/1/1 9:58:58
Build time unknown sec｜Game capacity 3.538KB｜

Script

野球 vs サッカー

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>野球vsサッカー</title>
	<style>
		body {
			background-color: #f9f9f9;
			font-family: Arial, sans-serif;
			font-size: 16px;
			margin: 0;
			padding: 0;
		}

header {
			background-color: #4285f4;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px;
		}

h1 {
			font-size: 24px;
			margin: 0;
		}

main {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 50px 0;
		}

button {
			background-color: #4285f4;
			border: none;
			color: #fff;
			cursor: pointer;
			font-size: 16px;
			padding: 10px 20px;
			margin: 20px;
		}

#game {
			background-color: #fff;
			border: 1px solid #ccc;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 300px;
			width: 80%;
			margin: 0 auto;
			position: relative;
			text-align: center;
		}

#game span {
			font-size: 64px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

#baseball {
			display: none;
			width: 100%;
			height: 200px;
		}

#soccer {
			display: none;
			width: 100%;
			height: 200px;
		}

footer {
			background-color: #ccc;
			color: #333;
			padding: 10px;
			text-align: center;
		}
	</style>
	<script>
		// ページ読み込み時に実行する処理
		window.onload = function() {
			// ゲーム開始ボタンがクリックされたら
			document.getElementById("start").onclick = function() {
				// 野球 vs サッカーのどちらかをランダムで選択する
				var gameType = Math.floor(Math.random() * 2);
				if (gameType === 0) {
					// 野球が選択されたら
					document.getElementById("game").style.backgroundImage = "url('baseball.jpg')";
					document.getElementById("baseball").style.display = "block";
					document.getElementById("soccer").style.display = "none";
				} else {
					// サッカーが選択されたら
					document.getElementById("game").style.backgroundImage = "url('soccer.jpg')";
					document.getElementById("baseball").style.display = "none";
					document.getElementById("soccer").style.display = "block";
				}
				// カウントダウンを開始する
				var timer = 3;
				var countdown = setInterval(function() {
					document.getElementById("game").innerHTML = "<span>" + timer + "</span>";
					timer--;
					if (timer < 0) {
						// カウントダウンが終了したら
						clearInterval(countdown);
						document.getElementById("game").innerHTML = "<span>START!</span>";
						// 2秒後にゲーム結果を判定する
						setTimeout(function() {
							var result = Math.floor(Math.random() * 2);
							if (result === 0) {
								document.getElementById("game").innerHTML = "<span>野球の勝ち！</span>";
							} else {
								document.getElementById("game").innerHTML = "<span>サッカーの勝ち！</span>";
							}
							// ゲーム結果を表示したらもう一度プレイできるようにする
							document.getElementById("start").innerHTML = "もう一度プレイする";
						}, 2000);
					}
				}, 1000);
			};
		};
	</script>
</head>
<body>
	<header>
		<h1>野球 vs サッカー</h1>
	</header>
	<main>
		<div id="game"></div>
		<img id="baseball" src="baseball.png" alt="野球">
		<img id="soccer" src="soccer.png" alt="サッカー">
		<button id="start">ゲームスタート！</button>
	</main>
	<footer>© 2021 野球 vs サッカー</footer>
</body>
</html>