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

No:33085

Foot ball in ground with animals
Developer User15646｜Date and time 24/1/2 15:21:06
Build time 37.664 sec｜Game capacity 4.049KB｜

Script

Sure! Here's an example of a simple football game implemented as a single HTML file using JavaScript and pictograms for animals:

Football Game with Animals

Note: Make sure you have the respective image files (`emozi_bear.png`, `emozi_all/ball.png`, `emozi_all/lion.png`, `emozi_all/elephant.png`, `emozi_all/monkey.png`) in the same directory as the HTML file for the pictograms to display correctly.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure! Here's an example of a simple football game implemented as a single HTML file using JavaScript and pictograms for animals:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Football Game with Animals</title>
  <style>
    body {
      background-color: #F4F4F4;
      text-align: center;
    }
    #field {
      position: relative;
      width: 300px;
      height: 150px;
      margin: 50px auto;
      border: 2px solid black;
      background-image: url('football_field.png');
      background-size: cover;
    }
    #ball {
      position: absolute;
      width: 20px;
      height: 20px;
      background-image: url('football_ball.png');
      background-size: cover;
    }
    .animal {
      position: absolute;
      width: 40px;
      height: 40px;
      background-size: cover;
    }
    #lion {
      background-image: url('lion.png');
    }
    #elephant {
      background-image: url('elephant.png');
    }
    #monkey {
      background-image: url('monkey.png');
    }
  </style>
</head>
<body>
  <h1>Football Game with Animals</h1>
  
  <div id="field">
    <div id="ball"></div>
    <div class="animal" id="lion"></div>
    <div class="animal" id="elephant"></div>
    <div class="animal" id="monkey"></div>
  </div>

// Initialize positions
    let ballX = 140;
    let ballY = 60;
    let lionX = 40;
    let lionY = 60;
    let elephantX = 220;
    let elephantY = 90;
    let monkeyX = 200;
    let monkeyY = 30;

// Update positions and check collisions
    function updatePositions() {
      // Move ball
      ball.style.left = ballX + 'px';
      ball.style.top = ballY + 'px';

// Move animals randomly
      lion.style.left = lionX + 'px';
      lion.style.top = lionY + 'px';

elephant.style.left = elephantX + 'px';
      elephant.style.top = elephantY + 'px';

monkey.style.left = monkeyX + 'px';
      monkey.style.top = monkeyY + 'px';

// Check collisions with ball
      if (
        ballX >= lionX && ballX <= lionX + 40 &&
        ballY >= lionY && ballY <= lionY + 40
      ) {
        alert('Goal! You scored against the lion!');
        resetPositions();
      }

if (
        ballX >= elephantX && ballX <= elephantX + 40 &&
        ballY >= elephantY && ballY <= elephantY + 40
      ) {
        alert('Goal! You scored against the elephant!');
        resetPositions();
      }

if (
        ballX >= monkeyX && ballX <= monkeyX + 40 &&
        ballY >= monkeyY && ballY <= monkeyY + 40
      ) {
        alert('Goal! You scored against the monkey!');
        resetPositions();
      }
    }

// Reset positions to initial values
    function resetPositions() {
      ballX = 140;
      ballY = 60;
      lionX = 40;
      lionY = 60;
      elephantX = 220;
      elephantY = 90;
      monkeyX = 200;
      monkeyY = 30;
    }

// Detect keypress events to move the ball
    document.addEventListener('keydown', function(event) {
      const KEY_LEFT = 37;
      const KEY_UP = 38;
      const KEY_RIGHT = 39;
      const KEY_DOWN = 40;

switch (event.keyCode) {
        case KEY_LEFT:
          ballX -= 10;
          updatePositions();
          break;
        case KEY_UP:
          ballY -= 10;
          updatePositions();
          break;
        case KEY_RIGHT:
          ballX += 10;
          updatePositions();
          break;
        case KEY_DOWN:
          ballY += 10;
          updatePositions();
          break;
      }
    });

updatePositions();
  </script>
</body>
</html>
```

Note: Make sure you have the respective image files (`football_field.png`, `football_ball.png`, `lion.png`, `elephant.png`, `monkey.png`) in the same directory as the HTML file for the pictograms to display correctly.