Breakout's game | AI game creator

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

No:51427

152

Breakout
Developer User21066｜Date and time 24/3/12 2:28:10
Build time 10.973 sec｜Game capacity 2.106KB｜

→ 　

0　

0　

[PR]現在のゲームギフトランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <title>Breakout Game</title>
  <style>
    #canvas {
      background-color: #eee;
      margin: auto;
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>

<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    
    let ball = { x: canvas.width / 2, y: canvas.height - 30, dx: -2, dy: -2, radius: 10 };
    let paddle = { x: canvas.width / 2, y: canvas.height - 10, width: 60, height: 10 };
    let bricks = [];
    
    for (let i = 0; i < 10; i++) {
      bricks.push({ x: i * 40, y: 20, width: 40, height: 20 });
    }
    
    function drawBall() {
      ctx.beginPath();
      ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
      ctx.fillStyle = 'black';
      ctx.fill();
      ctx.closePath();
    }
    
    function drawPaddle() {
      ctx.beginPath();
      ctx.rect(paddle.x - paddle.width / 2, paddle.y, paddle.width, paddle.height);
      ctx.fillStyle = 'blue';
      ctx.fill();
      ctx.closePath();
    }
    
    function drawBricks() {
      bricks.forEach(brick => {
        ctx.beginPath();
        ctx.rect(brick.x, brick.y, brick.width, brick.height);
        ctx.fillStyle = 'red';
        ctx.fill();
        ctx.closePath();
      });
    }
    
    function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBall();
      drawPaddle();
      drawBricks();
      
      ball.x += ball.dx;
      ball.y += ball.dy;
      
      if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
        ball.dx *= -1;
      }
      
      if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
        ball.dy *= -1;
      }
      
      if (ball.y + ball.radius > paddle.y && ball.x > paddle.x - paddle.width / 2 && ball.x < paddle.x + paddle.width / 2) {
        ball.dy *= -1;
      }
      
      requestAnimationFrame(gameLoop);
    }
    
    gameLoop();
  </script>
</body>
</html>