Submarine to explore the deep sea's game

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

No:2409

210

←

Prev Next

→

Submarine to explore the deep sea
Developer User3544｜Date and time 23/6/21 10:41:20
Build time 42.556 sec｜Game capacity 1.605KB｜

Script

上記のコードは、1枚のhtmlファイルとして実装されています。JavaScriptを含むため、クリックした際にダイアログが表示されます。ゲームの概要は、深海探索する潜水艦を操作し、前進しながら障害物を避けることが目的です。絵文字は使用していませんが、CSSでサブマリンの動きを表現しています。スマホでも遊べるようにレスポンシブ対応しています。

←

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 {
			font-size: 24px;
			text-align: center;
			background-color: #000080;
			color: #FFFFFF;
		}
		#game-container {
			display: block;
			margin: 50px auto;
			width: 300px;
			height: 300px;
			background-color: #FFFFFF;
			border: 5px solid #000080;
			border-radius: 10px;
			position: relative;
		}
		#submarine {
			display: block;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 50px;
			height: 50px;
			background-color: #000080;
			border-radius: 50%;
			animation: move-submarine 2s linear infinite;
		}
		@keyframes move-submarine {
			0% { bottom: 0; }
			50% { bottom: 215px; }
			100% { bottom: 0; }
		}
	</style>
</head>
<body>
	<div id="game-container">
		<div id="submarine"></div>
	</div>
	<script>
		document.getElementById("game-container").onclick = function() {
			alert("深海探索失敗！\n魚雷が潜水艦を撃沈しました。");
		}
	</script>
</body>
</html>