AI game creator

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

No:13273

110

←

Prev Next

→

Football game
Developer User5798｜Date and time 23/8/27 19:06:02
Build time 23.314 sec｜Game capacity 3.943KB｜

Script

Sure! Here's a simple football game implemented as a single HTML file using JavaScript:

This code sets up a simple browser-based football game where you control one paddle with your mouse, and the other paddle is controlled by AI. The goal is to bounce the ball off your paddle and prevent it from hitting your goal. You can use pictograms or add your own visual elements. To play the game, simply save the code into a text file with a `.html` extension and open it in your web browser on a smartphone. You can then control one paddle by moving your finger on the screen and try to score goals against the AI-controlled paddle. Please note that this is a basic implementation and can be further enhanced with additional features, such as scoring, sound effects, or improved visuals, based on your specific requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! Here's a simple football game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Football Game</title>
  <style>
    canvas { background-color: #000; }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="300"></canvas>

// Initialize game
    function init() {
      canvas = document.getElementById("gameCanvas");
      context = canvas.getContext("2d");

resetGame();
      
      setInterval(function() {
        move();
        draw();
      }, 1000/30);

canvas.addEventListener("mousemove", function(evt) {
        var mousePos = calculateMousePos(evt);
        paddle1Y = mousePos.y - (paddleHeight / 2);
      });
    }

// Move game elements
    function move() {
      ballX += ballSpeedX;
      ballY += ballSpeedY;

// AI movement
      paddle2Y = ballY - (paddleHeight / 2);

// Ball bouncing off the walls
      if (ballY < 0 || ballY > canvas.height) {
        ballSpeedY *= -1;
      }

// Ball interacting with paddles
      if (ballX < paddleWidth && ballY > paddle1Y && ballY < paddle1Y + paddleHeight) {
        ballSpeedX *= -1;
      }

if (ballX > canvas.width - paddleWidth && ballY > paddle2Y && ballY < paddle2Y + paddleHeight) {
        ballSpeedX *= -1;
      }
    }

// Draw game elements
    function draw() {
      // Clear canvas
      colorRect(0, 0, canvas.width, canvas.height, "#000");
      
      // Draw paddles
      colorRect(0, paddle1Y, paddleWidth, paddleHeight, "#fff");
      colorRect(canvas.width - paddleWidth, paddle2Y, paddleWidth, paddleHeight, "#fff");

// Draw ball
      colorCircle(ballX, ballY, 10, "#fff");
    }

// Reset game
    function resetGame() {
      ballX = canvas.width / 2;
      ballY = canvas.height / 2;
      ballSpeedX = 4;
      ballSpeedY = 4;

paddleHeight = 100;
      paddleWidth = 10;
      paddleSpeed = 8;
      paddle1Y = (canvas.height - paddleHeight) / 2;
      paddle2Y = (canvas.height - paddleHeight) / 2;
    }

// Helper functions

// Fill a rectangle with a given color
    function colorRect(x, y, width, height, color) {
      context.fillStyle = color;
      context.fillRect(x, y, width, height);
    }

// Draw a circle with a given color
    function colorCircle(x, y, radius, color) {
      context.fillStyle = color;
      context.beginPath();
      context.arc(x, y, radius, 0, Math.PI * 2, true);
      context.fill();
    }

// Calculate mouse position relative to canvas
    function calculateMousePos(evt) {
      var rect = canvas.getBoundingClientRect();
      var root = document.documentElement;
      var mouseX = evt.clientX - rect.left - root.scrollLeft;
      var mouseY = evt.clientY - rect.top - root.scrollTop;
      return {
        x: mouseX,
        y: mouseY
      };
    }

window.onload = init;
  </script>
</body>
</html>
```

To play the game, simply save the code into a text file with a `.html` extension and open it in your web browser on a smartphone. You can then control one paddle by moving your finger on the screen and try to score goals against the AI-controlled paddle.

Please note that this is a basic implementation and can be further enhanced with additional features, such as scoring, sound effects, or improved visuals, based on your specific requirements.