Soccer Game

by casebash

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Soccer Game</title>
</head>
<body>
    <div id="score">Score: 0</div>
    <div id="gameArea">
        <div id="player"></div>
        <div id="aiPlayer" style="position:absolute; width:50px; height:50px; background:red;"></div>
        <div id="ball"></div>
        <div class="goal" id="leftGoal"></div>
        <div class="goal" id="rightGoal"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

#gameArea {
    width: 800px;
    height: 600px;
    position: relative;
    border: 1px solid black;
    overflow: hidden;
}

#score {
    margin-bottom: 20px;
    font-size: 24px;
}

#player {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: absolute;
}

#ball {
    width: 20px;
    height: 20px;
    background-color: red;
    position: absolute;
}

.goal {
    width: 20px;
    height: 100px;
    background-color: green;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#leftGoal {
    left: 0;
}

#rightGoal {
    right: 0;
}

JavaScript

// DOM Elements
const player = document.getElementById("player");
const ball = document.getElementById("ball");
const scoreElem = document.getElementById("score");
const aiPlayer = document.getElementById("aiPlayer");


// Constants for the position of the goals
const GOAL_LEFT_X = 20;
const GOAL_RIGHT_X = 780;

// Constants for acceptable distance to kick the ball
const KICK_TOLERANCE_X = 60;
const KICK_TOLERANCE_Y = 60;

// Constants for game rules and dimensions
const FIELD_WIDTH = 800;
const FIELD_HEIGHT = 600;
const GOAL_HEIGHT = 150;  // Increase the original height by 50%\
const GOAL_Y_START = (FIELD_HEIGHT - GOAL_HEIGHT) / 2;
const GOAL_Y_END = GOAL_Y_START + GOAL_HEIGHT;
const BALL_SPEED = 20;
const PLAYER_SPEED = 10;
const PLAYER_START_X = 40;
const PLAYER_SIZE = 50;
const GOAL_CENTER = (GOAL_Y_START + GOAL_Y_END) / 2;
const PLAYER_START_Y = GOAL_CENTER - PLAYER_SIZE / 2;
const BALL_START_X = FIELD_WIDTH / 2;
const BALL_START_Y = FIELD_HEIGHT / 2;
const BALL_SIZE = 20;
const DISTANCE_TOLERANCE = 60;

// AI Player
const AI_PLAYER_START_X = 730;
const AI_PLAYER_START_Y = GOAL_CENTER - PLAYER_SIZE / 2;
const AI_PLAYER_SPEED = 2;
const AI_KICK_POWER = 50;

const messageElem = createMessageElement();

// Game State Variables
let playerX = PLAYER_START_X;
let playerY = PLAYER_START_Y - PLAYER_SIZE / 2;
let ballX = BALL_START_X;
let ballY = BALL_START_Y;
let score = 0;
let isPaused = false;
let aiPlayerY = AI_PLAYER_START_Y;
let aiDirection = 1; // 1 for down, -1 for up

// Initialize
initializeAIPlayerPosition();
resetPlayerPosition();
updatePositions();

// Function Definitions
function initializeAIPlayerPosition() {
    aiPlayer.style.left = `${AI_PLAYER_START_X}px`;
    aiPlayer.style.top = `${AI_PLAYER_START_Y}px`;
}

function updateAIPlayer() {
    if (aiPlayerY >= GOAL_Y_END - PLAYER_SIZE || aiPlayerY <= GOAL_Y_START) {
        aiDirection *= -1; // Change direction
    }
    aiPlayerY += aiDirection * AI_PLAYER_SPEED;
    aiPlayer.style.left =...