CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Football Frenzy</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.footballfrenzy7492-body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.footballfrenzy7492-container {
display: flex;
flex-direction: column;
align-items: center;
}
.footballfrenzy7492-game-area {
width: 600px;
height: 400px;
background-color: #4CAF50;
position: relative;
border: 2px solid #333;
}
.footballfrenzy7492-player {
position: absolute;
font-size: 24px;
transition: all 0.1s;
}
.footballfrenzy7492-ball {
position: absolute;
font-size: 16px;
transition: all 0.05s;
}
.footballfrenzy7492-goal {
position: absolute;
top: 150px;
width: 10px;
height: 100px;
background-color: white;
}
.footballfrenzy7492-score {
font-size: 24px;
margin-bottom: 10px;
}
.footballfrenzy7492-controls {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 20px;
}
.footballfrenzy7492-button {
margin: 5px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
.footballfrenzy7492-instructions {
margin-top: 20px;
text-align: left;
}
@media (max-width: 768px) {
.footballfrenzy7492-game-area {
width: 100%;
height: 300px;
}
.footballfrenzy7492-container {
flex-direction: column-reverse;
}
}
</style>
</head>
<body class="footballfrenzy7492-body">
<div class="footballfrenzy7492-container">
<div class="footballfrenzy7492-game-area">
<div id="player1" class="footballfrenzy7492-player"><i class="fas fa-running" style="color: blue;"></i></div>
<div id="player2" class="footballfrenzy7492-player"><i class="fas fa-running" style="color: red;"></i></div>
<div id="ball" class="footballfrenzy7492-ball"><i class="fas fa-futbol"></i></div>
<div class="footballfrenzy7492-goal" style="left: 0;"></div>
<div class="footballfrenzy7492-goal" style="right: 0;"></div>
</div>
<div class="footballfrenzy7492-score">
Blue: <span id="score1">0</span> - Red: <span id="score2">0</span>
</div>
<div class="footballfrenzy7492-controls">
<h2>Football Frenzy</h2>
<p>A 2-player football game</p>
<button id="startBtn" class="footballfrenzy7492-button">Start Game</button>
<button id="newGameBtn" class="footballfrenzy7492-button">New Game</button>
<div class="footballfrenzy7492-instructions">
<h3>How to play:</h3>
<ul>
<li>Blue player: Use W, A, S, D to move, Space to kick/block</li>
<li>Red player: Use Arrow keys to move, Enter to kick/block</li>
<li>Score by getting the ball into the opponent's goal</li>
<li>First to 5 points wins!</li>
</ul>
</div>
</div>
</div>
<script>
const player1 = document.getElementById('player1');
const player2 = document.getElementById('player2');
const ball = document.getElementById('ball');
const startBtn = document.getElementById('startBtn');
const newGameBtn = document.getElementById('newGameBtn');
const score1Elem = document.getElementById('score1');
const score2Elem = document.getElementById('score2');
let gameLoop;
let player1Pos = { x: 50, y: 200 };
let player2Pos = { x: 530, y: 200 };
let ballPos = { x: 300, y: 200 };
let ballVelocity = { x: 0, y: 0 };
let score1 = 0;
let score2 = 0;
let player1Blocking = false;
let player2Blocking = false;
let keysPressed = {};
function updatePositions() {
player1.style.left = `${player1Pos.x}px`;
player1.style.top = `${player1Pos.y}px`;
player2.style.left = `${player2Pos.x}px`;
player2.style.top = `${player2Pos.y}px`;
ball.style.left = `${ballPos.x}px`;
ball.style.top = `${ballPos.y}px`;
}
function resetPositions() {
player1Pos = { x: 50, y: 200 };
player2Pos = { x: 530, y: 200 };
ballPos = { x: 300, y: 200 };
ballVelocity = { x: 0, y: 0 };
updatePositions();
}
function startGame() {
if (!gameLoop) {
gameLoop = setInterval(gameUpdate, 20);
startBtn.textContent = 'Pause';
} else {
clearInterval(gameLoop);
gameLoop = null;
startBtn.textContent = 'Resume';
}
}
function newGame() {
score1 = 0;
score2 = 0;
score1Elem.textContent = score1;
score2Elem.textContent = score2;
resetPositions();
if (gameLoop) {
clearInterval(gameLoop);
gameLoop = null;
startBtn.textContent = 'Start Game';
}
}
function gameUpdate() {
movePlayer(1);
movePlayer(2);
moveBall();
checkCollisions();
checkGoal();
updatePositions();
}
function movePlayer(playerNum) {
let pos = playerNum === 1 ? player1Pos : player2Pos;
let speed = 5;
let diagonalSpeed = speed / Math.sqrt(2);
let dx = 0, dy = 0;
if (playerNum === 1) {
if (keysPressed['a']) dx -= speed;
if (keysPressed['d']) dx += speed;
if (keysPressed['w']) dy -= speed;
if (keysPressed['s']) dy += speed;
} else {
if (keysPressed['ArrowLeft']) dx -= speed;
if (keysPressed['ArrowRight']) dx += speed;
if (keysPressed['ArrowUp']) dy -= speed;
if (keysPressed['ArrowDown']) dy += speed;
}
if (dx !== 0 && dy !== 0) {
dx = dx > 0 ? diagonalSpeed : -diagonalSpeed;
dy = dy > 0 ? diagonalSpeed : -diagonalSpeed;
}
pos.x = Math.max(0, Math.min(580, pos.x + dx));
pos.y = Math.max(0, Math.min(380, pos.y + dy));
// Update player facing direction
let playerElement = playerNum === 1 ? player1 : player2;
if (dx < 0) {
playerElement.style.transform = 'scaleX(-1)';
} else if (dx > 0) {
playerElement.style.transform = 'scaleX(1)';
}
}
function moveBall() {
ballPos.x += ballVelocity.x;
ballPos.y += ballVelocity.y;
ballVelocity.x *= 0.99;
ballVelocity.y *= 0.99;
}
function checkCollisions() {
if (ballPos.x < 0 || ballPos.x > 584) ballVelocity.x *= -1;
if (ballPos.y < 0 || ballPos.y > 384) ballVelocity.y *= -1;
if (distance(ballPos, player1Pos) < 20) {
if (player1Blocking) {
ballVelocity.x *= -0.5;
ballVelocity.y *= -0.5;
} else {
let angle = Math.atan2(ballPos.y - player1Pos.y, ballPos.x - player1Pos.x);
ballVelocity.x = Math.cos(angle) * 5;
ballVelocity.y = Math.sin(angle) * 5;
}
}
if (distance(ballPos, player2Pos) < 20) {
if (player2Blocking) {
ballVelocity.x *= -0.5;
ballVelocity.y *= -0.5;
} else {
let angle = Math.atan2(ballPos.y - player2Pos.y, ballPos.x - player2Pos.x);
ballVelocity.x = Math.cos(angle) * 5;
ballVelocity.y = Math.sin(angle) * 5;
}
}
}
function checkGoal() {
if (ballPos.x < 10 && ballPos.y > 150 && ballPos.y < 250) {
score2++;
score2Elem.textContent = score2;
resetPositions();
} else if (ballPos.x > 574 && ballPos.y > 150 && ballPos.y < 250) {
score1++;
score1Elem.textContent = score1;
resetPositions();
}
if (score1 >= 5 || score2 >= 5) {
alert(`Game Over! ${score1 >= 5 ? 'Blue' : 'Red'} player wins!`);
newGame();
}
}
function distance(pos1, pos2) {
return Math.sqrt((pos1.x - pos2.x)**2 + (pos1.y - pos2.y)**2);
}
document.addEventListener('keydown', (e) => {
keysPressed[e.key] = true;
if (e.key === ' ') {
if (distance(ballPos, player1Pos) < 30) {
ballVelocity.x = 8;
ballVelocity.y = (ballPos.y - player1Pos.y) / 5;
} else {
player1Blocking = true;
}
}
if (e.key === 'Enter') {
if (distance(ballPos, player2Pos) < 30) {
ballVelocity.x = -8;
ballVelocity.y = (ballPos.y - player2Pos.y) / 5;
} else {
player2Blocking = true;
}
}
});
document.addEventListener('keyup', (e) => {
keysPressed[e.key] = false;
if (e.key === ' ') player1Blocking = false;
if (e.key === 'Enter') player2Blocking = false;
});
startBtn.addEventListener('click', startGame);
newGameBtn.addEventListener('click', newGame);
resetPositions();
</script>
</body>
</html>