watermelon splitting (game)'s game

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

No:3593

1603

←

Prev Next

→

watermelon splitting (game)
Developer User3694｜Date and time 23/6/25 18:51:10
Build time 25.28 sec｜Game capacity 3.205KB｜

Script

←

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.0">
	<style>
		body {
			background-color: #70c1b3;
			text-align: center;
			font-family: Arial, sans-serif;
			font-size: 1.5rem;
		}
		#game-board {
			margin: auto;
			width: 80%;
			height: 40rem;
			background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/96/watermelon_1f349.png');
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
			position: relative;
		}
		#game-board:hover {
			cursor: pointer;
		}
		#player {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translate(-50%, 0);
			width: 5rem;
			height: 5rem;
			background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/96/baby_1f476.png');
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
			transition: all 0.3s;
		}
		#player:hover {
			background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/96/baby-bottle_1f37c.png');
			transition: all 0.3s;
		}
	</style>
</head>
<body>
	<div id="game-board"></div>
	<div id="player"></div>

// プレイヤーの位置を変更する関数
		function movePlayer(event) {
			let player = document.querySelector("#player");
			player.style.left = event.touches[0].clientX + "px";
		}

// スイカを割る関数
		function cutWatermelon(event) {
			if (isWatermelonCut) {
				return;
			}
			let player = document.querySelector("#player");
			let x = player.offsetLeft;
			let y = player.offsetTop;
			let watermelonX = watermelonPosition.x;
			let watermelonY = watermelonPosition.y;
			let distance = Math.sqrt((x - watermelonX)**2 + (y - watermelonY)**2);
			if (distance < 100) {
				isWatermelonCut = true;
				document.querySelector("#game-board").style.backgroundImage = "url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/96/watermelon-piece_1f348.png')";
				alert("スイカを割りました！おめでとう！");
			}
		}

// 初期化する関数
		function init() {
			let gameBoard = document.querySelector("#game-board");
			let player = document.querySelector("#player");

// スイカの位置をランダムに決定する
			let positionX = Math.floor(Math.random() * gameBoard.offsetWidth);
			let positionY = Math.floor(Math.random() * gameBoard.offsetHeight);
			watermelonPosition = {x: positionX, y: positionY};

// プレイヤーをタッチ操作可能にする
			gameBoard.addEventListener("touchmove", movePlayer);
			gameBoard.addEventListener("touchend", cutWatermelon);

// プレイヤーとスイカの初期位置を設定する
			player.style.left = gameBoard.offsetWidth/2 + "px";
			player.style.bottom = "0";
			player.style.transform = "translate(-50%, 0)";
			gameBoard.style.backgroundPosition = positionX + "px " + positionY + "px";
		}

init();
	</script>

</body>
</html>