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

No:15258

Create a game based off chemistry
Developer User6636｜Date and time 23/9/8 5:58:29
Build time 22.667 sec｜Game capacity 4.382KB｜

Script

Sure! Here's a simple chemistry game implemented as a single HTML file using JavaScript. The game is a matching game where players have to match elements with their corresponding symbols. The game is designed for smartphone operation and uses pictograms for elements.

Chemistry Match Game

To play the game, simply copy the entire code and save it as a `.html` file. You can then open the file in a web browser on your smartphone and start playing. The goal is to match all the elements with their corresponding symbols by selecting two cells at a time. Please note that this is just a basic example, and you can enhance and customize the game further based on your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Chemistry Match Game</title>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
    }
    
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 30px;
    }
    
    .cell {
      width: 80px;
      height: 80px;
      margin: 10px;
      border: 2px solid black;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      cursor: pointer;
    }
    
    .matched {
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <h1>Chemistry Match Game</h1>
  
  <div class="container">
    <div class="cell" onclick="selectElement(0)"></div>
    <div class="cell" onclick="selectElement(1)"></div>
    <div class="cell" onclick="selectElement(2)"></div>
    <div class="cell" onclick="selectElement(3)"></div>
    <div class="cell" onclick="selectElement(4)"></div>
    <div class="cell" onclick="selectElement(5)"></div>
    <div class="cell" onclick="selectElement(6)"></div>
    <div class="cell" onclick="selectElement(7)"></div>
  </div>
  
  <script>
    // Define the elements and their corresponding symbols
    const elements = [
      { symbol: "H", matched: false },
      { symbol: "O", matched: false },
      { symbol: "C", matched: false },
      { symbol: "Na", matched: false },
      { symbol: "Cl", matched: false },
      { symbol: "Mg", matched: false },
      { symbol: "N", matched: false },
      { symbol: "S", matched: false },
    ];
    
    let firstSelection = null;
    let secondSelection = null;
    
    // Shuffle the elements randomly
    shuffle(elements);
    
    // Render the elements in the cells
    render();
  
    function shuffle(array) {
      for (let i = array.length - 1; i > 0; --i) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
    }
    
    function render() {
      const container = document.querySelector(".container");
      
      container.innerHTML = "";
      
      elements.forEach((element, index) => {
        const cell = document.createElement("div");
        cell.classList.add("cell");
        
        if (element.matched) {
          cell.classList.add("matched");
        }
        
        cell.innerText = element.symbol;
        
        container.appendChild(cell);
      });
    }
    
    function selectElement(index) {
      const selectedElement = elements[index];
      
      if (selectedElement.matched) return; // Element is already matched
      
      if (!firstSelection) {
        // First selection
        firstSelection = selectedElement;
        highlightCell(index);
      } else if (!secondSelection) {
        // Second selection
        if (selectedElement === firstSelection) return; // Same cell selected twice
        
        secondSelection = selectedElement;
        highlightCell(index);
        
        checkMatch();
        setTimeout(resetSelections, 1000);
      }
    }
    
    function highlightCell(index) {
      const cells = document.querySelectorAll(".cell");
      cells[index].classList.add("matched");
    }
    
    function checkMatch() {
      if (firstSelection && secondSelection) {
        if (firstSelection.symbol === secondSelection.symbol) {
          firstSelection.matched = true;
          secondSelection.matched = true;
          render();
        }
      }
    }
    
    function resetSelections() {
      firstSelection = null;
      secondSelection = null;
      
      const cells = document.querySelectorAll(".cell");
      cells.forEach(cell => cell.classList.remove("matched"));
    }
  </script>
</body>
</html>
```

Please note that this is just a basic example, and you can enhance and customize the game further based on your requirements.