AI game creator

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

No:16343

134

←

Prev Next

→

A soccer game
Developer User6337｜Date and time 23/9/17 12:02:50
Build time 27.336 sec｜Game capacity 3.404KB｜

Script

Sure! Here's an example of a simple soccer game implemented as a single HTML file using JavaScript. The game can be played on a smartphone and uses pictograms for visual representation.

This soccer game features a ball and a player. You can control the player's movement by swiping left or right on the canvas elements. The goal is to prevent the ball from reaching the top of the screen. The game will continually update and render the ball and player positions on the canvas.

←

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. The game can be played on a smartphone and uses pictograms for visual representation.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Soccer Game</title>
  <style>
    canvas {
      border: 1px solid #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="soccer-game" width="400" height="400"></canvas>

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

var playerX = canvas.width / 2;
      var playerY = canvas.height - 20;
      var playerWidth = 50;
      var playerHeight = 10;
      var playerSpeed = 6;
      var isMovingLeft = false;
      var isMovingRight = false;

// Update game state
      function update() {
        // Clear the canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update ball position
        ballX += ballSpeedX;
        ballY += ballSpeedY;

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

// Check ball collision with player
        if (
          ballY + ballRadius >= playerY &&
          ballX >= playerX &&
          ballX <= playerX + playerWidth
        ) {
          ballSpeedY = -ballSpeedY;
        }

// Draw the ball
        ctx.beginPath();
        ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
        ctx.fillStyle = "#000";
        ctx.fill();
        ctx.closePath();

// Draw the player
        ctx.beginPath();
        ctx.rect(playerX, playerY, playerWidth, playerHeight);
        ctx.fillStyle = "#000";
        ctx.fill();
        ctx.closePath();

// Move the player
        if (isMovingLeft && playerX > 0) {
          playerX -= playerSpeed;
        }
        if (isMovingRight && playerX + playerWidth < canvas.width) {
          playerX += playerSpeed;
        }

requestAnimationFrame(update);
      }

// Handle touch events
      function handleTouchStart(e) {
        if (e.touches.length === 1) {
          if (e.touches[0].clientX < playerX) {
            isMovingLeft = true;
          } else if (e.touches[0].clientX > playerX + playerWidth) {
            isMovingRight = true;
          }
        }
      }

function handleTouchEnd(e) {
        isMovingLeft = false;
        isMovingRight = false;
      }

// Bind touch event handlers
      canvas.addEventListener("touchstart", handleTouchStart);
      canvas.addEventListener("touchend", handleTouchEnd);

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