Pixels fighting, stay in the box's game

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

No:37369

←

Prev Next

→

Pixels fighting, stay in the box
Developer User17064｜Date and time 24/1/21 2:41:48
Build time 6.893 sec｜Game capacity 2.267KB｜

Script

Sure! Here's an example of a simple game where the objective is to keep the pixels inside a box using smartphone operations. The game uses pictograms and is implemented as a single HTML file with JavaScript enclosed in script tags:

In this game, you'll see a box as the game area and a single black pixel inside it. The objective is to keep the pixel within the box by touching and dragging it using smartphone touch events. If the pixel goes outside the box, it turns red. Otherwise, it stays black. Simply save the above code into an HTML file and open it in a smartphone browser to play the game.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pixels Fighting</title>
  <style>
    #game-box {
      width: 300px;
      height: 300px;
      border: 1px solid black;
      position: relative;
      overflow: hidden;
    }

.pixel {
      width: 20px;
      height: 20px;
      background-color: black;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="game-box">
    <div class="pixel"></div>
  </div>

return (
        pixelRect.top >= boxRect.top &&
        pixelRect.bottom <= boxRect.bottom &&
        pixelRect.left >= boxRect.left &&
        pixelRect.right <= boxRect.right
      );
    }

// Function to handle touch events
    function handleTouch(event) {
      event.preventDefault(); // Prevent scrolling

const touch = event.changedTouches[0]; // Only consider the first touch event
      const pixel = document.getElementsByClassName('pixel')[0];

pixel.style.top = touch.clientY + 'px';
      pixel.style.left = touch.clientX + 'px';

if (!isInsideBox(pixel)) {
        pixel.style.backgroundColor = 'red';
      } else {
        pixel.style.backgroundColor = 'black';
      }
    }

// Start the game
    document.addEventListener('DOMContentLoaded', function() {
      const pixel = document.getElementsByClassName('pixel')[0];
      pixel.addEventListener('touchmove', handleTouch);
    });
  </script>
</body>
</html>
```

Simply save the above code into an HTML file and open it in a smartphone browser to play the game.