AI game creator

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

No:32980

←

Prev Next

→

sandbox DNA game
Developer User15526｜Date and time 24/1/2 2:34:48
Build time 22.247 sec｜Game capacity 3.432KB｜

Script

Sure! Here's an example of a simple DNA sequencing game implemented as a single HTML file using JavaScript. This game is designed to be played on a smartphone and uses pictograms for better visibility.

Please note that the provided code is just a basic example to give you an idea. You would need to create and add appropriate pictograms (`emozi_bear.png`, `emozi_chicken.png`, etc.) in the same folder and create a `styles.css` file to style the game elements according to your preference. Remember to update the paths of `styles.css` and the pictogram images accordingly in the HTML code. Feel free to modify and enhance the game as per your requirements and game design.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Sandbox DNA Game</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="game-container">
    <div id="pictogram-container">
      <img id="current-pictogram" src="" alt="">
    </div>
    <div id="button-container">
      <button id="match-button" disabled>Match</button>
      <button id="next-button">Next</button>
    </div>
  </div>

// Shuffle the pictograms randomly
    const shuffledPictograms = shuffleArray(pictograms);

let currentPictogramIndex = 0;
    let matchedPictograms = [];

// Get the DOM elements
    const currentPictogram = document.getElementById("current-pictogram");
    const matchButton = document.getElementById("match-button");
    const nextButton = document.getElementById("next-button");

// Function to shuffle an array using Fisher-Yates algorithm
    function shuffleArray(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]];
      }
      return array;
    }

// Function to show the next pictogram in the sequence
    function showNextPictogram() {
      if (currentPictogramIndex < shuffledPictograms.length) {
        currentPictogram.src = shuffledPictograms[currentPictogramIndex].image;
        currentPictogramIndex++;
      } else {
        // End of game, display result or restart
        alert("Congratulations! You completed the DNA sequence.");
        restartGame();
      }
    }

// Function to handle matching of pictograms
    function handleMatch() {
      matchedPictograms.push(shuffledPictograms[currentPictogramIndex - 1]);

// Enable the next button and disable the match button
      nextButton.disabled = false;
      matchButton.disabled = true;
    }

// Function to handle the click event of the match button
    matchButton.addEventListener("click", handleMatch);

// Function to handle the click event of the next button
    nextButton.addEventListener("click", showNextPictogram);

// Initial setup
    showNextPictogram();

// Function to restart the game
    function restartGame() {
      currentPictogramIndex = 0;
      matchedPictograms = [];
      shuffledPictograms = shuffleArray(pictograms);

// Enable the match button and disable the next button again
      matchButton.disabled = false;
      nextButton.disabled = true;

showNextPictogram();
    }
  </script>
</body>
</html>
```

Please note that the provided code is just a basic example to give you an idea. You would need to create and add appropriate pictograms (`pictogram1.png`, `pictogram2.png`, etc.) in the same folder and create a `styles.css` file to style the game elements according to your preference.

Remember to update the paths of `styles.css` and the pictogram images accordingly in the HTML code.

Feel free to modify and enhance the game as per your requirements and game design.