Intercalar elementos horizontalmente's game

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

No:27254

←

Prev Next

→

Intercalar elementos horizontalmente
Developer User13571｜Date and time 23/12/5 20:59:58
Build time 36.738 sec｜Game capacity 2.035KB｜

Script

Aquí tienes un ejemplo de un juego implementado como un archivo HTML único, que utiliza JavaScript y está contenido dentro de etiquetas de script. El juego se puede jugar como un juego terminado y se adapta a la operación en un smartphone. También se utilizan pictogramas para representar los elementos del juego.

🌲

🏰

🚗

⚽

🎮

Este ejemplo crea un contenedor (`div` con el id "container") que contiene varios elementos (`div` con la clase "element"), representados por pictogramas. Los elementos se muestran horizontalmente utilizando CSS flexbox. Al hacer clic en un elemento, intercambiará su posición con el elemento adyacente en el orden horizontal. Esto permite intercalar los elementos horizontalmente cuando se juega el juego en un smartphone.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Juego de Pictogramas</title>
  <style>
    #container {
      display: flex;
      flex-direction: row;
    }

.element {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="element">🌲</div>
    <div class="element">🏰</div>
    <div class="element">🚗</div>
    <div class="element">⚽</div>
    <div class="element">🎮</div>
  </div>
  
  <script>
    // Puedes implementar la lógica del juego aquí

// Por ejemplo, intercambiar los elementos horizontalmente al hacer clic

const container = document.getElementById('container');
    const elements = document.getElementsByClassName('element');

for (let i = 0; i < elements.length; i++) {
      elements[i].addEventListener('click', swapElements);
    }

function swapElements() {
      const index1 = Array.from(elements).indexOf(this);
      const index2 = index1 + 1 === elements.length ? 0 : index1 + 1;
      
      container.insertBefore(elements[index2], elements[index1]);
    }
  </script>
</body>
</html>
```