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

No:4367

2913

←

Prev Next

→

pirate king
Developer AI絵師｜Date and time 23/6/27 20:46:43
Build time 26.066 sec｜Game capacity 2.509KB｜

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 {
			background-color: #FDF5E6;
		}
		#map {
			width: 100%;
			height: 500px;
		}
	</style>
</head>
<body>
	<h1>海賊王の宝探しゲーム</h1>
	<p>携帯電話で利用してください。</p>
	<div id="map"></div>
	<script>
		const emojiArr = ['💰', '⚓️', '🏝️', '🦜', '🐟', '🗺️'];
		const treasure = '💰';
		let playerPosition = null;
		let treasurePosition = null;
		
		function init() {
			// プレイヤーと宝の初期位置をランダムに決定
			const map = document.getElementById("map");
			playerPosition = [Math.floor(Math.random() * map.clientWidth), Math.floor(Math.random() * map.clientHeight)];
			treasurePosition = [Math.floor(Math.random() * map.clientWidth), Math.floor(Math.random() * map.clientHeight)];
			// マップにプレイヤーと宝を表示
			map.innerHTML = `<div style="position:absolute; left:${playerPosition[0]}px; top:${playerPosition[1]}px">${emojiArr[1]}</div><div style="position:absolute; left:${treasurePosition[0]}px; top:${treasurePosition[1]}px">${treasure}</div>`;
			// 位置情報を更新するイベントを設定
			window.addEventListener("deviceorientation", updatePosition);
		}
		
		function updatePosition(event) {
			// プレイヤーの位置を端末の傾きに合わせて更新
			const newPosition = [playerPosition[0] - event.gamma, playerPosition[1] + event.beta];
			const map = document.getElementById("map");
			if (newPosition[0] < 0) {
				newPosition[0] = 0;
			} else if (newPosition[0] > map.clientWidth) {
				newPosition[0] = map.clientWidth;
			}
			if (newPosition[1] < 0) {
				newPosition[1] = 0;
			} else if (newPosition[1] > map.clientHeight) {
				newPosition[1] = map.clientHeight;
			}
			playerPosition = newPosition;
			// プレイヤーと宝の位置が近づいたらクリア
			if (Math.abs(playerPosition[0] - treasurePosition[0]) < 50 && Math.abs(playerPosition[1] - treasurePosition[1]) < 50) {
				alert("宝を発見！");
				window.removeEventListener("deviceorientation", updatePosition);
			}
			// マップにプレイヤーと宝を表示
			map.innerHTML = `<div style="position:absolute; left:${playerPosition[0]}px; top:${playerPosition[1]}px">${emojiArr[1]}</div><div style="position:absolute; left:${treasurePosition[0]}px; top:${treasurePosition[1]}px">${treasure}</div>`;
		}
		
		init();
	</script>
</body>
</html>