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

No:25084

118

←

Prev Next

→

Alchemy
Developer User11939｜Date and time 23/11/17 7:56:33
Build time 68.921 sec｜Game capacity 2.555KB｜

Script

Sure! Here's an example of a simple alchemy game implemented as a single HTML file using JavaScript and enclosed in script tags:

Alchemy Game

🔥

💧

🍃

⚡

Drag and Drop pictograms to combine elements!

In this game, you will see four pictograms representing different elements (fire, water, plant, and lightning). You can drag and drop these pictograms onto the "result" area to combine them. When valid combinations are made, the combined result will be displayed in the "result" area. Each combination has a specific output according to the predefined map stored in the `combinations` object. The game can be played by combining different elements and observing the resulting output.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple alchemy game implemented as a single HTML file using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Alchemy Game</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      text-align: center;
    }
    
    .pictogram {
      font-size: 40px;
      cursor: pointer;
    }
    
    .result {
      font-size: 60px;
      margin: 20px;
    }
  </style>
</head>
<body>
  <h1>Alchemy Game</h1>
  
  <div class="pictogram">🔥</div>
  <div class="pictogram">💧</div>
  <div class="pictogram">🍃</div>
  <div class="pictogram">⚡</div>
  
  <h2>Drag and Drop pictograms to combine elements!</h2>
  
  <div class="result"></div>
  
  <script>
    // Map to store combinations and their results
    const combinations = {
      '🔥💧': '💨',
      '🔥🍃': '🔥',
      '🔥⚡': '⚡⚡',
      '💧🍃': '🌳',
      '💧⚡': '⚡',
      '🍃⚡': '💚'
    };
    
    // Pictogram elements
    const pictograms = Array.from(document.getElementsByClassName('pictogram'));
    const resultElement = document.querySelector('.result');
    
    // Add dragstart event listener to pictograms
    pictograms.forEach(pictogram => {
      pictogram.addEventListener('dragstart', dragStart);
    });
    
    // Add dragover and drop event listeners to result element
    resultElement.addEventListener('dragover', dragOver);
    resultElement.addEventListener('drop', drop);
    
    let currentCombination = '';
    
    function dragStart(e) {
      e.dataTransfer.setData('text/plain', e.target.innerText);
    }
    
    function dragOver(e) {
      e.preventDefault();
    }
    
    function drop(e) {
      e.preventDefault();
      const draggedPictogram = e.dataTransfer.getData('text/plain');
      const combination = currentCombination + draggedPictogram;
      if (combination in combinations) {
        currentCombination = combinations[combination];
        resultElement.innerText = currentCombination;
      }
    }
  </script>
</body>
</html>
```