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

No:3472

1820

←

Prev Next

→

The player is in a corridor with a big snail. When..ALL
Developer User3709｜Date and time 23/6/25 6:28:31
Build time 19.661 sec｜Game capacity 1.877KB｜

Script

Snail Game

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Snail Game</title>
	<style>
		body {
			background-color: #61a5de;
			font-family: Arial, sans-serif;
		}
		h1 {
			text-align: center;
			font-size: 4em;
			color: white;
			margin-top: 100px;
		}
		#corridor {
			position: relative;
			margin: auto;
			margin-top: 30px;
			height: 300px;
			width: 600px;
			background-image: url("corridor.jpg");
			background-size: cover;
		}
		#player {
			position: absolute;
			bottom: 0;
			height: 50px;
			width: 50px;
			background-image: url("player.png");
			background-size: cover;
		}
		#snail {
			position: absolute;
			bottom: 0;
			right: 50px;
			height: 100px;
			width: 100px;
			background-image: url("snail.png");
			background-size: cover;
			animation: snail-move 6s linear infinite;
		}
		@keyframes snail-move {
			0% {
				right: 50px;
			}
			50% {
				right: 250px;
			}
			100% {
				right: 50px;
			}
		}
	</style>
	<script>
		window.onload = function() {
			var snail = document.getElementById("snail");
			var player = document.getElementById("player");
			var snailLooking = true; // snail starts looking
			var interval = setInterval(function() {
				if (snailLooking) {
					// player must stand still when snail is looking
					player.style.animation = "none";
				} else {
					// player can move when snail is not looking
					player.style.animation = "player-move 1s linear infinite";
				}
				snailLooking = !snailLooking; // toggle snail's looking
			}, 3000); // change every 3 seconds

document.addEventListener("click", function() {
				if (snailLooking) {
					// player dies if they move while snail is looking
					alert("You're dead!");
					clearInterval(interval);
					location.reload();
				}
			});
		}
	</script>
</head>
<body>
	<h1>Snail Game</h1>
	<div id="corridor">
		<div id="snail"></div>
		<div id="player"></div>
	</div>
</body>
</html>