Find the misplaced pixels's game

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

No:37387

←

Prev Next

→

Find the misplaced pixels
Developer User17064｜Date and time 24/1/21 3:08:01
Build time 11.505 sec｜Game capacity 3.708KB｜

Script

Sure! Here's an example of a game where players need to find misplaced pixels on a picture:

To use this game, you would need to replace `"emozi_all/game.png"` in the `src` attribute of the `img` tag with the path to your own image. The `misplacedPixels` array holds the positions of the misplaced pixels, and you can add more as needed. Once you find all the misplaced pixels, a congratulatory message will be displayed.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a game where players need to find misplaced pixels on a picture:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Find the Misplaced Pixels</title>
    <style>
      body {
        background-color: #f0f0f0;
        text-align: center;
        font-family: Arial, sans-serif;
      }
      #game-container {
        margin-top: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      #game-image {
        max-width: 80%;
        margin-bottom: 30px;
      }
      #result {
        margin-top: 30px;
        font-size: 18px;
      }
      .btn {
        display: inline-block;
        padding: 10px 20px;
        background-color: #4CAF50;
        color: white;
        text-decoration: none;
        font-size: 16px;
        border-radius: 4px;
        cursor: pointer;
      }
      .btn:hover {
        background-color: #45a049;
      }
    </style>
  </head>
  <body>
    <div id="game-container">
      <img id="game-image" src="path/to/your/image.png" alt="Misplaced Pixels">
      <button id="start-btn" class="btn">Start Game</button>
      <p id="result"></p>
    </div>

// Function to check if a pixel is misplaced or not
      function isPixelMisplaced(pixel, misplacedPixels) {
        for (let i = 0; i < misplacedPixels.length; i++) {
          const misplacedPixel = misplacedPixels[i];
          if (pixel.x === misplacedPixel.x && pixel.y === misplacedPixel.y) {
            return true;
          }
        }
        return false;
      }

// Function to handle the game logic
      function startGame() {
        const startBtn = document.getElementById("start-btn");
        startBtn.disabled = true; // Disable start button once clicked

const gameImage = document.getElementById("game-image");
        gameImage.style.pointerEvents = "auto"; // Enable clicking on the image

let misplacedPixelCount = 0;

// Event handler for clicking on the image
        gameImage.onclick = function(event) {
          const rect = gameImage.getBoundingClientRect();
          const clickedX = event.clientX - rect.left;
          const clickedY = event.clientY - rect.top;

// Create a pixel object with clicked coordinates
          const clickedPixel = { x: clickedX, y: clickedY };

if (isPixelMisplaced(clickedPixel, misplacedPixels)) {
            misplacedPixelCount++;
            event.target.style.opacity = "0.5"; // Dim the misplaced pixel
          }

if (misplacedPixelCount === misplacedPixels.length) {
            gameImage.style.pointerEvents = "none"; // Disable clicking on the image

// Display the result
            const result = document.getElementById("result");
            result.textContent = "Congratulations! You found all the misplaced pixels.";
          }
        };
      }

// Add event listener to start the game when the Start Game button is clicked
      const startBtn = document.getElementById("start-btn");
      startBtn.addEventListener("click", startGame);
    </script>
  </body>
</html>
```

To use this game, you would need to replace `"path/to/your/image.png"` in the `src` attribute of the `img` tag with the path to your own image. The `misplacedPixels` array holds the positions of the misplaced pixels, and you can add more as needed. Once you find all the misplaced pixels, a congratulatory message will be displayed.