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

No:3574

1827

←

Prev Next

→

Watermelon Splitting Game
Developer もちきなこ｜Date and time 23/6/25 17:28:12
Build time 21.295 sec｜Game capacity 1.941KB｜

Script

スイカ割りゲーム

ルール

画面をタップすると斧が振り下ろされ、スイカが割れます。

スイカをできるだけ多く割って、スコアを競いましょう。

スコア: 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;
		}
		#startBtn, #gameArea {
			display: none;
		}
		h1, h2 {
			font-size: 2rem;
		}
		img {
			width: 80%;
			max-width: 300px;
		}
	</style>
</head>
<body>
	<h1>スイカ割りゲーム</h1>
	<h2>ルール</h2>
	<p>画面をタップすると斧が振り下ろされ、スイカが割れます。</p>
	<p>スイカをできるだけ多く割って、スコアを競いましょう。</p>
	<button id="startBtn">スタート</button>
	<div id="gameArea">
		<p id="score">スコア: 0</p>
		<img id="watermelon" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/237/watermelon_1f349.png" alt="スイカ">
	</div>
	<script>
		// 変数の宣言
		let score = 0;

// ボタンを押すとゲームが始まる
		const startBtn = document.querySelector('#startBtn');
		startBtn.addEventListener('click', function() {
			startBtn.style.display = 'none';
			gameArea.style.display = 'block';
			// スイカをタップした時の処理
			watermelon.addEventListener('click', function() {
				score++;
				scoreTxt.textContent = 'スコア: ' + score;
				// スイカの位置をランダムに変える
				watermelon.style.top = Math.floor(Math.random() * 80) + '%';
				watermelon.style.left = Math.floor(Math.random() * 80) + '%';
			});
			// 30秒後にゲーム終了
			setTimeout(function() {
				alert('ゲーム終了！スコアは' + score + 'です。');
				location.reload();
			}, 30000);
		});

// スコア表示用のテキスト要素を取得
		const scoreTxt = document.querySelector('#score');

// スイカの初期位置を設定
		const watermelon = document.querySelector('#watermelon');
		watermelon.style.top = Math.floor(Math.random() * 80) + '%';
		watermelon.style.left = Math.floor(Math.random() * 80) + '%';
	</script>
</body>
</html>