Match your color with the wall to survive monster's game

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

No:29389

←

Prev Next

→

Match your color with the wall to survive monster
Developer User12051｜Date and time 23/12/17 7:16:41
Build time 31.689 sec｜Game capacity 3.197KB｜

Script

Sure, here's a game implementation as a single HTML file using JavaScript. It is an interactive game where the player's objective is to match their character's color with the wall color to survive from the monster. The game assumes smartphone operation and incorporates pictograms for better visual representation.

Match Color and Survive!

Tap the character to change its color:

To play the game, simply copy and paste the above code into a new HTML file, save it with a .html extension, and open it using a web browser (preferably on a smartphone for optimal experience). Tap the character to cycle through different colors and try to match your character's color with the color of the wall to survive from the monster. If the character color fails to match the wall color, it's game over!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        text-align: center;
      }
      #game-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
      #wall {
        width: 200px;
        height: 200px;
        margin-bottom: 10px;
      }
      #character {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
      }
      #monster {
        width: 80px;
        height: 80px;
      }
    </style>
  </head>
  <body>
    <div id="game-container">
      <div>
        <h2>Match Color and Survive!</h2>
        <p>Tap the character to change its color:</p>
      </div>
      <div id="wall"></div>
      <div id="character"></div>
      <div id="monster"></div>
    </div>
    <script>
      // Game Logic
      var colors = ["red", "green", "blue", "yellow", "orange"];
      var currentColor = getRandomColor();
      var monsterColor = getRandomColor();

var character = document.getElementById("character");
      var wall = document.getElementById("wall");
      var monster = document.getElementById("monster");

character.style.backgroundColor = currentColor;
      wall.style.backgroundColor = currentColor;

character.addEventListener("click", function () {
        currentColor = getNextColor(currentColor);
        character.style.backgroundColor = currentColor;
      });

setInterval(checkSurvival, 1000);

function checkSurvival() {
        if (currentColor !== wall.style.backgroundColor) {
          displayGameOver();
        }
      }

function displayGameOver() {
        character.style.display = "none";
        monster.style.display = "none";
        wall.style.display = "none";

var gameOverText = document.createElement("p");
        gameOverText.innerText = "Game Over! The monster got you.";
        gameOverText.style.color = "red";
        gameOverText.style.fontWeight = "bold";
        gameOverText.style.fontSize = "24px";

document.getElementById("game-container").appendChild(gameOverText);
      }

function getRandomColor() {
        return colors[Math.floor(Math.random() * colors.length)];
      }

function getNextColor(color) {
        var currentIndex = colors.indexOf(color);
        var nextIndex = (currentIndex + 1) % colors.length;
        return colors[nextIndex];
      }
    </script>
  </body>
</html>
```