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

No:2665

1249

←

Prev Next

→

A game to merge monsters of different types but on..ALL
Developer User3408｜Date and time 23/6/22 8:37:33
Build time 52.34 sec｜Game capacity 7.109KB｜

Script

aparecerán de vez en cuando para desafiar al jugador.

Fusiona monstruos

Fuego

Agua

Tierra

Electricidad

Roca

Magia

Madera

Selecciona dos monstruos para fusionarlos

¡Un villano ha aparecido!

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

aparecerán de vez en cuando para desafiar al jugador.

<!DOCTYPE html>
<html>
<head>
	<title>Fusiona monstruos</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #333;
			color: #fff;
			font-family: Arial, sans-serif;
			font-size: 20px;
			text-align: center;
		}
		h1 {
			font-size: 50px;
			margin-top: 50px;
			margin-bottom: 20px;
		}
		button {
			background-color: #fff;
			border: none;
			border-radius: 10px;
			color: #333;
			font-size: 24px;
			margin-top: 20px;
			padding: 10px 20px;
			cursor: pointer;
		}
		.container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 50px;
			margin-bottom: 50px;
		}
		.monster {
			background-color: #fff;
			border-radius: 50%;
			color: #333;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100px;
			width: 100px;
			margin: 10px;
			cursor: pointer;
			transition: all 0.3s ease-in-out;
		}
		.monster:hover {
			transform: scale(1.1);
		}
		.monster img {
			height: 70%;
			margin-bottom: 10px;
		}
		.monster p {
			font-size: 18px;
		}
		.message {
			font-size: 24px;
			margin-top: 50px;
			margin-bottom: 20px;
		}
		.villain img {
			height: 200px;
			margin-bottom: 20px;
			-webkit-animation: villain 2s ease-in-out infinite;
			animation: villain 2s ease-in-out infinite;
		}
		@-webkit-keyframes villain {
			0% { transform: translateX(-20%); }
			50% { transform: translateX(20%); }
			100% { transform: translateX(-20%); }
		}
		@keyframes villain {
			0% { transform: translateX(-20%); }
			50% { transform: translateX(20%); }
			100% { transform: translateX(-20%); }
		}
	</style>
</head>
<body>
	<h1>Fusiona monstruos</h1>
	<div class="container">
		<div class="monster " id="fuego">
			<img src="🔥" alt="fuego">
			<p>Fuego</p>
		</div>
		<div class="monster" id="agua">
			<img src="💧" alt="agua">
			<p>Agua</p>
		</div>
		<div class="monster" id="tierra">
			<img src="🌳" alt="tierra">
			<p>Tierra</p>
		</div>
		<div class="monster" id="electricidad">
			<img src="⚡" alt="electricidad">
			<p>Electricidad</p>
		</div>
		<div class="monster" id="roca">
			<img src="🗿" alt="roca">
			<p>Roca</p>
		</div>
		<div class="monster" id="magia">
			<img src="🔮" alt="magia">
			<p>Magia</p>
		</div>
		<div class="monster" id="madera">
			<img src="🌲" alt="madera">
			<p>Madera</p>
		</div>
	</div>
	<p class="message">Selecciona dos monstruos para fusionarlos</p>
	<button id="reset">Reiniciar</button>
	<div id="villain">
		<img src="👹" alt="villano">
		<p>¡Un villano ha aparecido!</p>
	</div>
	<script>
		let selectedMonsters = [];

function resetGame() {
			let monsters = document.querySelectorAll('.monster');
			for (let i = 0; i < monsters.length; i++) {
				monsters[i].innerHTML = '';
				monsters[i].removeAttribute('id');
			}
			selectedMonsters = [];
		}

function showVillain() {
			let villain = document.getElementById('villain');
			villain.style.display = 'flex';
			setTimeout(function() {
				villain.style.display = 'none';
			}, 5000);
		}