Tap to walk and split watermelon at random position's game

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

No:4543

299

←

Prev Next

→

Tap to walk and split watermelon at random positio..ALL
Developer User3694｜Date and time 23/6/28 3:46:13
Build time 26.481 sec｜Game capacity 2.535KB｜

Script

をするスマホゲームを作ることにしました。以下が実装例です。

🍉

このゲームでは、🥷の絵文字が表示され、タップすることで🥷が歩いていきます。ランダムな位置に表示された🍉をタップすることでスイカが割れ、結果画面が表示されます。結果画面をタップすると、ゲームが再度始まります。

←

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 {
			margin: 0;
			padding: 0;
			background-color: #6cc644;
			user-select: none;
		}
		#player {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 30px;
		}
		#watermelon {
			position: absolute;
			top: 30%;
			left: 30%;
			font-size: 50px;
			cursor: pointer;
		}
		#result {
			display: none;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 30px;
		}
	</style>
	<script>
		// スイカの位置をランダムに設定する関数
		function setWatermelonPosition() {
			var watermelon = document.getElementById("watermelon");
			var randomTop = Math.floor(Math.random() * window.innerHeight * 0.5) + window.innerHeight * 0.2;
			var randomLeft = Math.floor(Math.random() * window.innerWidth * 0.5) + window.innerWidth * 0.2;
			watermelon.style.top = randomTop + "px";
			watermelon.style.left = randomLeft + "px";
		}
		
		// ゲーム開始時に呼び出される関数
		function startGame() {
			setWatermelonPosition();
			var player = document.createElement("span");
			player.id = "player";
			player.textContent = "🥷";
			document.body.appendChild(player);
		}
		
		// スイカを割ったときに呼び出される関数
		function breakWatermelon() {
			var watermelon = document.getElementById("watermelon");
			watermelon.style.visibility = "hidden";
			var player = document.getElementById("player");
			player.style.visibility = "hidden";
			var result = document.getElementById("result");
			result.textContent = "スイカを割った！";
			result.style.display = "block";
		}
		
		window.onload = function() {
			startGame();
			var watermelon = document.getElementById("watermelon");
			watermelon.addEventListener("click", breakWatermelon);
			var result = document.getElementById("result");
			result.addEventListener("click", function() {
				window.location.reload();
			});
		}
	</script>
</head>
<body>
	<div id="watermelon">🍉</div>
	<div id="result"></div>
</body>
</html>