Every time a ball hits the pentagon it doubles's game

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

No:42674

116

←

Prev Next

→

Every time a ball hits the pentagon it doubles
Developer User18878｜Date and time 24/2/12 16:54:16
Build time 10.628 sec｜Game capacity 2.735KB｜

Script

Sure! Here's a simple game implementation in a single HTML file using JavaScript. The game involves a ball bouncing around, and every time it hits a pentagon shape, its speed doubles.

You can copy this HTML code into a file, save it with a `.html` extension, and open it in any web browser on your smartphone. The game will start automatically, and you can see a ball bouncing around the canvas. If the ball hits the pentagon, its speed will double.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! Here's a simple game implementation in a single HTML file using JavaScript. The game involves a ball bouncing around, and every time it hits a pentagon shape, its speed doubles.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Ball Bouncing Game</title>
  <style>
    #canvas {
      width: 100%;
      height: 400px;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  
  <script>
    // Get the canvas element
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");

// Ball properties
    let x = canvas.width / 2;
    let y = canvas.height / 2;
    let dx = 2;
    let dy = -2;
    let ballRadius = 10;

// Pentagon properties
    let pentagonX = canvas.width / 3;
    let pentagonY = canvas.height / 3;
    let pentagonWidth = 70;
    let pentagonHeight = 50;

// Handle collision between ball and pentagon
    function handleCollision() {
      if (x > pentagonX && x < pentagonX + pentagonWidth && y > pentagonY && y < pentagonY + pentagonHeight) {
        dx *= 2; // Double the ball's speed on collision
        dy *= 2;
      }
    }

// Draw the ball
    function drawBall() {
      ctx.beginPath();
      ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }

// Draw the pentagon
    function drawPentagon() {
      ctx.beginPath();
      ctx.moveTo(pentagonX + pentagonWidth / 2, pentagonY);
      ctx.lineTo(pentagonX + pentagonWidth, pentagonY + pentagonHeight);
      ctx.lineTo(pentagonX + pentagonWidth / 2, pentagonY + pentagonHeight * 2);
      ctx.lineTo(pentagonX - pentagonWidth / 2, pentagonY + pentagonHeight * 2);
      ctx.lineTo(pentagonX, pentagonY + pentagonHeight);
      ctx.closePath();
      ctx.strokeStyle = "#FF0000";
      ctx.stroke();
    }

// Update game state and render
    function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas
      handleCollision();
      drawBall();
      drawPentagon();
      
      // Reverse ball if it touches the canvas edges
      if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
        dx = -dx;
      }
      if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
        dy = -dy;
      }
      
      x += dx;
      y += dy;
      
      requestAnimationFrame(update);
    }

// Start the game
    update();
  </script>

</body>
</html>
```