Play with elements ,water, lava, fire, blue fire and more!'s game

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

No:37507

←

Prev Next

→

Play with elements ,water, lava, fire, blue fire a..ALL
Developer User17064｜Date and time 24/1/21 4:42:01
Build time 8.398 sec｜Game capacity 2.755KB｜

Script

Sure! Here's a basic implementation of a game using JavaScript and HTML. This game allows a player to move around elements such as water, lava, fire, blue fire, etc. on a smartphone screen using pictograms. Please note that this is a minimal example and can be expanded upon further.

In this example, the game container (`game-container`) is a flex container centered within the viewport. The player can click on each element's pictogram (represented by the `img` tags) to move them to a new random position within the game container every time they are clicked. Remember to replace the placeholder `src` values in the `img` tags with the actual URLs or paths to the respective pictograms. Feel free to modify and improve this code to suit your specific game requirements and add additional functionality.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Element Game</title>
  <style>
    #game-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <img id="water" src="water_pictogram.png" alt="Water" onclick="moveElement('water')">
    <img id="lava" src="lava_pictogram.png" alt="Lava" onclick="moveElement('lava')">
    <img id="fire" src="fire_pictogram.png" alt="Fire" onclick="moveElement('fire')">
    <img id="blue-fire" src="blue_fire_pictogram.png" alt="Blue Fire" onclick="moveElement('blue-fire')">
  </div>

// Function to move an element
    function moveElement(element) {
      var currentPosition;
      
      // Depending on the selected element, update its position accordingly
      switch (element) {
        case "water":
          currentPosition = waterPosition;
          break;
        case "lava":
          currentPosition = lavaPosition;
          break;
        case "fire":
          currentPosition = firePosition;
          break;
        case "blue-fire":
          currentPosition = blueFirePosition;
          break;
        default:
          return; // Ignore unknown elements
      }

// Randomly generate new position (within the game container)
      var newX = Math.floor(Math.random() * 90);
      var newY = Math.floor(Math.random() * 90);

// Update element's position
      currentPosition.x = newX;
      currentPosition.y = newY;

// Move the element to its new position
      document.getElementById(element).style.left = newX + "%";
      document.getElementById(element).style.top = newY + "%";
    }
  </script>
</body>
</html>
```

Remember to replace the placeholder `src` values in the `img` tags with the actual URLs or paths to the respective pictograms.

Feel free to modify and improve this code to suit your specific game requirements and add additional functionality.