Make a football game's game

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

No:12428

←

Prev Next

→

Make a football game
Developer User5105｜Date and time 23/8/16 22:23:56
Build time 20.481 sec｜Game capacity 2.488KB｜

Script

Sure! Here's a simple football game implemented as a single HTML file using JavaScript. You can play the game on a smartphone by tapping on the screen.

This game displays a football field and a football (represented by a white ball). To control the ball, you can touch and drag it across the field. The ball will move within the boundaries of the field, indicated by the green background. Feel free to customize the game further with additional features and stylings based on your preferences.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

Sure! Here's a simple football game implemented as a single HTML file using JavaScript. You can play the game on a smartphone by tapping on the screen.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Football Game</title>
  <style>
    #field {
      position: relative;
      width: 300px;
      height: 400px;
      border: 2px solid black;
      background-color: green;
    }
    #ball {
      position: absolute;
      top: 180px;
      left: 140px;
      width: 20px;
      height: 20px;
      background-color: white;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div id="field">
    <div id="ball"></div>
  </div>

function updateBallPosition() {
        ball.style.left = ballX + "px";
        ball.style.top = ballY + "px";
      }

function handleTouchStart(event) {
        event.preventDefault();
        touching = true;
      }

function handleTouchEnd(event) {
        event.preventDefault();
        touching = false;
      }

field.addEventListener("touchstart", handleTouchStart);
      field.addEventListener("touchend", handleTouchEnd);
      field.addEventListener("touchmove", handleTouchMove);
      
      updateBallPosition();
    });
  </script>
</body>
</html>
```