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

No:1241

286

←

Prev Next

→

A game where you must capture monsters with a type..ALL
Developer User3280｜Date and time 23/6/18 9:07:52
Build time 53.37 sec｜Game capacity 4.707KB｜

Script

Captura Monstruos

Agua

Fuego

Tierra

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Captura Monstruos</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body{
			margin: 0;
			padding: 0;
			background-color: #FFFBE6;
			font-family: sans-serif;
		}
		h1{
			text-align: center;
			color: #573280;
			margin-top: 20px;
		}
		.container{
			margin: auto;
			text-align: center;
			padding: 20px;
			width: 80%;
			min-width: 300px;
			background-color: #F5EFE9;
			border-radius: 10px;
			box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.2);
		}
		.monster{
			display: inline-block;
			margin: 10px;
			padding: 10px;
			background-color: #D0E8F2;
			border: 2px solid #573280;
			border-radius: 10px;
			box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
			cursor: pointer;
		}
		.monster img{
			max-width: 100px;
			max-height: 100px;
		}
		.field{
			padding: 20px;
			background-color: #F5EFE9;
			border-radius: 10px;
			box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.2);
			margin-bottom: 20px;
		}
		.field img{
			max-width: 200px;
			max-height: 200px;
		}
		.overlay{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.5);
			display: flex;
			justify-content: center;
			align-items: center;
			visibility: hidden;
			z-index: 1;
		}
		.overlay.active{
			visibility: visible;
		}
		.popup{
			background-color: #FFFBE6;
			padding: 20px;
			border-radius: 10px;
			box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.2);
			max-width: 500px;
			text-align: center;
			position: relative;
		}
		.popup h2{
			color: #573280;
			margin-top: 0;
		}
		.popup p{
			margin-top: 0;
		}
		.popup .close{
			position: absolute;
			top: 10px;
			right: 10px;
			color: #573280;
			cursor: pointer;
		}
		.popup button{
			background-color: #573280;
			color: #FFFBE6;
			padding: 10px;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			margin-top: 10px;
		}
		.popup button:hover{
			background-color: #A373B9;
		}
	</style>
</head>
<body>
	<h1>Captura Monstruos</h1>

<div class="monster" id="fire" onclick="capture('fire')">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/fire_1f525.png">
			<p>Fuego</p>
		</div>

<div class="monster" id="earth" onclick="capture('earth')">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/seedling_1f331.png">
			<p>Tierra</p>
		</div>

</div>

<div class="overlay" id="overlay">
		<div class="popup">
			<span class="close" onclick="closePopup()">×</span>
			<h2 id="popup-title"></h2>
			<img src="" id="popup-image">
			<p id="popup-message"></p>
			<button onclick="playAgain()">Jugar de nuevo</button>
		</div>
	</div>

function capture(type){
			switch(type){
				case 'water':
					capturedWater = true;
					break;
				case 'fire':
					capturedFire = true;
					break;
				case 'earth':
					capturedEarth = true;
					break;
			}

document.getElementById(type).style.display = 'none';

checkEndGame();
		}

function showPopup(title, message){
			var overlay = document.getElementById('overlay');
			var popupTitle = document.getElementById('popup-title');
			var popupImage = document.getElementById('popup-image');
			var popupMessage = document.getElementById('popup-message');

popupTitle.innerText = title;

if(capturedWater && capturedFire && capturedEarth){
				popupImage.src = 'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/sparkles_2728.png';
			}
			else{
				popupImage.src = 'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/sad-but-relieved-face_1f625.png';
			}

popupMessage.innerText = message;

overlay.classList.add('active');
		}

function closePopup(){
			var overlay = document.getElementById('overlay');
			overlay.classList.remove('active');
		}

function playAgain(){
			location.reload();
		}
	</script>

</body>
</html>