A game where we must take care of a blue circle with eyes and mouth for which it says Im hungry or Im thirsty and it can face other circles but of other colors and after a fight it says I dont feel well and must be given medicine.'s game

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

No:1798

2466

←

Prev Next

→

A game where we must take care of a blue circle wi..ALL
Developer User3408｜Date and time 23/6/19 2:26:41
Build time 53.2 sec｜Game capacity 4.518KB｜

Script

Aquí está el código de la aplicación:

La aplicación presenta un círculo azul con ojos y boca que representa a nuestro personaje. El círculo puede decir cosas como ”Tengo hambre” o ”Tengo sed” y nosotros debemos darle de comer o beber haciendo click en él. Además, pueden aparecer círculos de otros colores que se enfrentan al nuestro en peleas. Si ganamos, nuestro círculo se siente bien y si perdemos, nuestro círculo se enferma y debemos darle medicamentos. La aplicación está diseñada para ser lo más amigable posible con dispositivos móviles, por lo que se puede jugar con un solo dedo.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

Aquí está el código de la aplicación:

<!DOCTYPE html>
<html>
<head>
	<title>Juego del círculo</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #F9F9F9;
		}
		
		.circle {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: blue;
			color: white;
			text-align: center;
			line-height: 100px;
			font-size: 24px;
			position: relative;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

.circle:after {
			content: "😀";
		}
		
		.circle.hungry:after {
			content: "🍔";
		}
		
		.circle.thirsty:after {
			content: "🍹";
		}
		
		.circle.sick:after {
			content: "🤢";
		}
		
		.circle:before {
			content: "";
			display: block;
			width: 50px;
			height: 50px;
			background: white;
			border-radius: 25px;
			position: absolute;
			top: 25%;
			left: 25%;
		}
		
		.circle.eye {
			background-color: white;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			position: absolute;
			top: 40%;
			left: 40%;
		}
		
		.circle.mouth {
			background-color: white;
			width: 50px;
			height: 10px;
			position: absolute;
			top: 70%;
			left: 25%;
		}

button {
			margin: 10px;
			padding: 10px;
			background-color: #2196F3;
			border: none;
			border-radius: 5px;
			color: white;
			font-size: 18px;
			cursor: pointer;
		}
		
	</style>
	<script>
		let circle = document.querySelector('.circle');
		let timer;
		let alive = true;
		let hungry = false;
		let thirsty = false;
		let sick = false;
		
		circle.addEventListener('click', function() {
			if (alive) {
				if (hungry) {
					circle.classList.remove('hungry');
				}
				if (thirsty) {
					circle.classList.remove('thirsty');
				}
				if (sick) {
					circle.classList.remove('sick');
				}
				hungry = false;
				thirsty = false;
				sick = false;
				say("Gracias por cuidarme");
			}
		});
		
		function say(text) {
			circle.classList.add('talking');
			circle.innerHTML = text;
			setTimeout(function() {
				circle.innerHTML = "";
				circle.classList.remove('talking');
			}, 3000);
		}
		
		function checkNeeds() {
			if (alive) {
				let random = Math.random();
				if (random < 0.3 && !hungry) {
					hungry = true;
					circle.classList.add('hungry');
					say("Tengo hambre");
				} else if (random < 0.6 && !thirsty) {
					thirsty = true;
					circle.classList.add('thirsty');
					say("Tengo sed");
				}
			}
		}
		
		function checkHealth() {
			if (alive && !sick) {
				let random = Math.random();
				if (random < 0.2) {
					sick = true;
					circle.classList.add('sick');
					say("No me siento bien");
				}
			}
		}
		
		function fight() {
			if (alive) {
				clearTimeout(timer);
				let enemies = document.querySelectorAll('.enemy');
				if (enemies.length > 0) {
					let enemy = enemies[Math.floor(Math.random()*enemies.length)];
					let health = Math.floor(Math.random()*100);
					say("Estoy peleando con el enemigo " + enemy.dataset.color);
					setTimeout(function() {
						if (health < 30) {
							alive = false;
							circle.style.animation = "die 1s";
							circle.style.backgroundColor = "gray";
							say("Perdí la pelea y estoy muerto");
						} else {
							say("Gané la pelea");
						}
						timer = setTimeout(function() {
							if (alive) {
								circle.style.backgroundColor = "blue";
								circle.style.animation = "";
								checkHealth();
								checkNeeds();
								timer = setTimeout(function() {fight();}, 10000);
							}
						}, 3000);
					}, 3000);
				} else {
					say("No hay enemigos cerca");
					timer = setTimeout(function() {fight();}, 5000);
				}
			}
		}
		
		checkNeeds();
		checkHealth();
		timer = setTimeout(function() {fight();}, 10000);
		
	</script>
</head>
<body>
	<div class="circle"></div>
	<button onclick="fight()">Pelea con enemigos</button>
	<button onclick="checkNeeds()">Checa sus necesidades</button>
</body>
</html>

La aplicación presenta un círculo azul con ojos y boca que representa a nuestro personaje. El círculo puede decir cosas como "Tengo hambre" o "Tengo sed" y nosotros debemos darle de comer o beber haciendo click en él. Además, pueden aparecer círculos de otros colores que se enfrentan al nuestro en peleas. Si ganamos, nuestro círculo se siente bien y si perdemos, nuestro círculo se enferma y debemos darle medicamentos. La aplicación está diseñada para ser lo más amigable posible con dispositivos móviles, por lo que se puede jugar con un solo dedo.