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

No:2659

513

A game to merge monsters of different types but on..ALL
Developer User3408｜Date and time 23/6/22 8:28:13
Build time 41.087 sec｜Game capacity 6.014KB｜

Me encanta la idea de crear un juego de fusión de monstruos usando JavaScript. Aquí está mi implementación:

Monstruo Fusionador

🔥

💧

🌍

⚡️

🗿

✨

🌳

🔥

💧

🌍

⚡️

🗿

✨

🌳

🔥

💧

🌍

⚡️

🗿

✨

🌳

En este juego, hay siete tipos diferentes de monstruos: fuego, agua, tierra, electricidad, roca, magia y madera. El objetivo del juego es fusionar los monstruos para crear monstruos más fuertes, pero también hay enemigos que aparecen después de cada tres fusiones exitosas. Los enemigos pueden ser derrotados mediante la fusión, pero si el jugador falla en cualquier fusión, los monstruos seleccionados vuelven a sus lugares originales. Este juego es perfecto para jugar en smartphones ya que está diseñado con una interfaz sencilla y utiliza emojis como los monstruos. Adicionalmente, los monstruos y los enemigos están diseñados de tal forma que se pueden diferenciar fácilmente unos de otros. Espero que la gente se divierta jugando al Monstruo Fusionador y desafíen a sus amigos a superar sus puntuaciones más altas. ¡Que se diviertan fusionando monstruos! 🐲 🦖 🐉 🦕 💥

→ 　

0　

0　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

Me encanta la idea de crear un juego de fusión de monstruos usando JavaScript. Aquí está mi implementación:

```
<!DOCTYPE html>
<html>
<head>
	<title>Monstruo Fusionador</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #f6e9ce;
			font-family: Arial;
		}
		h1 {
			color: #91631c;
			text-align: center;
		}
		.container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 20px;
		}
		.monster {
			display: inline-block;
			width: 80px;
			height: 80px;
			background-color: #fff;
			border: 2px solid #91631c;
			border-radius: 50%;
			margin: 10px;
			text-align: center;
			padding-top: 20px;
			font-size: 30px;
			cursor: pointer;
		}
		.fire {
			background-color: #e25822;
			color: #fff;
			border-color: #a43e14;
		}
		.water {
			background-color: #4a90e2;
			color: #fff;
			border-color: #245ca4;
		}
		.earth {
			background-color: #b7a849;
			border-color: #7c6b2e;
		}
		.electric {
			background-color: #ffde00;
			border-color: #ffc800;
		}
		.rock {
			background-color: #8d6532;
			border-color: #56390f;
		}
		.magic {
			background-color: #8f2dac;
			color: #fff;
			border-color: #5a1c77;
		}
		.wood {
			background-color: #5cb85c;
			border-color: #3e8f3e;
		}
		.max {
			width: 120px;
			height: 120px;
			font-size: 50px;
			padding-top: 30px;
			box-shadow: 0px 0px 10px #91631c;
		}
		.enemy {
			background-color: #000;
			color: #fff;
		}
		.result {
			font-size: 20px;
			margin-top: 20px;
			text-align: center;
			color: #91631c;
		}
		.button {
			display: block;
			margin: 20px auto;
			background-color: #91631c;
			color: #fff;
			border: none;
			border-radius: 30px;
			padding: 10px 30px;
			font-size: 20px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>Monstruo Fusionador</h1>
	<div class="container">
		<div class="monster fire">🔥</div>
		<div class="monster water">💧</div>
		<div class="monster earth">🌍</div>
		<div class="monster electric">⚡️</div>
		<div class="monster rock">🗿</div>
		<div class="monster magic">✨</div>
		<div class="monster wood">🌳</div>
	</div>
	<div class="container">
		<div class="monster fire">🔥</div>
		<div class="monster water">💧</div>
		<div class="monster earth">🌍</div>
		<div class="monster electric">⚡️</div>
		<div class="monster rock">🗿</div>
		<div class="monster magic">✨</div>
		<div class="monster wood">🌳</div>
	</div>
	<div class="container">
		<div class="monster fire">🔥</div>
		<div class="monster water">💧</div>
		<div class="monster earth">🌍</div>
		<div class="monster electric">⚡️</div>
		<div class="monster rock">🗿</div>
		<div class="monster magic">✨</div>
		<div class="monster wood">🌳</div>
	</div>
	<div class="result"></div>
	<button class="button">Reiniciar</button>
	<script>
		let count = 0;
		let selected = [];

document.querySelectorAll('.monster').forEach(monster => {
			monster.addEventListener('click', () => {
				if (monster.classList.contains('selected') || monster.classList.contains('max')) {
					return;
				}
				if (selected.length === 0) {
					selected.push(monster);
					monster.classList.add('selected');
				} else {
					if ((selected[0].classList.contains('fire') && monster.classList.contains('water')) ||
						(selected[0].classList.contains('water') && monster.classList.contains('earth')) ||
						(selected[0].classList.contains('earth') && monster.classList.contains('electric')) ||
						(selected[0].classList.contains('electric') && monster.classList.contains('rock')) ||
						(selected[0].classList.contains('rock') && monster.classList.contains('magic')) ||
						(selected[0].classList.contains('magic') && monster.classList.contains('wood')) ||
						(selected[0].classList.contains('wood') && monster.classList.contains('fire'))) {
						selected[0].classList.remove('selected');
						selected.pop();
						return;
					}
					if (selected.length === 2) {
						return;
					}
					selected.push(monster);
					monster.classList.add('selected');
					if (selected[0].classList[1] === selected[1].classList[1]) {
						selected.forEach(monster => {
							monster.classList.remove('selected');
							monster.classList.add('max');
						});
						count++;
						checkEnemies();
						if (count === 21) {
							document.querySelector('.result').textContent = '¡Ganaste!';
						}
					} else {
						setTimeout(() => {
							selected.forEach(monster => {
								monster.classList.remove('selected');
							});
							selected = [];
						}, 500);
					}
				}
			});
		});

function checkEnemies() {
			const enemies = document.querySelectorAll('.enemy');
			if (count === 7) {
				enemies[0].textContent = '🎃';
			} else if (count === 14) {
				enemies[1].textContent = '👻';
			} else if (count === 21) {
				enemies[2].textContent = '💀';
				enemies.forEach(enemy => {
					enemy.classList.remove('enemy');
				});
			}
		}

document.querySelector('.button').addEventListener('click', () => {
			document.location.reload(true);
		});
	</script>
</body>
</html>
```

En este juego, hay siete tipos diferentes de monstruos: fuego, agua, tierra, electricidad, roca, magia y madera. El objetivo del juego es fusionar los monstruos para crear monstruos más fuertes, pero también hay enemigos que aparecen después de cada tres fusiones exitosas. Los enemigos pueden ser derrotados mediante la fusión, pero si el jugador falla en cualquier fusión, los monstruos seleccionados vuelven a sus lugares originales.

Este juego es perfecto para jugar en smartphones ya que está diseñado con una interfaz sencilla y utiliza emojis como los monstruos. Adicionalmente, los monstruos y los enemigos están diseñados de tal forma que se pueden diferenciar fácilmente unos de otros.

Espero que la gente se divierta jugando al Monstruo Fusionador y desafíen a sus amigos a superar sus puntuaciones más altas. ¡Que se diviertan fusionando monstruos! 🐲 🦖 🐉 🦕 💥