A football game that uses a metal ball. 2d, side view, only one player on each team.'s game

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

No:24377

←

Prev Next

→

A football game that uses a metal ball. 2d, side v..ALL
Developer User11509｜Date and time 23/11/8 5:01:17
Build time 151.328 sec｜Game capacity 4.247KB｜

Script

Sure! Here's a simple football game using a metal ball implemented as a single HTML file. It includes JavaScript code and uses pictograms for a smartphone interface. The game is a 2D side view, and there is one player on each team.

To play the game, you can use the W and S keys to control the blue player (player 1) on the left side. The Up and Down arrow keys control the red player (player 2) on the right side. The goal is to bounce the metal ball back and forth with the players and prevent it from crossing your goal line. Enjoy the game!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Football Game</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>

const ballRadius = 10;
    const player1Width = 20;
    const player1Height = 60;
    const player2Width = 20;
    const player2Height = 60;

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

const player1 = {
      x: 20,
      y: canvas.height / 2 - player1Height / 2,
      dy: 5,
      upPressed: false,
      downPressed: false,
    };

const player2 = {
      x: canvas.width - player2Width - 20,
      y: canvas.height / 2 - player2Height / 2,
      dy: 5,
      upPressed: false,
      downPressed: false,
    };

function drawBall() {
      context.beginPath();
      context.arc(ball.x, ball.y, ballRadius, 0, Math.PI * 2, false);
      context.fillStyle = 'gray';
      context.fill();
      context.closePath();
    }

function drawPlayer1() {
      context.beginPath();
      context.rect(player1.x, player1.y, player1Width, player1Height);
      context.fillStyle = 'blue';
      context.fill();
      context.closePath();
    }

function drawPlayer2() {
      context.beginPath();
      context.rect(player2.x, player2.y, player2Width, player2Height);
      context.fillStyle = 'red';
      context.fill();
      context.closePath();
    }

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

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

if (
        ball.y > player1.y &&
        ball.y < player1.y + player1Height &&
        ball.x - ballRadius <= player1.x + player1Width
      ) {
        ball.dx = -ball.dx;
      }

if (
        ball.y > player2.y &&
        ball.y < player2.y + player2Height &&
        ball.x + ballRadius >= player2.x
      ) {
        ball.dx = -ball.dx;
      }

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

if (player1.upPressed && player1.y > 0)
        player1.y -= player1.dy;
      else if (player1.downPressed && player1.y < canvas.height - player1Height)
        player1.y += player1.dy;

if (player2.upPressed && player2.y > 0)
        player2.y -= player2.dy;
      else if (player2.downPressed && player2.y < canvas.height - player2Height)
        player2.y += player2.dy;

requestAnimationFrame(draw);
    }

function keyDownHandler(event) {
      if (event.keyCode === 87) // W key
        player1.upPressed = true;
      else if (event.keyCode === 83) // S key
        player1.downPressed = true;
      else if (event.keyCode === 38) // Up arrow key
        player2.upPressed = true;
      else if (event.keyCode === 40) // Down arrow key
        player2.downPressed = true;
    }

function keyUpHandler(event) {
      if (event.keyCode === 87) // W key
        player1.upPressed = false;
      else if (event.keyCode === 83) // S key
        player1.downPressed = false;
      else if (event.keyCode === 38) // Up arrow key
        player2.upPressed = false;
      else if (event.keyCode === 40) // Down arrow key
        player2.downPressed = false;
    }

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

draw();
  </script>
</body>

</html>
```