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

No:27832

Game like football superstar 2
Developer User13876｜Date and time 23/12/9 13:10:16
Build time 18.948 sec｜Game capacity 2.683KB｜

Script

Football Superstar 2

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Football Superstar 2</title>
</head>
<body>
  <h1>Football Superstar 2</h1>
  
  <canvas id="gameCanvas" width="480" height="320"></canvas>

// Player object
    var player = {
      x: canvas.width / 2,
      y: canvas.height - 30,
      width: 20,
      height: 20,
      speed: 5
    };

// Ball object
    var ball = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      radius: 10,
      speedX: 3,
      speedY: -3
    };

// Function to draw the player
    function drawPlayer() {
      ctx.beginPath();
      ctx.rect(player.x, player.y, player.width, player.height);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }

// Function to move the player
    function movePlayer(direction) {
      if (direction === "left" && player.x > 0) {
        player.x -= player.speed;
      } else if (direction === "right" && player.x < canvas.width - player.width) {
        player.x += player.speed;
      }
    }

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

// Update function that handles the game logic and rendering
    function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

drawPlayer();
      drawBall();

// Move the ball
      ball.x += ball.speedX;
      ball.y += ball.speedY;

// Bounce the ball off the canvas edges
      if (
        ball.x + ball.radius > canvas.width ||
        ball.x - ball.radius < 0
      ) {
        ball.speedX = -ball.speedX;
      }
      if (
        ball.y + ball.radius > canvas.height ||
        ball.y - ball.radius < 0
      ) {
        ball.speedY = -ball.speedY;
      }

// Check collision with the player
      if (
        ball.x + ball.radius > player.x &&
        ball.x - ball.radius < player.x + player.width &&
        ball.y + ball.radius > player.y &&
        ball.y - ball.radius < player.y + player.height
      ) {
        ball.speedY = -ball.speedY;
      }

requestAnimationFrame(update);
    }

// Keyboard event listeners for player movement
    document.addEventListener("keydown", function (event) {
      if (event.key === "ArrowLeft") {
        movePlayer("left");
      } else if (event.key === "ArrowRight") {
        movePlayer("right");
      }
    });

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