AI game creator

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

No:15541

3099

←

Prev Next

→

Makea soccer game
Developer anonymous｜Date and time 70/1/1 9:49:47
Build time unknown sec｜Game capacity 2.987KB｜

Script

Sure, here's an example of a simple soccer game implemented as a single HTML file using JavaScript:

In this example, the game is played on a canvas element (`gameCanvas`). The player controls a blue rectangle at the bottom, moving it left or right using the left and right arrow keys. The objective is to bounce the black ball off the player's rectangle and prevent it from reaching the top or the sides of the canvas. The ball constantly moves and changes direction when it collides with the boundaries of the canvas or the player's rectangle. Each time the ball collides with the player's rectangle, the player's height is decreased to make the game more challenging. Please note that this example is fairly basic and can be expanded upon to add more features, improve gameplay, and enhance the overall experience.

←

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 as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Soccer Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="300"></canvas>

var ball = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      radius: 10,
      dx: 2,
      dy: 2
    };

var player = {
      width: 50,
      height: 50,
      x: canvas.width / 2 - 25,
      y: canvas.height - 50,
      dx: 5
    };

function drawBall() {
      context.beginPath();
      context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
      context.fillStyle = "black";
      context.fill();
      context.closePath();
    }

function drawPlayer() {
      context.beginPath();
      context.rect(player.x, player.y, player.width, player.height);
      context.fillStyle = "blue";
      context.fill();
      context.closePath();
    }

function moveBall() {
      if (ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
          ball.dx = -ball.dx;
      }

if (ball.y + ball.dy > canvas.height - ball.radius || ball.y + ball.dy < ball.radius) {
          ball.dy = -ball.dy;
      }

ball.x += ball.dx;
      ball.y += ball.dy;
    }

function collisionDetection() {
      if (ball.y + ball.dy > canvas.height - ball.radius - player.height && ball.x > player.x && ball.x < player.x + player.width) {
        ball.dy = -ball.dy;
        player.height -= 5; // Decrease player's height on collision
      }
    }

function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);

drawBall();
      drawPlayer();

moveBall();
      collisionDetection();

requestAnimationFrame(draw);
    }

movePlayer();
    draw();
  </script>
</body>
</html>
```

The ball constantly moves and changes direction when it collides with the boundaries of the canvas or the player's rectangle. Each time the ball collides with the player's rectangle, the player's height is decreased to make the game more challenging.

Please note that this example is fairly basic and can be expanded upon to add more features, improve gameplay, and enhance the overall experience.