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

No:18929

A game like fifa that works
Developer User8361｜Date and time 23/10/1 5:31:49
Build time 13.741 sec｜Game capacity 3.351KB｜

Script

Football Game

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Football Game</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
      }
      #playground {
        margin-top: 50px;
      }
      #ball {
        position: absolute;
        top: 250px;
        left: 350px;
      }
      .player {
        position: absolute;
        width: 50px;
        height: 50px;
      }
      #player1 {
        top: 250px;
        left: 150px;
      }
      #player2 {
        top: 250px;
        left: 550px;
      }
    </style>
  </head>
  <body>
    <h1>Football Game</h1>
    <div id="playground">
      <img id="ball" src="ball.png" alt="Ball" width="50" height="50">
      <img class="player" id="player1" src="player1.png" alt="Player 1" width="50" height="50">
      <img class="player" id="player2" src="player2.png" alt="Player 2" width="50" height="50">
    </div>
    <script>
      // Define important variables
      var ball = document.getElementById("ball");
      var player1 = document.getElementById("player1");
      var player2 = document.getElementById("player2");
      
      var ballX = 350;
      var ballY = 250;
      var player1X = 150;
      var player1Y = 250;
      var player2X = 550;
      var player2Y = 250;
      
      // Define keyboard event listeners for player movement
      window.addEventListener("keydown", function(event) {
        switch(event.keyCode) {
          case 37: // Left arrow key
            player1X -= 10;
            player1.style.left = player1X + "px";
            break;
          case 39: // Right arrow key
            player1X += 10;
            player1.style.left = player1X + "px";
            break;
          case 65: // 'A' key
            player2X -= 10;
            player2.style.left = player2X + "px";
            break;
          case 68: // 'D' key
            player2X += 10;
            player2.style.left = player2X + "px";
            break;
        }
      });
      
      // Function to update ball's position
      function updateBallPosition() {
        if (ballX < player1X + 30 && ballX + 30 > player1X && ballY < player1Y + 30 && ballY + 30 > player1Y) {
          // Ball collided with Player 1
          alert("Goal by Player 1!");
          resetGame();
        } else if (ballX < player2X + 30 && ballX + 30 > player2X && ballY < player2Y + 30 && ballY + 30 > player2Y) {
          // Ball collided with Player 2
          alert("Goal by Player 2!");
          resetGame();
        } else if (ballX <= 0 || ballX >= 700) {
          // Ball hit the boundaries
          alert("Out of bounds!");
          resetGame();
        } else {
          // Move the ball
          ballX += 1;
          ball.style.left = ballX + "px";
        }
      }
      
      // Function to reset the game
      function resetGame() {
        ballX = 350;
        ballY = 250;
        ball.style.left = ballX + "px";
        ball.style.top = ballY + "px";
        player1X = 150;
        player1Y = 250;
        player1.style.left = player1X + "px";
        player1.style.top = player1Y + "px";
        player2X = 550;
        player2Y = 250;
        player2.style.left = player2X + "px";
        player2.style.top = player2Y + "px";
      }
      
      // Start the game loop
      setInterval(updateBallPosition, 10);
    </script>
  </body>
</html>