Small World 🌏. Going by boat: 🚣‍♀'s game

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

No:6509

683

←

Prev Next

→

Small World 🌏. Going by boat: 🚣‍♀
Developer User3891｜Date and time 23/7/2 15:57:15
Build time 15.297 sec｜Game capacity 1.509KB｜

Script

以下は、要求された条件に基づいて作成されたHTMLファイルです。このプログラムでは、スマートフォンの画面上で船が進むゲームを楽しむことができます。

🚣‍♀️

このプログラムでは、船の絵文字（🚣‍♀️）が画面上をアニメーションで移動します。船をクリックすると、船のアニメーションが一時停止し、メッセージが表示されます。また、船が目的地に到着すると、別のメッセージが表示されます。これにより、船で進むというゲーム性が実現されています。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
	<title>小さな世界</title>
	<style>
		.container {
			width: 100%;
			height: 100vh;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

.boat {
			font-size: 60px;
			cursor: pointer;
			animation: boatAnimation 2s linear infinite;
		}

@keyframes boatAnimation {
			0% { transform: translateX(-100%); }
			100% { transform: translateX(100%); }
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="boat">🚣‍♀️</div>
		<script>
			const boat = document.querySelector('.boat');

boat.addEventListener('click', () => {
				boat.style.animationPlayState = 'paused';
				alert("船が停止しました！");
			});

boat.addEventListener('animationend', () => {
				alert("船が目的地に到着しました！");
			});
		</script>
	</div>
</body>
</html>
```