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

No:2468

152

←

Prev Next

→

A game where we must be a werewolf at night and da..ALL
Developer User3408｜Date and time 23/6/21 13:53:49
Build time 108.171 sec｜Game capacity 9.448KB｜

Script

y buscar refugio seguro durante el día.

Bienvenido a Manwolph

Eres un hombre lobo en busca de criminales que matar durante la noche, pero durante el día debes mantener tu secreto y evitar que te descubran. Además, ten cuidado con la organización que caza a los hombres lobo, ¡pueden cazarte en cualquier momento!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

y buscar refugio seguro durante el día.

<!DOCTYPE html>
<html>
<head>
	<title>Manwolph - Juego de hombres lobo!</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
			background-color: #333;
			color: #fff;
		}
		
		.game-container {
			display: flex;
			flex-flow: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
			text-align: center;
		}
		
		h1 {
			font-size: 3rem;
			margin-top: 0;
		}
		
		p {
			font-size: 1.2rem;
		}
		
		button {
			font-size: 1.2rem;
			padding: 1rem;
			margin-top: 1rem;
			background-color: #fff;
			color: #333;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}
		
		button:hover {
			background-color: #eee;
		}
		
		.hidden {
			display: none;
		}
		
		#wolf-image {
			margin-top: 3rem;
			font-size: 10rem;
		}
		
		#game-over-image {
			margin-top: 3rem;
			font-size: 10rem;
			color: red;
		}
		
		#success-image {
			margin-top: 3rem;
			font-size: 10rem;
			color: green;
		}
		
		#night-message {
			color: yellow;
			font-size: 1.5rem;
			margin-top: 2rem;
		}
		
		#day-message {
			color: blue;
			font-size: 1.5rem;
			margin-top: 2rem;
		}
		
		#criminals-count {
			font-size: 1.2rem;
			margin-top: 1rem;
		}
		
		#hunters-count {
			font-size: 1.2rem;
			margin-top: 1rem;
		}
		
		#health-bar {
			position: absolute;
			bottom: 1rem;
			left: 1rem;
			background-color: #222;
			height: 3rem;
			width: 30vw;
			border-radius: 1.5rem;
			box-shadow: 0 0 0.5rem rgba(255, 0, 0, 0.5) inset;
			overflow: hidden;
		}
		
		#health-bar .progress {
			height: 3rem;
			background-color: #f00;
			border-radius: 1.5rem;
			transition: width 0.2s ease-out;
		}
		
		#refugee-container {
			display: flex;
			flex-flow: column;
			align-items: center;
			margin-top: 3rem;
		}
		
		#refugee-image {
			font-size: 10rem;
			color: #ddd;
		}
		
		#refugee-message {
			font-size: 2rem;
			color: #ddd;
			margin-top: 1rem;
			text-align: center;
		}
		
		#refugee-button {
			margin-top: 1rem;
		}
	</style>
</head>
<body>
	<div class="game-container"
	     id="game-container">
		<div class="game-over hidden"
		     id="game-over">
			<h1>Game Over</h1>
			<div id="game-over-image">
				👻
			</div>
			<p>
				Te han cazado los cazadores de hombres lobo! 😢
			</p>
			<button onclick="resetGame()">Volver a jugar</button>
		</div>
		<div class="success hidden"
		     id="success">
			<h1>Éxito</h1>
			<div id="success-image">
				🤑
			</div>
			<p>
				Has matado a todos los criminales! 🎉
			</p>
			<button onclick="resetGame()">Volver a jugar</button>
		</div>
		<h1>Bienvenido a Manwolph</h1>
		<p>
			Eres un hombre lobo en busca de criminales que matar durante la noche, pero durante el día debes mantener tu secreto y evitar que te descubran. Además, ten cuidado con la organización que caza a los hombres lobo, ¡pueden cazarte en cualquier momento!
		</p>
		<button onclick="startGame()">Comenzar</button>
		<div class="hidden"
		     id="game-play">
			<div id="wolf-image">
				🐺
			</div>
			<div id="night-message"
			     class="hidden">
				Es de noche, ve a cazar criminales.
			</div>
			<div id="day-message"
			     class="hidden">
				Es de día, mantén tu secreto.
			</div>
			<div id="criminals-count">
				Criminales restantes: <span id="criminals">10</span>
			</div>
			<div id="hunters-count">
				Cazadores restantes: <span id="hunters">3</span>
			</div>
			<div id="health-bar">
				<div class="progress"
				     id="health-progress">
				</div>
			</div>
		</div>
	</div>
	<div class="hidden"
	     id="refugee-container">
		<div id="refugee-image">
			🏠
		</div>
		<div id="refugee-message">
			Has encontrado refugio seguro.
		</div>
		<button id="refugee-button"
		        onclick="continueGame()">Continuar</button>
	</div>
	
	<script>
		// Variables del juego
		let health = 100;
		let isNight = false;
		let criminalsLeft = 10;
		let huntersLeft = 3;
		let isOver = false;
		let isRefugee = false;
		
		// Elementos HTML
		const gameOver = document.getElementById('game-over');
		const success = document.getElementById('success');
		const wolfImage = document.getElementById('wolf-image');
		const nightMessage = document.getElementById('night-message');
		const dayMessage = document.getElementById('day-message');
		const healthProgress = document.getElementById('health-progress');
		const criminals = document.getElementById('criminals');
		const hunters = document.getElementById('hunters');
		const refugeeContainer = document.getElementById('refugee-container');
		
		// Función para iniciar el juego
		function startGame() {
			// Muestra elementos del juego
			document.getElementById('game-play').classList.remove('hidden');
			// Muestra mensaje para ir a cazar
			isNight = true;
			nightMessage.classList.remove('hidden');
			dayMessage.classList.add('hidden');
			// Actualiza barra de salud
			updateHealthBar();
		}
		
		// Función para continuar juego después de refugiarse
		function continueGame() {
			// Oculta mensaje de refugio
			refugeeContainer.classList.add('hidden');
			isRefugee = false;
			// Muestra mensaje de día o noche
			if (isNight) {
				nightMessage.classList.remove('hidden');
			} else {
				dayMessage.classList.remove('hidden');
			}
		}
		
		// Función para actualizar la barra de salud
		function updateHealthBar() {
			healthProgress.style.width = `${health}%`;
			if (health <= 0) {
				// Si la barra de salud llega a cero, el juego se acaba
				gameOverGame();
			}
		}
		
		// Función para cuando el juego se acaba
		function gameOverGame() {
			isOver = true;
			// Oculta elementos del juego
			document.getElementById('game-play').classList.add('hidden');
			if (huntersLeft > 0) {
				// Si el jugador fue cazado por los cazadores de hombres lobo, muestra pantalla de Game Over
				gameOver.classList.remove('hidden');
			} else {
				// Si el jugador mató a todos los criminales, muestra pantalla de Éxito
				success.classList.remove('hidden');
			}
		}
		
		// Función para reiniciar el juego
		function resetGame() {
			health = 100;
			isNight = false;
			criminalsLeft = 10;
			huntersLeft = 3;
			isOver = false;
			isRefugee = false;
			// Oculta mensajes de noche o día
			nightMessage.classList.add('hidden');
			dayMessage.classList.add('hidden');
			// Oculta elementos de éxito y game over
			gameOver.classList.add('hidden');
			success.classList.add('hidden');
			// Actualiza elementos del juego
			criminals.textContent = 10;
			hunters.textContent = 3;
			updateHealthBar();
			// Muestra botón para volver a empezar
			document.getElementById('game-play').classList.add('hidden');
			document.querySelector('button').textContent = 'Comenzar de nuevo';
			document.querySelector('button').onclick = startGame;
		}
		
		// Función para cazar un criminal
		function hunt() {
			if (criminalsLeft > 0) {
				// Si aún quedan criminales por cazar
				criminalsLeft--;
				criminals.textContent = criminalsLeft;
				if (criminalsLeft === 0) {
					// Si no quedan criminales, el jugador ha ganado
					gameOverGame();
				}
			} else {
				// Si no quedan criminales, no se puede cazar más
				alert('Ya no quedan criminales por cazar!');
			}
		}
		
		// Función para huir de los cazadores de hombres lobo
		function flee() {
			if (huntersLeft > 0) {
				// Si todavía quedan cazadores, disminuye la barra de salud y quita uno
				health -= 20;
				huntersLeft--;
				hunters.textContent = huntersLeft;
				updateHealthBar();
			} else {
				// Si no quedan cazadores, el jugador ha ganado
				gameOverGame();
			}
		}
		
		// Función para refugiarse de los cazadores de hombres lobo
		function refuge() {
			// Si el jugador todavía no se refugia
			if (!isRefugee) {
				// Se refugia y aumenta la barra de salud
				isRefugee = true;
				health += 25;
				if (health > 100) {
					health = 100;
				}
				updateHealthBar();
				// Muestra mensaje de refugio
				refugeeContainer.classList.remove('hidden');
			} else {
				// Si ya se refugió, no puede hacerlo de nuevo
				alert('Ya estás en un lugar seguro!');
			}
		}
		
		// Evento de tecla presionada
		window.addEventListener('keydown', function(event) {
			// Si el juego no ha acabado
			if (!isOver) {
				if (event.key === 'h') {
					// Si el jugador presiona 'h', caza un criminal
					if (isNight) {
						hunt();
					} else {
						alert('No puedes cazar criminales de día!');
					}
				} else if (event.key === 'f') {
					// Si el jugador presiona 'f', huye de los cazadores de hombres lobo
					if (!isNight) {
						alert('No estás siendo perseguido!');
					} else {
						flee();
					}
				} else if (event.key === 'r') {
					// Si el jugador presiona 'r', se refugia de los cazadores de hombres lobo
					if (!isNight) {
						alert('No puedes refugiarte de día!');
					} else {
						refuge();
					}
				} else {
					alert('Presiona h para cazar, f para huir o r para refugiarte!');
				}
			}
		});
		
		// Evento de cambio de hora del día (de noche a día o de día a noche)
		setInterval(function() {
			if (!isRefugee) {
				isNight = !isNight;
				if (isNight) {
					nightMessage.classList.remove('hidden');
					dayMessage.classList.add('hidden');
				} else {
					nightMessage.classList.add('hidden');
					dayMessage.classList.remove('hidden');
				}
			}
		}, 5000);
	</script>
</body>
</html>