nix
121 lines
3.3 KiB
HTML
Executable File
121 lines
3.3 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Pong Game</title>
|
|
<style>
|
|
body {
|
|
background: #111;
|
|
color: #fff;
|
|
font-family: sans-serif;
|
|
text-align: center;
|
|
}
|
|
canvas {
|
|
display: block;
|
|
margin: 20px auto;
|
|
background: #222;
|
|
border: 2px solid #fff;
|
|
}
|
|
h1 {
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Pong 🏓</h1>
|
|
<canvas id="game" width="600" height="400"></canvas>
|
|
<p>Joueur à gauche, utilisez W/S pour jouer.</p>
|
|
<script>
|
|
const canvas = document.getElementById("game");
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
const paddleWidth = 10, paddleHeight = 80, ballSize = 10;
|
|
let player = { x: 0, y: canvas.height/2 - paddleHeight/2, dy: 0, score: 0 };
|
|
let ai = { x: canvas.width - paddleWidth, y: canvas.height/2 - paddleHeight/2, dy: 2, score: 0 };
|
|
let ball = { x: canvas.width/2, y: canvas.height/2, dx: 4, dy: 4 };
|
|
|
|
function drawRect(x, y, w, h, color) {
|
|
ctx.fillStyle = color;
|
|
ctx.fillRect(x, y, w, h);
|
|
}
|
|
|
|
function drawCircle(x, y, r, color) {
|
|
ctx.fillStyle = color;
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, r, 0, Math.PI*2);
|
|
ctx.fill();
|
|
}
|
|
|
|
function draw() {
|
|
drawRect(0, 0, canvas.width, canvas.height, "#222");
|
|
drawRect(player.x, player.y, paddleWidth, paddleHeight, "lime");
|
|
drawRect(ai.x, ai.y, paddleWidth, paddleHeight, "red");
|
|
drawCircle(ball.x, ball.y, ballSize, "white");
|
|
ctx.fillStyle = "white";
|
|
ctx.font = "20px sans-serif";
|
|
ctx.fillText(`${player.score} : ${ai.score}`, canvas.width/2 - 20, 30);
|
|
}
|
|
|
|
function update() {
|
|
ball.x += ball.dx;
|
|
ball.y += ball.dy;
|
|
|
|
// Ball collision with top/bottom
|
|
if (ball.y < 0 || ball.y > canvas.height) ball.dy *= -1;
|
|
|
|
// Ball collision with player paddle
|
|
if (ball.x < player.x + paddleWidth && ball.x > player.x &&
|
|
ball.y > player.y && ball.y < player.y + paddleHeight) {
|
|
ball.dx *= -1;
|
|
ball.x = player.x + paddleWidth;
|
|
}
|
|
|
|
// Ball collision with AI paddle
|
|
if (ball.x > ai.x - ballSize && ball.x < ai.x + paddleWidth &&
|
|
ball.y > ai.y && ball.y < ai.y + paddleHeight) {
|
|
ball.dx *= -1;
|
|
ball.x = ai.x - ballSize;
|
|
}
|
|
|
|
// Score
|
|
if (ball.x < 0) { ai.score++; resetBall(); }
|
|
if (ball.x > canvas.width) { player.score++; resetBall(); }
|
|
|
|
// Move AI
|
|
if (ball.y < ai.y + paddleHeight/2) ai.y -= ai.dy;
|
|
else ai.y += ai.dy;
|
|
if (ai.y < 0) ai.y = 0;
|
|
if (ai.y + paddleHeight > canvas.height) ai.y = canvas.height - paddleHeight;
|
|
|
|
// Move player
|
|
player.y += player.dy;
|
|
if (player.y < 0) player.y = 0;
|
|
if (player.y + paddleHeight > canvas.height) player.y = canvas.height - paddleHeight;
|
|
}
|
|
|
|
function resetBall() {
|
|
ball.x = canvas.width/2;
|
|
ball.y = canvas.height/2;
|
|
ball.dx *= -1;
|
|
ball.dy = 4 * (Math.random() > 0.5 ? 1 : -1);
|
|
}
|
|
|
|
function gameLoop() {
|
|
update();
|
|
draw();
|
|
requestAnimationFrame(gameLoop);
|
|
}
|
|
|
|
document.addEventListener("keydown", e => {
|
|
if (e.key === "w") player.dy = -4;
|
|
if (e.key === "s") player.dy = 4;
|
|
});
|
|
document.addEventListener("keyup", e => {
|
|
if (e.key === "w" || e.key === "s") player.dy = 0;
|
|
});
|
|
|
|
requestAnimationFrame(gameLoop);
|
|
</script>
|
|
</body>
|
|
</html>
|