Make a game named new invention a rolling ball that faces bricks in the way and avoid by tapping's game

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

No:20654

←

Prev Next

→

Make a game named new invention a rolling ball tha..ALL
Developer User9115｜Date and time 23/10/10 13:22:13
Build time 15.052 sec｜Game capacity 3.495KB｜

Script

Sure! Here's an example of a simple game called "Rolling Ball Adventure" implemented in a single HTML file using JavaScript. It can be played on a smartphone by tapping to avoid the bricks in the way. I've used pictogram-like characters to represent the ball and bricks.

To play the game, simply copy and paste the above code into a new HTML file and open it in a web browser on your smartphone. Tap the screen to make the rolling ball jump and avoid the bricks. If the ball collides with a brick, a game over alert will be displayed.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Rolling Ball Adventure</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

#game-canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="game-canvas"></canvas>

const ballSize = 30;  // Size of the rolling ball
      const brickSize = 80;  // Size of the bricks
      const jumpHeight = 80;  // Distance the ball jumps on tap
      const gravity = 2;  // Gravity affecting the ball

let ballPositionX = canvas.width / 2 - ballSize / 2;  // Initial ball's position (centered horizontally)
      let ballPositionY = canvas.height - ballSize - jumpHeight;  // Initial ball's position (above the ground)
      let jumpForce = 0;  // Force applied to the ball to jump
      let bricks = [];  // Array to hold the bricks' positions

// Generate random bricks positions
      function generateBricks() {
        const numBricks = Math.floor(canvas.width / brickSize);

for (let i = 0; i < numBricks + 1; i++) {
          let brickX = brickSize * i;
          let brickY = Math.random() * (canvas.height - brickSize);
          bricks.push({ x: brickX, y: brickY });
        }
      }

// Move the ball and check for collisions
      function update() {
        ballPositionY += jumpForce;
        jumpForce += gravity;

// Check for collisions with bricks
        for (let i = 0; i < bricks.length; i++) {
          let brick = bricks[i];

if (
            ballPositionX < brick.x + brickSize &&
            ballPositionX + ballSize > brick.x &&
            ballPositionY < brick.y + brickSize &&
            ballPositionY + ballSize > brick.y
          ) {
            // Collision detected, game over
            alert("Game Over!");
            location.reload();  // Refresh the page to restart the game
          }
        }

// Clear the canvas
        context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the ball
        context.fillStyle = "#FF0000";
        context.fillRect(ballPositionX, ballPositionY, ballSize, ballSize);

// Draw the bricks
        for (let i = 0; i < bricks.length; i++) {
          let brick = bricks[i];
          context.fillStyle = "#0000FF";
          context.fillRect(brick.x, brick.y, brickSize, brickSize);
        }

requestAnimationFrame(update);  // Loop the animation
      }

// Handle tap event to make the ball jump
      function handleTap() {
        jumpForce = -jumpHeight;
      }

// Set up event listener for tap
      canvas.addEventListener("touchstart", handleTap);

// Generate the bricks and start the game
      generateBricks();
      update();
    }

window.onload = init;
  </script>
</body>
</html>
```