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

No:2839

3005

←

Prev Next

→

Racing games🚣🚣🚣🏻🚣🏼🚣🏽🚣🏽‍♂ ️🚣🏾🚣🏿🚣🚣‍♂️🚣🏻‍♂️🚣🏼‍♂ ️🚣🏽‍♂..ALL
Developer anonymous｜Date and time 70/1/1 9:34:14
Build time unknown sec｜Game capacity 2.054KB｜

Script

レースゲーム🚣

ボートを操作して、ゴールまで競争しよう！

🚣

🏁

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>レースゲーム🚣</title>
</head>
<body>
	<h1>レースゲーム🚣</h1>
	<p>ボートを操作して、ゴールまで競争しよう！</p>
	<div id="gameArea">
		<div id="boat" style="position:absolute; left: 10px; top: 200px;">🚣</div>
		<div id="goal" style="position:absolute; right: 10px; top: 200px;">🏁</div>
	</div>
	<script>
		// ボートの初期位置
		let boatPosition = 10;

// ボートを動かす
		function moveBoat(event) {
			// スマホの場合、タッチした位置までボートを移動させる
			if(event.type == "touchmove") {
				event.preventDefault();
				let touchX = event.touches[0].clientX;
				if(touchX < boatPosition) {
					boatPosition -= 10;
				} else {
					boatPosition += 10;
				}
			} else {
				// キーボードの場合、左右キーでボートを移動させる
				if(event.keyCode == 37) {
					boatPosition -= 10;
				} else if (event.keyCode == 39) {
					boatPosition += 10;
				}
			}

// ボートが画面外に出さないようにする
			if(boatPosition < 0) {
				boatPosition = 0;
			} else if(boatPosition > document.getElementById("gameArea").clientWidth - document.getElementById("boat").clientWidth) {
				boatPosition = document.getElementById("gameArea").clientWidth - document.getElementById("boat").clientWidth;
			}

// ボートを移動させる
			document.getElementById("boat").style.left = boatPosition + "px";

// ゴールに到達した場合、ゲームクリア
			if(boatPosition + document.getElementById("boat").clientWidth >= document.getElementById("goal").offsetLeft) {
				alert("ゴール！おめでとう！");
				window.location.reload();
			}
		}

// キーボードの左右キーを押した時にボートを動かす
		document.addEventListener("keydown", moveBoat);

// スマホの場合、タッチした位置までボートを移動させる
		document.addEventListener("touchstart", moveBoat);
		document.addEventListener("touchmove", moveBoat);
	</script>
</body>
</html>