Soccer referee simulator's game

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

No:8365

1779

←

Prev Next

→

Soccer referee simulator
Developer User4180｜Date and time 23/7/15 14:53:39
Build time 25.148 sec｜Game capacity 3.312KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Soccer Referee Simulator</title>
</head>
<body>
  <canvas id="field" width="400" height="600"></canvas>
  <script>
    // Soccer field properties
    const fieldWidth = 400;
    const fieldHeight = 600;
    const goalAreaHeight = 100;

// Soccer ball properties
    const ballRadius = 10;

// Referee properties
    const refereeRadius = 20;

// Player properties
    const playerRadius = 15;
    const playerSpeed = 3;

// Game variables
    let ballPositionX = fieldWidth / 2;
    let ballPositionY = fieldHeight / 2;
    let refereePositionX = fieldWidth / 2;
    let refereePositionY = fieldHeight - goalAreaHeight - refereeRadius;
    let playerPositionX = fieldWidth / 2;
    let playerPositionY = fieldHeight - playerRadius;

// Function to draw the soccer field
    function drawField() {
      const canvas = document.getElementById('field');
      const context = canvas.getContext('2d');

// Clear the canvas
      context.clearRect(0, 0, fieldWidth, fieldHeight);

// Draw soccer field boundaries
      context.strokeRect(0, 0, fieldWidth, fieldHeight);

// Draw goal areas
      context.fillRect(0, 0, fieldWidth, goalAreaHeight);
      context.fillRect(0, fieldHeight - goalAreaHeight, fieldWidth, goalAreaHeight);

// Draw the soccer ball
      context.beginPath();
      context.arc(ballPositionX, ballPositionY, ballRadius, 0, Math.PI * 2);
      context.fillStyle = 'black';
      context.fill();
      context.closePath();

// Draw the referee
      context.beginPath();
      context.arc(refereePositionX, refereePositionY, refereeRadius, 0, Math.PI * 2);
      context.fillStyle = 'red';
      context.fill();
      context.closePath();

// Draw the player
      context.beginPath();
      context.arc(playerPositionX, playerPositionY, playerRadius, 0, Math.PI * 2);
      context.fillStyle = 'blue';
      context.fill();
      context.closePath();
    }

// Function to handle player movement
    function movePlayer(event) {
      switch (event.keyCode) {
        case 37: // Left arrow key
          if (playerPositionX > playerRadius) {
            playerPositionX -= playerSpeed;
          }
          break;
        case 39: // Right arrow key
          if (playerPositionX < fieldWidth - playerRadius) {
            playerPositionX += playerSpeed;
          }
          break;
      }
    }

// Function to check collisions
    function checkCollisions() {
      // Check if the player and referee collide
      const distance = Math.sqrt(Math.pow(playerPositionX - refereePositionX, 2) +
        Math.pow(playerPositionY - refereePositionY, 2));
      if (distance <= playerRadius + refereeRadius) {
        alert('Foul! The player fouls the referee.');
      }

// Check if the player and ball collide
      const distanceToBall = Math.sqrt(Math.pow(playerPositionX - ballPositionX, 2) +
        Math.pow(playerPositionY - ballPositionY, 2));
      if (distanceToBall <= playerRadius + ballRadius) {
        alert('Goal! The player scores!');
      }
    }

// Event listeners
    document.addEventListener('keydown', movePlayer);

// Game loop
    setInterval(function() {
      checkCollisions();
      drawField();
    }, 1000 / 60);
  </script>
</body>
</html>