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:17012

152

←

Prev Next

→

A rolling spike ball destroying everything and squ..ALL
Developer User7570｜Date and time 23/9/22 6:04:47
Build time 44.376 sec｜Game capacity 5.055KB｜

Script

Sure! Here's a simple game that fits your requirements. It features a rolling spike ball that destroys everything in its path, and squares that spawn on the screen. The spike ball follows your finger on smartphones or devices with touch support. The game is implemented as a single HTML file with embedded JavaScript code enclosed in script tags. Pictograms are used for the visual elements. Please note that due to the limitations of this text-based interface, the game won't be interactive here, but you can copy the code and run it in your browser to play the game.

To play the game, you will need to replace the image URLs (`spikeBallImg.src` and `squareImg.src`) with the actual URLs of the spike ball and square pictograms you want to use. You can also adjust the game logic and visual elements as per your preferences. Happy coding and gaming!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Spike Ball Game</title>
  <style>
    /* Set the canvas size */
    canvas {
      width: 100%;
      height: 100%;
      background-color: #eee;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// Pictograms
    var spikeBallImg = new Image();
    spikeBallImg.src = "https://example.com/spikeball.png";
    var squareImg = new Image();
    squareImg.src = "https://example.com/square.png";

// Initialize the game
    function init() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");

canvas.addEventListener("mousemove", updateMousePosition);
      canvas.addEventListener("touchmove", updateTouchPosition, { passive: false });

spikeBall = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 25,
        speed: 5
      };

startGameLoop();
    }

// Game loop
    function startGameLoop() {
      requestId = requestAnimationFrame(gameLoop);
    }

function gameLoop() {
      clearCanvas();

updateSpikeBallPosition();
      updateSquares();
      
      drawSpikeBall();
      drawSquares();

checkCollision();

requestId = requestAnimationFrame(gameLoop);
    }

// Update spike ball position based on mouse movement
    function updateMousePosition(event) {
      mouseX = event.clientX - canvas.offsetLeft;
      mouseY = event.clientY - canvas.offsetTop;
    }

// Update spike ball position based on touch movement
    function updateTouchPosition(event) {
      event.preventDefault();
      var touch = event.changedTouches[0];
      mouseX = touch.clientX - canvas.offsetLeft;
      mouseY = touch.clientY - canvas.offsetTop;
    }

// Update spike ball position and make it follow the cursor
    function updateSpikeBallPosition() {
      var dx = mouseX - spikeBall.x;
      var dy = mouseY - spikeBall.y;

if (Math.abs(dx) > spikeBall.speed) {
        spikeBall.x += dx > 0 ? spikeBall.speed : -spikeBall.speed;
      }
      if (Math.abs(dy) > spikeBall.speed) {
        spikeBall.y += dy > 0 ? spikeBall.speed : -spikeBall.speed;
      }
    }

// Update square positions and generate new squares
    function updateSquares() {
      for (var i = squares.length - 1; i >= 0; i--) {
        squares[i].y += 3; // Move square down

// If square is outside the canvas, remove it from array
        if (squares[i].y > canvas.height) {
          squares.splice(i, 1);
        }
      }

// Generate a new square every 100ms
      if (Math.random() < 0.1) {
        generateSquare();
      }
    }

// Generate a new square at a random position
    function generateSquare() {
      var randomX = Math.random() * (canvas.width - 50);
      squares.push({ x: randomX, y: -50 });
    }

// Check collision between spike ball and squares
    function checkCollision() {
      for (var i = squares.length - 1; i >= 0; i--) {
        var square = squares[i];

if (
          spikeBall.x < square.x + 50 &&
          spikeBall.x + 50 > square.x &&
          spikeBall.y < square.y + 50 &&
          spikeBall.y + 50 > square.y
        ) {
          // Collision detected, remove square from array
          squares.splice(i, 1);
        }
      }
    }

// Draw spike ball on the canvas
    function drawSpikeBall() {
      ctx.drawImage(
        spikeBallImg,
        spikeBall.x - spikeBall.radius,
        spikeBall.y - spikeBall.radius,
        spikeBall.radius * 2,
        spikeBall.radius * 2
      );
    }

// Draw squares on the canvas
    function drawSquares() {
      for (var i = 0; i < squares.length; i++) {
        var square = squares[i];

ctx.drawImage(squareImg, square.x, square.y, 50, 50);
      }
    }

// Clear the canvas
    function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

// Start the game when the window has loaded
    window.onload = function() {
      init();
    };
  </script>
</body>
</html>
```