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

No:1800

2430

←

Prev Next

→

A game where we must take care of a blue circle wi..ALL
Developer User3408｜Date and time 23/6/19 2:28:38
Build time 41.067 sec｜Game capacity 3.49KB｜

Script

Cuidando al círculo azul

←

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>Cuidando al círculo azul</title>
	<style>
		body {
			background-color: #F0F0F0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100%;
		}
		
		h1 {
			color: #2F4F4F;
			font-size: 32px;
			font-weight: 500;
			margin-bottom: 32px;
		}
		
		.circle {
			width: 100px;
			height: 100px;
			background-color: blue;
			border-radius: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 24px;
			font-weight: 500;
			text-align: center;
		}
		
		.circle:before {
			content: "\1F609";
			font-size: 64px;
		}
		
		.circle.hungry:before {
			content: "\1F60B";
		}
		
		.circle.thirsty:before {
			content: "\1F376";
		}
		
		.circle.sick:before {
			content: "\1F912";
		}
		
		.circle.dead:before {
			content: "\1F480";
		}
		
		button {
			color: white;
			background-color: #2F4F4F;
			border-radius: 8px;
			font-size: 18px;
			font-weight: 500;
			padding: 8px 16px;
			margin-top: 16px;
		}
		
		.red.circle {
			background-color: red;
		}
		
		.yellow.circle {
			background-color: yellow;
		}
		
		.green.circle {
			background-color: green;
		}
	</style>
</head>
<body>
	<h1>Cuidando al círculo azul</h1>
	<div class="circle"></div>
	<button id="foodButton">Dar de comer</button>
	<button id="drinkButton">Dar de beber</button>
	<button id="medicineButton">Dar medicamentos</button>
	<script>
		const circle = document.querySelector('.circle');
		const foodButton = document.querySelector('#foodButton');
		const drinkButton = document.querySelector('#drinkButton');
		const medicineButton = document.querySelector('#medicineButton');
		
		let hunger = 0;
		let thirst = 0;
		let health = 100;
		
		function updateCircle() {
			if (hunger >= 3) {
				circle.classList.add('hungry');
				circle.innerText = '¡Tengo hambre!';
			} else if (thirst >= 3) {
				circle.classList.add('thirsty');
				circle.innerText = '¡Tengo sed!';
			} else if (health <= 0) {
				circle.classList.add('dead');
				circle.innerText = '¡Me he muerto!';
				foodButton.disabled = true;
				drinkButton.disabled = true;
				medicineButton.disabled = true;
			} else if (health <= 20) {
				circle.classList.add('sick');
				circle.innerText = 'No me siento bien';
			} else {
				circle.innerText = '';
				circle.classList.remove('hungry', 'thirsty', 'sick', 'dead');
			}
		}
		
		function feed() {
			if (health > 0) {
				hunger = 0;
				updateCircle();
			}
		}
		
		function drink() {
			if (health > 0) {
				thirst = 0;
				updateCircle();
			}
		}
		
		function giveMedicine() {
			if (health > 0) {
				health += 20;
				updateCircle();
			}
		}
		
		function fight() {
			if (health > 0) {
				const enemies = document.querySelectorAll('.circle:not(.blue)');
				if (enemies.length > 0) {
					const enemy = enemies[Math.floor(Math.random() * enemies.length)];
					enemy.classList.add('red');
					health -= 10;
					updateCircle();
					setTimeout(() => {
						enemy.classList.remove('red');
						health -= 10;
						updateCircle();
					}, 2000);
				}
			}
		}
		
		foodButton.addEventListener('click', feed);
		drinkButton.addEventListener('click', drink);
		medicineButton.addEventListener('click', giveMedicine);
		circle.addEventListener('click', fight);
		
		setInterval(() => {
			hunger++;
			thirst++;
			health--;
			updateCircle();
		}, 10000);
	</script>
</body>
</html>