AI game creator

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

No:28762

←

Prev Next

→

Soccer games
Developer User14229｜Date and time 23/12/14 4:50:38
Build time 41.422 sec｜Game capacity 3.111KB｜

Script

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

This simple soccer game allows you to control a player using left and right arrow keys. The objective is to hit the ball with the player and prevent it from going outside the canvas. Each time the ball hits the player, it bounces back. I hope you enjoy playing the game!

←

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 and pictograms:

```html
<!DOCTYPE html>
<html>

<head>
  <title>Soccer Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>

// Player variables
    var playerX = canvas.width / 2;
    var playerY = canvas.height - 50;
    var playerSize = 30;
    var playerSpeed = 5;

// Ball variables
    var ballX = canvas.width / 2;
    var ballY = canvas.height / 2;
    var ballRadius = 10;
    var ballSpeedX = 2;
    var ballSpeedY = -2;

// Controls variables
    var leftKeyPressed = false;
    var rightKeyPressed = false;

function drawPlayer() {
      context.beginPath();
      context.rect(playerX, playerY, playerSize, playerSize);
      context.fillStyle = "#0095DD";
      context.fill();
      context.closePath();
    }

function drawBall() {
      context.beginPath();
      context.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
      context.fillStyle = "#0095DD";
      context.fill();
      context.closePath();
    }

function movePlayer() {
      if (leftKeyPressed && playerX > 0) {
        playerX -= playerSpeed;
      }
      if (rightKeyPressed && playerX + playerSize < canvas.width) {
        playerX += playerSpeed;
      }
    }

function moveBall() {
      ballX += ballSpeedX;
      ballY += ballSpeedY;

// Collision with walls
      if (ballX + ballRadius > canvas.width || ballX - ballRadius < 0) {
        ballSpeedX = -ballSpeedX;
      }
      if (ballY + ballRadius > canvas.height || ballY - ballRadius < 0) {
        ballSpeedY = -ballSpeedY;
      }

// Collision with player
      if (ballY + ballRadius > playerY && ballY - ballRadius < playerY + playerSize &&
        ballX + ballRadius > playerX && ballX - ballRadius < playerX + playerSize) {
        ballSpeedY = -ballSpeedY;
      }
    }

function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawPlayer();
      drawBall();
      movePlayer();
      moveBall();
    }

function keyDownHandler(event) {
      if (event.keyCode === 37) {
        leftKeyPressed = true;
      } else if (event.keyCode === 39) {
        rightKeyPressed = true;
      }
    }

function keyUpHandler(event) {
      if (event.keyCode === 37) {
        leftKeyPressed = false;
      } else if (event.keyCode === 39) {
        rightKeyPressed = false;
      }
    }

document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

setInterval(draw, 10); // Start the game
  </script>
</body>

</html>
```

I hope you enjoy playing the game!