Football game's game | AI game creator

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

No:52230

163

Football game
Developer User21425｜Date and time 24/3/19 9:54:07
Build time 8.13 sec｜Game capacity 2.043KB｜

→ 　

0　

0　

　
　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <title>Futebol Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

let playerX = canvas.width / 2;
    let playerY = canvas.height - 30;
    let playerRadius = 15;
    let playerSpeed = 5;
    
    let ballX = canvas.width / 2;
    let ballY = canvas.height / 2;
    let ballRadius = 10;
    let ballSpeedX = 2;
    let ballSpeedY = -2;
    
    function drawPlayer() {
      ctx.beginPath();
      ctx.arc(playerX, playerY, playerRadius, 0, Math.PI*2);
      ctx.fillStyle = 'blue';
      ctx.fill();
      ctx.closePath();
    }
    
    function drawBall() {
      ctx.beginPath();
      ctx.arc(ballX, ballY, ballRadius, 0, Math.PI*2);
      ctx.fillStyle = 'red';
      ctx.fill();
      ctx.closePath();
    }
    
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawPlayer();
      drawBall();
      
      ballX += ballSpeedX;
      ballY += ballSpeedY;
      
      if(ballX + ballSpeedX > canvas.width - ballRadius || ballX + ballSpeedX < ballRadius) {
        ballSpeedX = -ballSpeedX;
      }
      
      if(ballY + ballSpeedY < ballRadius) {
        ballSpeedY = -ballSpeedY;
      } else if(ballY + ballSpeedY > canvas.height - ballRadius) {
        if(ballX > playerX - playerRadius && ballX < playerX + playerRadius) {
          ballSpeedY = -ballSpeedY;
        } else {
          alert('Game Over!');
          document.location.reload();
        }
      }
      
      if(playerX > canvas.width) {
        playerX = canvas.width;
      } else if(playerX < 0) {
        playerX = 0;
      }
    }
    
    function movePlayer(e) {
      if(e.key === 'ArrowRight') {
        playerX += playerSpeed;
      } else if(e.key === 'ArrowLeft') {
        playerX -= playerSpeed;
      }
    }
    
    document.addEventListener('keydown', movePlayer);
    
    setInterval(draw, 10);
  </script>
</body>
</html>