A playable soccer game where you controls the player's game

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

No:18927

←

Prev Next

→

A playable soccer game where you controls the play..ALL
Developer User8361｜Date and time 23/10/1 5:30:27
Build time 12.037 sec｜Game capacity 3.474KB｜

Script

Sure! Here's a simple playable soccer game using JavaScript and pictograms:

To play the game, open the HTML file in a web browser, preferably on a smartphone. The player can be controlled using the left and right arrow keys. The objective is to prevent the ball from touching the top wall or falling below the player's position. The ball will bounce off the walls and the player, creating a basic soccer game experience. Please note that this is a basic implementation, and you can enhance the game by adding additional features such as scoring, levels, and opponent players.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Sure! Here's a simple playable soccer game using JavaScript and pictograms:

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

// Define player object
    var player = {
      x: canvas.width / 2,
      y: canvas.height - 30,
      radius: 15,
      speed: 5,
      direction: ""
    };

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

// Handle keyboard input
    document.addEventListener("keydown", keyDownHandler);
    document.addEventListener("keyup", keyUpHandler);

function keyDownHandler(event) {
      if (event.keyCode == 37) {  // left arrow key
        player.direction = "left";
      } else if (event.keyCode == 39) {  // right arrow key
        player.direction = "right";
      }
    }

function keyUpHandler(event) {
      if (event.keyCode == 37 || event.keyCode == 39) {  // left or right arrow key
        player.direction = "";
      }
    }

// Update player position based on input
    function movePlayer() {
      if (player.direction == "left" && player.x - player.radius > 0) {
        player.x -= player.speed;
      } else if (player.direction == "right" && player.x + player.radius < canvas.width) {
        player.x += player.speed;
      }
    }

// Update ball position and handle collisions
    function moveBall() {
      // Bounce off walls
      if (ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
        ball.dx = -ball.dx;
      }
      if (ball.y + ball.dy < ball.radius) {
        ball.dy = -ball.dy;
      }

// Collisions with player
      if (
        ball.y + ball.dy > canvas.height - ball.radius - player.radius &&
        ball.x + ball.dx > player.x - player.radius &&
        ball.x + ball.dx < player.x + player.radius
      ) {
        ball.dy = -ball.dy;
      }

// Update ball position
      ball.x += ball.dx;
      ball.y += ball.dy;
    }

// Clear canvas and draw objects
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // Draw player
      ctx.beginPath();
      ctx.arc(player.x, player.y, player.radius, 0, Math.PI*2);
      ctx.fillStyle = "black";
      ctx.fill();
      ctx.closePath();

// Draw ball
      ctx.beginPath();
      ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2);
      ctx.fillStyle = "red";
      ctx.fill();
      ctx.closePath();
    }

// Game loop
    function gameLoop() {
      movePlayer();
      moveBall();
      draw();
      requestAnimationFrame(gameLoop);
    }

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

Please note that this is a basic implementation, and you can enhance the game by adding additional features such as scoring, levels, and opponent players.