AI game creator

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

No:31588

←

Prev Next

→

retro football game
Developer User15184｜Date and time 23/12/27 16:12:18
Build time 28.408 sec｜Game capacity 3.501KB｜

Script

Sure, here's a simple retro football game implemented as a single HTML file using JavaScript:

To play the game, simply copy the above code into a new HTML file, save it with a `.html` extension, and open it in a web browser. You can control the paddle using the right and left arrow keys on your keyboard. The objective of the game is to bounce the ball off the paddle and prevent it from touching the bottom edge of the canvas. If the ball touches the bottom edge, the game is over and you are prompted with an alert message to reload the page and restart the game.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's a simple retro football game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Retro Football Game</title>
  <style>
    canvas {
      border: 1px solid black;
      background-color: #ddd;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="300"></canvas>
  
  <script>
    // Game logic
    const canvas = document.getElementById("gameCanvas");
    const context = canvas.getContext("2d");
    
    const ball = {
      x: canvas.width / 2,
      y: canvas.height - 30,
      dx: 2,
      dy: -2,
      radius: 10
    };
    
    const paddleWidth = 75;
    const paddleHeight = 10;
    const paddle = {
      x: (canvas.width - paddleWidth) / 2,
      y: canvas.height - paddleHeight,
      width: paddleWidth,
      height: paddleHeight,
      dx: 7
    };
    
    let rightPressed = false;
    let leftPressed = false;
    
    function drawBall() {
      context.beginPath();
      context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
      context.fillStyle = "red";
      context.fill();
      context.closePath();
    }
    
    function drawPaddle() {
      context.beginPath();
      context.rect(paddle.x, paddle.y, paddle.width, paddle.height);
      context.fillStyle = "blue";
      context.fill();
      context.closePath();
    }
    
    function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawBall();
      drawPaddle();
      
      if (ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
        ball.dx = -ball.dx;
      }
      
      if (ball.y + ball.dy < ball.radius) {
        ball.dy = -ball.dy;
      } else if (ball.y + ball.dy > canvas.height - ball.radius) {
        if (ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
          ball.dy = -ball.dy;
        } else {
          // Game over condition
          alert("Game Over");
          document.location.reload();
          clearInterval(interval);
        }
      }
      
      if (rightPressed && paddle.x < canvas.width - paddle.width) {
        paddle.x += paddle.dx;
      } else if (leftPressed && paddle.x > 0) {
        paddle.x -= paddle.dx;
      }
      
      ball.x += ball.dx;
      ball.y += ball.dy;
    }
    
    function keyDownHandler(event) {
      if (event.key === "Right" || event.key === "ArrowRight") {
        rightPressed = true;
      } else if (event.key === "Left" || event.key === "ArrowLeft") {
        leftPressed = true;
      }
    }
    
    function keyUpHandler(event) {
      if (event.key === "Right" || event.key === "ArrowRight") {
        rightPressed = false;
      } else if (event.key === "Left" || event.key === "ArrowLeft") {
        leftPressed = false;
      }
    }
    
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);
    
    const interval = setInterval(draw, 10);
  </script>
</body>
</html>
```