A rolling spike ball destroying everything and squares spawn It follows you if you touch somewhere for all devices's game

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

No:17013

189

←

Prev Next

→

A rolling spike ball destroying everything and squ..ALL
Developer User7570｜Date and time 23/9/22 6:06:01
Build time 29.824 sec｜Game capacity 3.625KB｜

Script

Sure! Here's a simple game where a rolling spike ball destroys everything in its path, and squares spawn. The spike ball will follow your touch/click on all devices. Since you mentioned using pictograms, I'll use ASCII characters to represent the game elements. To play the game, open a new HTML file, copy the code below, and save the file with a `.html` extension. Then, open the HTML file in a web browser on your smartphone.

Score: 0

When you open the HTML file in your smartphone browser, you should see a spike ball represented by a black circle at the center of the screen. By touching anywhere on the screen, the spike ball will move to that position, following your touch. Squares represented by solid blocks will spawn randomly on the screen and move downwards. When the spike ball collides with a square, the square will be destroyed, and your score will increase. Feel free to customize the appearance and game mechanics as needed. Enjoy the game!

←

Prev　Next

→ 　

Back　

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

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

To play the game, open a new HTML file, copy the code below, and save the file with a `.html` extension. Then, open the HTML file in a web browser on your smartphone.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Spike Ball Game</title>
  <style>
    body {
      overflow: hidden;
      margin: 0;
    }
  </style>
</head>
<body>
<script>
  // Game configuration
  var squareSize = 30;
  var spikeSpeed = 6;
  var score = 0;

// Create the spike ball element
  var spike = document.createElement('div');
  spike.textContent = '⚫';
  spike.style.position = 'absolute';
  spike.style.fontSize = '32px';
  spike.style.top = '50%';
  spike.style.left = '50%';
  spike.style.transform = 'translate(-50%, -50%)';
  spike.style.pointerEvents = 'none';
  document.body.appendChild(spike);

// Function to handle touch/click events
  function handleTouch(event) {
    var x = event.clientX || event.touches[0].clientX;
    var y = event.clientY || event.touches[0].clientY;
    spike.style.left = x + 'px';
    spike.style.top = y + 'px';
  }

// Add event listeners for touch/mouse click
  document.addEventListener('touchstart', handleTouch);
  document.addEventListener('mousedown', handleTouch);

// Game loop
  setInterval(function() {
    // Create a square
    var square = document.createElement('div');
    square.textContent = '■';
    square.style.position = 'absolute';
    square.style.fontSize = '32px';
    square.style.color = 'red';  // Customize square appearance as needed
    square.style.left = Math.floor(Math.random() * (window.innerWidth - squareSize)) + 'px';
    square.style.top = Math.floor(Math.random() * (window.innerHeight - squareSize)) + 'px';
    document.body.appendChild(square);

// Move the square down
    var squarePosY = parseInt(square.style.top);
    setInterval(function() {
      squarePosY += spikeSpeed;
      square.style.top = squarePosY + 'px';

// Check collision with spike ball
      var spikeRect = spike.getBoundingClientRect();
      var squareRect = square.getBoundingClientRect();
      if (
        spikeRect.x < squareRect.x + squareRect.width &&
        spikeRect.x + spikeRect.width > squareRect.x &&
        spikeRect.y < squareRect.y + squareRect.height &&
        spikeRect.y + spikeRect.height > squareRect.y
      ) {
        // Spike ball destroyed the square
        square.remove();
        score++;
        // Update score display
        document.getElementById('score').textContent = 'Score: ' + score;
      }

// Remove square when it goes out of the screen
      if (squarePosY > window.innerHeight) {
        square.remove();
      }
    }, 16); // 60 FPS

}, 1000); // Spawn a square every second
</script>

<p id="score" style="position: fixed; top: 10px; right: 10px; font-size: 24px; color: white;">Score: 0</p>

</body>
</html>
```

Feel free to customize the appearance and game mechanics as needed. Enjoy the game!