AI game creator

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

No:28759

←

Prev Next

→

Soccer games
Developer User14229｜Date and time 23/12/14 4:46:23
Build time 35.019 sec｜Game capacity 2.65KB｜

Script

Sure! Here's an example of a simple soccer game implemented in a single HTML file using JavaScript:

This code creates a simple soccer game where you control a player represented by a rectangle at the bottom of the field. The objective is to prevent the ball, represented by a circle, from reaching the top or bottom walls. You can use the left and right arrow keys to move the player horizontally. If the ball reaches the top or bottom wall, a goal is scored, and the game restarts.

←

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 soccer game implemented in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Soccer Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="soccer-field" width="400" height="300"></canvas>

// Ball initial position and speed
    var ballX = fieldWidth / 2;
    var ballY = fieldHeight / 2;
    var ballSpeedX = 2;
    var ballSpeedY = 1;

// Player initial position and speed
    var playerX = 200;
    var playerY = 280;
    var playerSpeedX = 5;

// Keyboard event listeners
    window.addEventListener('keydown', function(event) {
      if (event.key === 'ArrowLeft') {
        playerX -= playerSpeedX;
      } else if (event.key === 'ArrowRight') {
        playerX += playerSpeedX;
      }
    });

// Game loop
    function update() {
      // Move the ball
      ballX += ballSpeedX;
      ballY += ballSpeedY;

// Check ball collision with player
      if (ballY >= playerY && ballX >= playerX && ballX <= playerX + 50) {
        ballSpeedY *= -1; // Reverse ball direction
      }

// Check ball collision with walls
      if (ballX < 0 || ballX > fieldWidth) {
        ballSpeedX *= -1; // Reverse ball direction
      }
      if (ballY < 0 || ballY > fieldHeight) {
        alert('Goal!'); // Goal scored
        reset(); // Restart the game
      }

// Clear canvas
      var canvas = document.getElementById('soccer-field');
      var ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, fieldWidth, fieldHeight);

// Draw player
      ctx.fillRect(playerX, playerY, 50, 20);

// Draw ball
      ctx.beginPath();
      ctx.arc(ballX, ballY, 10, 0, 2 * Math.PI);
      ctx.closePath();
      ctx.fillStyle = 'black';
      ctx.fill();

// Request animation frame
      requestAnimationFrame(update);
    }

// Reset game state
    function reset() {
      ballX = fieldWidth / 2;
      ballY = fieldHeight / 2;
      ballSpeedX = 2;
      ballSpeedY = 1;
      playerX = 200;
      playerY = 280;
    }

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