AI game creator

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

No:4054

910

←

Prev Next

→

make a pinball game
Developer User3758｜Date and time 23/6/27 5:07:11
Build time 54.071 sec｜Game capacity 6.096KB｜

Script

Sure, I can make a pinball game as per your requirements. Here is the code:

This is a fully functional pinball game with collision detection, score and lives tracking, and paddle movement using keyboard arrow keys (left and right). The player needs to destroy all the bricks with the ball by bouncing it off the paddle. If the player successfully destroys all the bricks, they win the game. If they lose all their lives, the game is over and they have to start over. I hope this meets your requirements. Let me know if you need any modifications.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure, I can make a pinball game as per your requirements. Here is the code:

<!DOCTYPE html>
<html>
  <head>
    <title>Pinball Game</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <canvas id="canvas" width="400" height="600"></canvas>
    <script>
      
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      
      // Ball properties
      var ballRadius = 10;
      var ballX = canvas.width / 2;
      var ballY = canvas.height - 30;
      var ballDx = 2;
      var ballDy = -2;
      
      // Paddle properties
      var paddleHeight = 10;
      var paddleWidth = 75;
      var paddleX = (canvas.width - paddleWidth) / 2;
      var paddleY = canvas.height - paddleHeight;
      var paddleDx = 5;
      
      // Brick properties
      var brickRowCount = 3;
      var brickColumnCount = 5;
      var brickWidth = 75;
      var brickHeight = 20;
      var brickPadding = 10;
      var brickOffsetTop = 30;
      var brickOffsetLeft = 30;
      var bricks = [];
      for(var c=0; c<brickColumnCount; c++) {
          bricks[c] = [];
          for(var r=0; r<brickRowCount; r++) {
              bricks[c][r] = { x: 0, y: 0, status: 1 };
          }
      }
      
      // Score and Lives properties
      var score = 0;
      var lives = 3
      
      // Draw ball
      function drawBall() {
        ctx.beginPath();
        ctx.arc(ballX, ballY, ballRadius, 0, Math.PI*2);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
      }
      
      // Draw paddle
      function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddleX, paddleY, paddleWidth, paddleHeight);
        ctx.fillStyle = "green";
        ctx.fill();
        ctx.closePath();
      }
      
      // Draw bricks
      function drawBricks() {
        for(var c=0; c<brickColumnCount; c++) {
          for(var r=0; r<brickRowCount; r++) {
            if(bricks[c][r].status == 1) {
              var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
              var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
              bricks[c][r].x = brickX;
              bricks[c][r].y = brickY;
              ctx.beginPath();
              ctx.rect(brickX, brickY, brickWidth, brickHeight);
              ctx.fillStyle = "red";
              ctx.fill();
              ctx.closePath();
            }
          }
        }
      }
      
      // Collision detection
      function collisionDetection() {
        for(var c=0; c<brickColumnCount; c++) {
          for(var r=0; r<brickRowCount; r++) {
            var b = bricks[c][r];
            if(b.status == 1) {
              if(ballX > b.x && ballX < b.x+brickWidth && ballY > b.y && ballY < b.y+brickHeight) {
                ballDy = -ballDy;
                b.status = 0;
                score++;
                if(score == brickRowCount*brickColumnCount) {
                  alert("Congratulations! You won the game!");
                  document.location.reload();
                }
              }
            }
          }
        }
      }
      
      // Draw score
      function drawScore() {
        ctx.font = "16px Arial";
        ctx.fillStyle = "#0095DD";
        ctx.fillText("Score: "+score, 8, 20);
      }
      
      // Draw lives
      function drawLives() {
        ctx.font = "16px Arial";
        ctx.fillStyle = "#0095DD";
        ctx.fillText("Lives: "+lives, canvas.width-65, 20)
      }
      
      // Update game
      function update() {
        // Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // Draw objects
        drawBall();
        drawPaddle();
        drawBricks();
        drawScore();
        drawLives();
        collisionDetection();
        // Reflection
        if(ballX + ballDx > canvas.width - ballRadius || ballX + ballDx < ballRadius) {
          ballDx = -ballDx;
        }
        if(ballY + ballDy < ballRadius) {
          ballDy = -ballDy;
        }
        else if(ballY + ballDy > canvas.height - ballRadius) {
          if(ballX > paddleX && ballX < paddleX + paddleWidth) {
            ballDy = -ballDy;
          }
          else {
            lives--;
            if(lives == 0) {
              alert("Game Over. Try Again!");
              document.location.reload();
            }
            else {
              ballX = canvas.width / 2;
              ballY = canvas.height - 30;
              ballDx = 2;
              ballDy = -2;
              paddleX = (canvas.width - paddleWidth) / 2;
            }
          }
        }
        // Move paddle
        if(rightPressed && paddleX < canvas.width - paddleWidth) {
          paddleX += paddleDx;
        }
        else if(leftPressed && paddleX > 0) {
          paddleX -= paddleDx;
        }
        // Move ball
        ballX += ballDx;
        ballY += ballDy;
        // Repeat
        requestAnimationFrame(update);
      }
      
      // Key event listeners
      var rightPressed = false;
      var leftPressed = false;
      document.addEventListener("keydown", keyDownHandler, false);
      document.addEventListener("keyup", keyUpHandler, false);
      
      function keyDownHandler(e) {
        if(e.keyCode == 39) {
          rightPressed = true;
        }
        else if(e.keyCode == 37) {
          leftPressed = true;
        }
      }
      
      function keyUpHandler(e) {
        if(e.keyCode == 39) {
          rightPressed = false;
        }
        else if(e.keyCode == 37) {
          leftPressed = false;
        }
      }
      
      // Start game
      update();
      
    </script>
  </body>
</html>

I hope this meets your requirements. Let me know if you need any modifications.