Make a football game's game

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

No:12426

←

Prev Next

→

Make a football game
Developer User5105｜Date and time 23/8/16 22:22:20
Build time 36.432 sec｜Game capacity 3.654KB｜

Script

Sure! Here's a simple implementation of a football game in a single HTML file using JavaScript and pictograms:

Click to Play

Please note that you'll need to replace the file names in the CSS `background-image` properties (`emozi_all/background.png`, `emozi_all/ball.png`, `emozi_himawari.png`, `emozi_cat.png`, `emozi_rabbit.png`, `emozi_apple.png`) with the actual image files you want to use for the football field, ball, and players.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Sure! Here's a simple implementation of a football game in a single HTML file using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #field {
      position: relative;
      width: 100%;
      height: 450px;
      background-image: url('football_field.png');
      background-size: contain;
    }

#ball {
      position: absolute;
      top: 200px;
      left: 300px;
      width: 40px;
      height: 40px;
      background-image: url('ball.png');
      background-size: contain;
    }

.player {
      position: absolute;
      width: 40px;
      height: 40px;
      background-size: contain;
    }

#player1 {
      top: 350px;
      left: 120px;
      background-image: url('player1.png');
    }

#player2 {
      top: 350px;
      left: 460px;
      background-image: url('player2.png');
    }

#player3 {
      top: 200px;
      left: 0;
      background-image: url('player3.png');
    }

#player4 {
      top: 200px;
      left: 620px;
      background-image: url('player4.png');
    }

#score {
      margin-top: 20px;
      text-align: center;
      font-size: 24px;
    }

button {
      width: 120px;
      height: 40px;
      border-radius: 4px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  
  <div id="field">
    <div id="ball"></div>
    <div id="player1" class="player"></div>
    <div id="player2" class="player"></div>
    <div id="player3" class="player"></div>
    <div id="player4" class="player"></div>
  </div>

<div id="score">Click to Play</div>

// Move the ball randomly
    function moveBall() {
      var x = Math.floor(Math.random() * 600);
      var y = Math.floor(Math.random() * 400);
      ball.style.left = x + 'px';
      ball.style.top = y + 'px';
    }

// Start the game
    function startGame() {
      score = 0;
      scoreText.innerText = 'Score: ' + score;
      moveBall();
      enablePlayerControls();
    }

// Enable player controls
    function enablePlayerControls() {
      player1.addEventListener('click', increaseScore);
      player2.addEventListener('click', increaseScore);
      player3.addEventListener('click', decreaseScore);
      player4.addEventListener('click', decreaseScore);
      setTimeout(endGame, 10000); // Finish game after 10 seconds
    }

// Increase score
    function increaseScore() {
      score++;
      scoreText.innerText = 'Score: ' + score;
    }

// Decrease score
    function decreaseScore() {
      score--;
      scoreText.innerText = 'Score: ' + score;
    }

// End the game
    function endGame() {
      scoreText.innerText = 'Game Over! Your final score: ' + score;
      player1.removeEventListener('click', increaseScore);
      player2.removeEventListener('click', increaseScore);
      player3.removeEventListener('click', decreaseScore);
      player4.removeEventListener('click', decreaseScore);
    }

// Start the game when clicked
    scoreText.addEventListener('click', startGame);
  </script>

</body>
</html>
```

Please note that you'll need to replace the file names in the CSS `background-image` properties (`football_field.png`, `ball.png`, `player1.png`, `player2.png`, `player3.png`, `player4.png`) with the actual image files you want to use for the football field, ball, and players.