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

No:89

329

←

Prev Next

→

stealth game
Developer User1742｜Date and time 23/5/13 19:43:15
Build time 115.736 sec｜Game capacity 4.806KB｜

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">
	<title>ステルスゲーム</title>
	<style>
		body {
			background-color: #1A1A1D;
			color: #FFF;
			font-family: Arial, sans-serif;
			text-align: center;
			margin: 0;
			padding: 0;
		}

#map {
			width: 100vw;
			height: 80vh;
			background-color: #0099cc;
			margin: 20px auto;
			position: relative;
		}

#player {
			position: absolute;
			top: 30%;
			left: 30%;
			font-size: 3em;
			opacity: 0.7;
		}

.enemy {
			position: absolute;
			width: 50px;
			height: 50px;
			background-color: #ff4444;
			border-radius: 50%;
			opacity: 0.7;
			transition: all 0.5s ease;
		}

.hidden {
			display: none;
		}

.visible {
			display: block;
		}

h1 {
			font-size: 2.5em;
			margin-top: 40px;
			margin-bottom: 20px;
		}

button {
			background-color: #0099cc;
			color: #FFF;
			border: none;
			font-size: 1.5em;
			border-radius: 5px;
			padding: 10px 20px;
			cursor: pointer;
			transition: all 0.5s ease;
		}

button:hover {
			background-color: #006699;
		}

@media screen and (max-width: 768px) {
			#map {
				height: 50vh;
			}

h1 {
				font-size: 2em;
			}
		}
	</style>
</head>
<body>
	<div id="map">
		<div class="enemy" id="enemy1"></div>
		<div class="enemy" id="enemy2"></div>
		<div class="enemy" id="enemy3"></div>
		<div class="enemy" id="enemy4"></div>
		<div class="enemy" id="enemy5"></div>
		<div class="enemy" id="enemy6"></div>
		<div class="enemy" id="enemy7"></div>
		<div class="enemy" id="enemy8"></div>
		<div class="enemy" id="enemy9"></div>
		<div class="enemy" id="enemy10"></div>
		<div class="enemy" id="enemy11"></div>
		<div class="enemy" id="enemy12"></div>
		<div id="player">😎</div>
	</div>

<h1 id="title">ステルスゲーム</h1>

let enemyPositions = [];
		let playerPosition;

startButton.addEventListener('click', startGame);

function startGame() {
			title.classList.add('hidden');
			startButton.classList.add('hidden');
			moveEnemies();

map.addEventListener('click', movePlayer);
		}

function moveEnemies() {
			for (let i = 0; i < enemies.length; i++) {
				let enemy = enemies[i];

let randomX = Math.floor(Math.random() * (map.offsetWidth - enemy.offsetWidth));
				let randomY = Math.floor(Math.random() * (map.offsetHeight - enemy.offsetHeight));
				let newPosition = {
					x: randomX,
					y: randomY
				};

enemy.style.transform = `translate(${newPosition.x}px, ${newPosition.y}px)`;

enemyPositions.push(newPosition);

setTimeout(() => {
					enemy.classList.add('visible');
				}, i * 1000);
			}
		}

function movePlayer(event) {
			let newPosition = {
				x: event.clientX - player.offsetWidth / 2,
				y: event.clientY - player.offsetHeight / 2
			};

if (newPosition.x < 0) {
				newPosition.x = 0;
			} else if (newPosition.x > map.offsetWidth - player.offsetWidth) {
				newPosition.x = map.offsetWidth - player.offsetWidth;
			}

if (newPosition.y < 0) {
				newPosition.y = 0;
			} else if (newPosition.y > map.offsetHeight - player.offsetHeight) {
				newPosition.y = map.offsetHeight - player.offsetHeight;
			}

player.style.transform = `translate(${newPosition.x}px, ${newPosition.y}px)`;

playerPosition = newPosition;

checkCollision();
		}

function checkCollision() {
			for (let i = 0; i < enemies.length; i++) {
				let enemy = enemies[i];
				let enemyPosition = enemyPositions[i];

let dx = playerPosition.x - enemyPosition.x;
				let dy = playerPosition.y - enemyPosition.y;
				let distance = Math.sqrt(dx * dx + dy * dy);

if (distance <= player.offsetWidth) {
					endGame(false);
					return;
				}
			}

let remainingEnemies = Array.from(enemies).filter(enemy => enemy.classList.contains('visible'));

if (remainingEnemies.length === 0) {
				endGame(true);
			}
		}

function endGame(won) {
			map.removeEventListener('click', movePlayer);

if (won) {
				title.innerHTML = 'You Win! 🥳';
			} else {
				title.innerHTML = 'Game Over 😭';
			}

title.classList.remove('hidden');
			startButton.classList.remove('hidden');

for (let i = 0; i < enemies.length; i++) {
				let enemy = enemies[i];

setTimeout(() => {
					enemy.style.transform = `translate(${enemyPositions[i].x}px, ${enemyPositions[i].y}px)`;
					enemy.classList.remove('visible');
				}, i * 100);
			}

player.style.transform = `translate(${playerPosition.x}px, ${playerPosition.y}px)`;
			enemyPositions = [];
			playerPosition = null;
		}
	</script>
</body>
</html>