AI game creator

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

No:36579

←

Prev Next

→

Classic Achemy
Developer User16822｜Date and time 24/1/17 23:47:01
Build time 31.823 sec｜Game capacity 6.325KB｜

Script

HTML:

🔥

💧

🌱

💨

🌪️

🌊

⚡

🥚

🌙

¡Combina los elementos para formar nuevas combinaciones!

Este es un juego basado en Alchemy, donde el objetivo es combinar elementos para formar nuevas combinaciones. Los elementos se representan con pictogramas y el juego se puede jugar en un teléfono inteligente. El juego se implementa en un solo archivo HTML y utiliza JavaScript dentro de las etiquetas de script. Al iniciar el juego, verás nueve celdas vacías en la pantalla. Tienes nueve elementos diferentes que puedes arrastrar y soltar en las celdas. Para combinar elementos, simplemente haz clic en dos celdas que contengan los elementos que deseas combinar. Si la combinación es exitosa, aparecerá el nuevo elemento resultante en la celda de resultado. El objetivo final es descubrir todas las combinaciones posibles. También hay un botón "Reiniciar" para reiniciar el juego en cualquier momento.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

HTML:
```html
<!DOCTYPE html>
<html>
  <head>
    <title>Classic Alchemy</title>
    <style>
      body {
        background-color: #f5f5f5;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        font-family: Arial, sans-serif;
      }

#game-container {
        display: flex;
        flex-wrap: wrap;
        width: 320px;
        height: 480px;
        background-color: #ffffff;
        border: 2px solid #cccccc;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
      }

.cell {
        width: 64px;
        height: 64px;
        text-align: center;
        font-size: 24px;
        line-height: 64px;
      }

.element {
        cursor: pointer;
      }

.result {
        background-color: #eeeeee;
      }

.empty {
        background-color: #ffffff;
      }

.element:hover {
        background-color: #e0e0e0;
      }

.message {
        width: 100%;
        text-align: center;
        color: #888888;
        margin-bottom: 10px;
      }

.button {
        background-color: #4caf50;
        color: #ffffff;
        border: none;
        width: 120px;
        height: 40px;
        font-size: 18px;
        cursor: pointer;
      }

.button:hover {
        background-color: #45a049;
      }
    </style>
  </head>
  <body>
    <div id="game-container">
      <div class="cell empty"></div>
      <div class="cell empty"></div>
      <div class="cell empty"></div>
      <div class="cell empty"></div>
      <div class="cell empty"></div>
      <div class="cell empty"></div>
      <div class="cell empty"></div>
      <div class="cell empty"></div>
      <div class="cell empty"></div>

<div class="message">¡Combina los elementos para formar nuevas combinaciones!</div>

<button class="button" onclick="resetGame()">Reiniciar</button>
    </div>

// Combinaciones en el juego
      const combinations = [
        { recipe: [0, 1], result: 2 },
        { recipe: [0, 3], result: 4 },
        { recipe: [1, 2], result: 5 },
        { recipe: [2, 6], result: 7 },
        { recipe: [2, 7], result: 8 },
        { recipe: [3, 4], result: 6 },
        { recipe: [4, 5], result: 9 },
        { recipe: [5, 8], result: 1 },
        { recipe: [6, 7], result: 3 },
      ];

// Estado actual del juego
      let gameState = [
        null, null, null,
        null, null, null,
        null, null, null,
      ];

// Referencia a los elementos del juego
      const cells = Array.from(document.getElementsByClassName('cell'));
      const resultCell = document.getElementsByClassName('result')[0];

// Reiniciar el juego
      function resetGame() {
        for (let i = 0; i < gameState.length; i++) {
          gameState[i] = null;
          cells[i].innerHTML = '';
          cells[i].classList.add('empty');
        }
        resultCell.innerHTML = '';
        resultCell.classList.add('empty');
        showMessage('¡Combina los elementos para formar nuevas combinaciones!');
      }

// Mostrar mensaje de resultado
      function showMessage(message) {
        document.getElementsByClassName('message')[0].textContent = message;
      }

// Verificar si se ha ganado el juego
      function checkWin() {
        const combinationsFound = combinations.filter(combination => {
          const recipe = combination.recipe;
          return gameState[recipe[0]] === recipe[1] && gameState[recipe[1]] === recipe[0];
        });

if (combinationsFound.length > 0) {
          const result = combinationsFound[0].result;
          resultCell.innerHTML = elements[result].icon;
          resultCell.style.backgroundColor = elements[result].color;
          resultCell.classList.remove('empty');
          gameOver();
        }
        else {
          showMessage('¡Combina los elementos para formar nuevas combinaciones!');
        }
      }

// Manejar evento de clic en un elemento
      function handleClick(index) {
        if (gameState[index] === null) {
          cells[index].innerHTML = elements[index].icon;
          gameState[index] = index;
          cells[index].classList.remove('empty');
          checkWin();
        }
      }

// Juego terminado
      function gameOver() {
        showMessage('¡Felicidades! ¡Has completado el juego!');
      }

// Asignar evento de clic a los elementos
      cells.forEach((cell, index) => {
        cell.addEventListener('click', () => handleClick(index));
      });

// Iniciar el juego
      resetGame();
    </script>
  </body>
</html>
```

Al iniciar el juego, verás nueve celdas vacías en la pantalla. Tienes nueve elementos diferentes que puedes arrastrar y soltar en las celdas. Para combinar elementos, simplemente haz clic en dos celdas que contengan los elementos que deseas combinar. Si la combinación es exitosa, aparecerá el nuevo elemento resultante en la celda de resultado. El objetivo final es descubrir todas las combinaciones posibles.

También hay un botón "Reiniciar" para reiniciar el juego en cualquier momento.