Spaces:
Running
Running
File size: 5,194 Bytes
cc01012 a126240 cc01012 d12c958 cc01012 d12c958 cc01012 20032bf cc01012 d12c958 20032bf a126240 20032bf d12c958 1494a8c 20032bf a126240 20032bf a126240 20032bf a126240 20032bf c15f632 20032bf cc01012 20032bf cc01012 20032bf a126240 20032bf a126240 20032bf cc01012 20032bf a126240 20032bf cc01012 a126240 20032bf cc01012 a126240 d12c958 1494a8c 20032bf cc01012 20032bf a126240 20032bf a126240 20032bf a126240 cc01012 20032bf a126240 20032bf cc01012 20032bf a126240 cc01012 d12c958 cc01012 20032bf a126240 20032bf d12c958 cc01012 d12c958 cc01012 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pong Game (Player vs AI)</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #000;
}
canvas {
border: 2px solid #fff;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="500"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// Game variables
const screenWidth = 800;
const screenHeight = 500;
let playerScore = 0;
let aiScore = 0;
// Ball
const ball = {
x: screenWidth / 2,
y: screenHeight / 2,
width: 30,
height: 30,
speedX: 7,
speedY: 7
};
// Paddles
const paddleWidth = 10;
const paddleHeight = 140;
const playerPaddle = {
x: 10,
y: screenHeight / 2 - paddleHeight / 2,
width: paddleWidth,
height: paddleHeight,
speed: 0
};
const aiPaddle = {
x: screenWidth - 20,
y: screenHeight / 2 - paddleHeight / 2,
width: paddleWidth,
height: paddleHeight,
speed: 5
};
function ballAnimation() {
ball.x += ball.speedX;
ball.y += ball.speedY;
if (ball.y <= 0 || ball.y + ball.height >= screenHeight) {
ball.speedY *= -1;
}
if (ball.x + ball.width >= screenWidth) {
playerScore++;
ballRestart();
} else if (ball.x <= 0) {
aiScore++;
ballRestart();
}
if (
(ball.x <= playerPaddle.x + playerPaddle.width &&
ball.y + ball.height >= playerPaddle.y &&
ball.y <= playerPaddle.y + playerPaddle.height) ||
(ball.x + ball.width >= aiPaddle.x &&
ball.y + ball.height >= aiPaddle.y &&
ball.y <= aiPaddle.y + aiPaddle.height)
) {
ball.speedX *= -1;
}
}
function playerPaddleAnimation() {
playerPaddle.y = Math.max(0, Math.min(screenHeight - playerPaddle.height, playerPaddle.y + playerPaddle.speed));
}
function aiPaddleAnimation() {
const paddleCenter = aiPaddle.y + aiPaddle.height / 2;
const ballCenter = ball.y + ball.height / 2;
if (paddleCenter < ballCenter - 35) {
aiPaddle.y += aiPaddle.speed;
} else if (paddleCenter > ballCenter + 35) {
aiPaddle.y -= aiPaddle.speed;
}
aiPaddle.y = Math.max(0, Math.min(screenHeight - aiPaddle.height, aiPaddle.y));
}
function ballRestart() {
ball.x = screenWidth / 2;
ball.y = screenHeight / 2;
ball.speedX *= -1;
}
function draw() {
// Clear canvas
ctx.fillStyle = 'rgb(30, 30, 30)';
ctx.fillRect(0, 0, screenWidth, screenHeight);
// Draw middle line
ctx.strokeStyle = 'rgb(200, 200, 200)';
ctx.beginPath();
ctx.moveTo(screenWidth / 2, 0);
ctx.lineTo(screenWidth / 2, screenHeight);
ctx.stroke();
// Draw paddles
ctx.fillStyle = 'blue';
ctx.fillRect(playerPaddle.x, playerPaddle.y, playerPaddle.width, playerPaddle.height);
ctx.fillStyle = 'red';
ctx.fillRect(aiPaddle.x, aiPaddle.y, aiPaddle.width, aiPaddle.height);
// Draw ball
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(ball.x + ball.width / 2, ball.y + ball.height / 2, ball.width / 2, 0, Math.PI * 2);
ctx.fill();
// Draw scores
ctx.font = '32px Arial';
ctx.fillStyle = 'white';
ctx.fillText(playerScore, 360, 40);
ctx.fillText(aiScore, 420, 40);
}
function gameLoop() {
ballAnimation();
playerPaddleAnimation();
aiPaddleAnimation();
draw();
requestAnimationFrame(gameLoop);
}
// Keyboard controls
document.addEventListener('keydown', (event) => {
if (event.key === 'w' || event.key === 'W') {
playerPaddle.speed = -7;
} else if (event.key === 's' || event.key === 'S') {
playerPaddle.speed = 7;
}
});
document.addEventListener('keyup', (event) => {
if (event.key === 'w' || event.key === 'W' || event.key === 's' || event.key === 'S') {
playerPaddle.speed = 0;
}
});
// Start the game
gameLoop();
</script>
</body>
</html> |