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

No:3047

2816

←

Prev Next

→

Avoiding the sinking of the Titanic
Developer anonymous｜Date and time 70/1/1 9:45:29
Build time unknown sec｜Game capacity 2.729KB｜

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">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>タイタニック沈没回避</title>
</head>
<body>
	<div id="game-container">
		<h1>タイタニック沈没回避</h1>
		<div id="game-board">
			<div id="player"></div>
			<div id="boat"></div>
		</div>
		<button id="start-button">スタート</button>
		<p id="result-message"></p>
	</div>
	<style>
		#game-container {
			text-align: center;
			margin-top: 50px;
		}

#game-board {
			position: relative;
			width: 100%;
			height: 200px;
			background-color: #00ffff;
			margin: auto;
		}

#player {
			position: absolute;
			top: 150px;
			left: 50px;
			width: 50px;
			height: 50px;
			background-color: #ff00ff;
			border-radius: 50%;
		}

#boat {
			position: absolute;
			top: 100px;
			right: 50px;
			width: 100px;
			height: 100px;
			background-color: #0000ff;
			border-radius: 10px;
		}

#start-button {
			margin-top: 30px;
			padding: 10px;
			font-size: 18px;
			background-color: #ff0000;
			color: #ffffff;
			border-radius: 5px;
			border: none;
			cursor: pointer;
		}

#result-message {
			font-size: 24px;
			font-weight: bold;
			margin-top: 30px;
		}
	</style>
	<script>
		var player;
		var boat;
		var gameBoard;
		var startButton;
		var resultMessage;
		var isGameOver;

function startGame() {
			player = document.querySelector("#player");
			boat = document.querySelector("#boat");
			gameBoard = document.querySelector("#game-board");
			startButton = document.querySelector("#start-button");
			resultMessage = document.querySelector("#result-message");

player.style.left = "50px";
			boat.style.right = "50px";

startButton.style.display = "none";
			resultMessage.innerHTML = "";

gameBoard.addEventListener("click", movePlayer);
			isGameOver = false;
		}

function movePlayer(event) {
			if (isGameOver) {
				return;
			}

var x = event.clientX - gameBoard.offsetLeft;
			player.style.left = x + "px";

checkCollision();
		}

function checkCollision() {
			var playerRect = player.getBoundingClientRect();
			var boatRect = boat.getBoundingClientRect();

if (playerRect.right >= boatRect.left && playerRect.left <= boatRect.right) {
				isGameOver = true;

if (playerRect.bottom >= boatRect.top) {
					resultMessage.innerText = "タイタニックは沈没しました！";
				} else {
					resultMessage.innerText = "タイタニックを回避しました！";
				}

gameBoard.removeEventListener("click", movePlayer);
				startButton.style.display = "block";
			}
		}

startButton = document.querySelector("#start-button");

startButton.addEventListener("click", startGame);
	</script>
</body>
</html>