first commit
This commit is contained in:
nix
Executable
+344
@@ -0,0 +1,344 @@
|
||||
// Configuration du jeu
|
||||
const config = {
|
||||
boardWidth: 800,
|
||||
boardHeight: 500,
|
||||
playerWidth: 10,
|
||||
playerHeight: 80,
|
||||
ballSize: 12,
|
||||
winningScore: 5
|
||||
};
|
||||
|
||||
// Éléments du DOM
|
||||
let board, context;
|
||||
let startScreen, gameContainer, gameOverScreen;
|
||||
let scoreElement, player1ScoreElement, player2ScoreElement, winnerText;
|
||||
|
||||
// État du jeu
|
||||
let score1 = 0;
|
||||
let score2 = 0;
|
||||
let gameRunning = false;
|
||||
let animationId = null;
|
||||
|
||||
// Joueurs
|
||||
let player1 = {
|
||||
x: 30,
|
||||
y: config.boardHeight / 2 - config.playerHeight / 2,
|
||||
width: config.playerWidth,
|
||||
height: config.playerHeight,
|
||||
velocityY: 0,
|
||||
speed: 8
|
||||
};
|
||||
|
||||
let player2 = {
|
||||
x: config.boardWidth - 30 - config.playerWidth,
|
||||
y: config.boardHeight / 2 - config.playerHeight / 2,
|
||||
width: config.playerWidth,
|
||||
height: config.playerHeight,
|
||||
velocityY: 0,
|
||||
speed: 8
|
||||
};
|
||||
|
||||
// Balle
|
||||
let ball = {
|
||||
x: config.boardWidth / 2,
|
||||
y: config.boardHeight / 2,
|
||||
width: config.ballSize,
|
||||
height: config.ballSize,
|
||||
velocityX: 5,
|
||||
velocityY: 0
|
||||
};
|
||||
|
||||
// Initialisation du jeu
|
||||
window.onload = function() {
|
||||
// Initialisation des éléments du DOM
|
||||
board = document.getElementById("board");
|
||||
context = board.getContext("2d");
|
||||
|
||||
// Configuration du canvas
|
||||
board.width = config.boardWidth;
|
||||
board.height = config.boardHeight;
|
||||
|
||||
// Récupération des éléments d'interface
|
||||
startScreen = document.getElementById("start-screen");
|
||||
gameContainer = document.getElementById("game-container");
|
||||
gameOverScreen = document.getElementById("game-over");
|
||||
player1ScoreElement = document.getElementById("player1-score");
|
||||
player2ScoreElement = document.getElementById("player2-score");
|
||||
winnerText = document.getElementById("winner-text");
|
||||
|
||||
// Configuration des écouteurs d'événements
|
||||
document.getElementById("start-button").addEventListener("click", startGame);
|
||||
document.getElementById("restart-button").addEventListener("click", resetGame);
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
document.addEventListener("keyup", handleKeyUp);
|
||||
|
||||
// Afficher l'écran de démarrage
|
||||
showScreen("start");
|
||||
};
|
||||
|
||||
// Gestion des écrans
|
||||
function showScreen(screen) {
|
||||
startScreen.style.display = screen === "start" ? "flex" : "none";
|
||||
gameContainer.style.display = screen === "game" ? "block" : "none";
|
||||
gameOverScreen.style.display = screen === "gameOver" ? "flex" : "none";
|
||||
}
|
||||
|
||||
// Démarrer une nouvelle partie
|
||||
function startGame() {
|
||||
resetGame();
|
||||
showScreen("game");
|
||||
gameRunning = true;
|
||||
update();
|
||||
}
|
||||
|
||||
// Réinitialiser le jeu
|
||||
function resetGame() {
|
||||
// Réinitialiser les scores
|
||||
score1 = 0;
|
||||
score2 = 0;
|
||||
updateScore();
|
||||
|
||||
// Réinitialiser les positions des joueurs
|
||||
player1.y = config.boardHeight / 2 - player1.height / 2;
|
||||
player2.y = config.boardHeight / 2 - player2.height / 2;
|
||||
|
||||
// Réinitialiser la balle
|
||||
resetBall();
|
||||
}
|
||||
|
||||
// Réinitialiser la balle au centre
|
||||
function resetBall() {
|
||||
ball.x = config.boardWidth / 2 - ball.width / 2;
|
||||
ball.y = config.boardHeight / 2 - ball.height / 2;
|
||||
ball.velocityX = Math.random() > 0.5 ? 5 : -5;
|
||||
ball.velocityY = (Math.random() * 6) - 3;
|
||||
}
|
||||
|
||||
// Mettre à jour l'affichage des scores
|
||||
function updateScore() {
|
||||
player1ScoreElement.textContent = score1;
|
||||
player2ScoreElement.textContent = score2;
|
||||
|
||||
// Vérifier si un joueur a gagné
|
||||
if (score1 >= config.winningScore || score2 >= config.winningScore) {
|
||||
endGame();
|
||||
}
|
||||
}
|
||||
|
||||
// Fin de la partie
|
||||
function endGame() {
|
||||
gameRunning = false;
|
||||
cancelAnimationFrame(animationId);
|
||||
|
||||
// Déterminer le gagnant
|
||||
const winner = score1 > score2 ? "Joueur 1" : "Joueur 2";
|
||||
winnerText.textContent = `${winner} a gagné !`;
|
||||
|
||||
// Afficher l'écran de fin de partie
|
||||
showScreen("gameOver");
|
||||
}
|
||||
|
||||
// Boucle de jeu principale
|
||||
function update() {
|
||||
if (!gameRunning) return;
|
||||
|
||||
// Effacer le canvas
|
||||
context.clearRect(0, 0, config.boardWidth, config.boardHeight);
|
||||
|
||||
// Dessiner le terrain
|
||||
drawField();
|
||||
|
||||
// Mettre à jour et dessiner les joueurs
|
||||
updatePlayer(player1);
|
||||
updatePlayer(player2);
|
||||
drawPlayer(player1);
|
||||
drawPlayer(player2);
|
||||
|
||||
// Mettre à jour et dessiner la balle
|
||||
updateBall();
|
||||
drawBall();
|
||||
|
||||
// Vérifier les collisions
|
||||
checkCollisions();
|
||||
|
||||
// Continuer la boucle d'animation
|
||||
animationId = requestAnimationFrame(update);
|
||||
}
|
||||
|
||||
// Dessiner le terrain
|
||||
function drawField() {
|
||||
// Fond
|
||||
context.fillStyle = "#0d1b2a";
|
||||
context.fillRect(0, 0, config.boardWidth, config.boardHeight);
|
||||
|
||||
// Ligne médiane en pointillés
|
||||
context.strokeStyle = "rgba(255, 255, 255, 0.2)";
|
||||
context.setLineDash([10, 10]);
|
||||
context.beginPath();
|
||||
context.moveTo(config.boardWidth / 2, 0);
|
||||
context.lineTo(config.boardWidth / 2, config.boardHeight);
|
||||
context.stroke();
|
||||
context.setLineDash([]);
|
||||
}
|
||||
|
||||
// Mettre à jour la position d'un joueur
|
||||
function updatePlayer(player) {
|
||||
// Mettre à jour la position
|
||||
player.y += player.velocityY;
|
||||
|
||||
// Limites du terrain
|
||||
if (player.y < 0) player.y = 0;
|
||||
if (player.y + player.height > config.boardHeight) {
|
||||
player.y = config.boardHeight - player.height;
|
||||
}
|
||||
}
|
||||
|
||||
// Dessiner un joueur
|
||||
function drawPlayer(player) {
|
||||
context.fillStyle = "#00b4d8";
|
||||
context.fillRect(player.x, player.y, player.width, player.height);
|
||||
|
||||
// Effet de brillance
|
||||
const gradient = context.createLinearGradient(player.x, 0, player.x + player.width, 0);
|
||||
gradient.addColorStop(0, 'rgba(255, 255, 255, 0.3)');
|
||||
gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
|
||||
context.fillStyle = gradient;
|
||||
context.fillRect(player.x, player.y, player.width / 2, player.height);
|
||||
}
|
||||
|
||||
// Mettre à jour la position de la balle
|
||||
function updateBall() {
|
||||
ball.x += ball.velocityX;
|
||||
ball.y += ball.velocityY;
|
||||
|
||||
// Rebond sur les bords haut et bas
|
||||
if (ball.y <= 0 || ball.y + ball.height >= config.boardHeight) {
|
||||
ball.velocityY *= -1;
|
||||
}
|
||||
|
||||
// Vérifier si un joueur marque un point
|
||||
if (ball.x < 0) {
|
||||
// Joueur 2 marque un point
|
||||
score2++;
|
||||
updateScore();
|
||||
resetBall();
|
||||
} else if (ball.x > config.boardWidth) {
|
||||
// Joueur 1 marque un point
|
||||
score1++;
|
||||
updateScore();
|
||||
resetBall();
|
||||
}
|
||||
}
|
||||
|
||||
// Dessiner la balle
|
||||
function drawBall() {
|
||||
// Effet de brillance
|
||||
const gradient = context.createRadialGradient(
|
||||
ball.x + ball.width / 2,
|
||||
ball.y + ball.height / 2,
|
||||
0,
|
||||
ball.x + ball.width / 2,
|
||||
ball.y + ball.height / 2,
|
||||
ball.width / 2
|
||||
);
|
||||
gradient.addColorStop(0, '#ffffff');
|
||||
gradient.addColorStop(1, '#90e0ef');
|
||||
|
||||
context.fillStyle = gradient;
|
||||
context.beginPath();
|
||||
context.arc(
|
||||
ball.x + ball.width / 2,
|
||||
ball.y + ball.height / 2,
|
||||
ball.width / 2,
|
||||
0,
|
||||
Math.PI * 2
|
||||
);
|
||||
context.fill();
|
||||
|
||||
// Effet de lueur
|
||||
context.shadowColor = '#00b4d8';
|
||||
context.shadowBlur = 15;
|
||||
context.fill();
|
||||
context.shadowBlur = 0;
|
||||
}
|
||||
|
||||
// Vérifier les collisions
|
||||
function checkCollisions() {
|
||||
// Collision avec le joueur 1 (gauche)
|
||||
if (ball.x <= player1.x + player1.width &&
|
||||
ball.x + ball.width >= player1.x &&
|
||||
ball.y + ball.height >= player1.y &&
|
||||
ball.y <= player1.y + player1.height) {
|
||||
|
||||
// Inverser la direction horizontale
|
||||
ball.velocityX = Math.abs(ball.velocityX);
|
||||
|
||||
// Ajuster la direction verticale en fonction de l'endroit où la balle touche la raquette
|
||||
const hitPosition = (ball.y - (player1.y + player1.height / 2)) / (player1.height / 2);
|
||||
ball.velocityY = hitPosition * 8;
|
||||
|
||||
// Augmenter légèrement la vitesse
|
||||
ball.velocityX *= 1.05;
|
||||
ball.velocityY *= 1.05;
|
||||
}
|
||||
|
||||
// Collision avec le joueur 2 (droite)
|
||||
if (ball.x + ball.width >= player2.x &&
|
||||
ball.x <= player2.x + player2.width &&
|
||||
ball.y + ball.height >= player2.y &&
|
||||
ball.y <= player2.y + player2.height) {
|
||||
|
||||
// Inverser la direction horizontale
|
||||
ball.velocityX = -Math.abs(ball.velocityX);
|
||||
|
||||
// Ajuster la direction verticale
|
||||
const hitPosition = (ball.y - (player2.y + player2.height / 2)) / (player2.height / 2);
|
||||
ball.velocityY = hitPosition * 8;
|
||||
|
||||
// Augmenter légèrement la vitesse
|
||||
ball.velocityX *= 1.05;
|
||||
ball.velocityY *= 1.05;
|
||||
}
|
||||
}
|
||||
|
||||
// Gestion des touches enfoncées
|
||||
function handleKeyDown(e) {
|
||||
// Joueur 1 (W/S)
|
||||
if (e.key.toLowerCase() === 'w') {
|
||||
player1.velocityY = -player1.speed;
|
||||
} else if (e.key.toLowerCase() === 's') {
|
||||
player1.velocityY = player1.speed;
|
||||
}
|
||||
|
||||
// Joueur 2 (Flèches)
|
||||
if (e.key === 'ArrowUp') {
|
||||
player2.velocityY = -player2.speed;
|
||||
} else if (e.key === 'ArrowDown') {
|
||||
player2.velocityY = player2.speed;
|
||||
}
|
||||
|
||||
// Touche Espace pour démarrer/redémarrer
|
||||
if (e.code === 'Space' && !gameRunning) {
|
||||
if (startScreen.style.display === 'flex') {
|
||||
startGame();
|
||||
} else if (gameOverScreen.style.display === 'flex') {
|
||||
resetGame();
|
||||
startGame();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Gestion du relâchement des touches
|
||||
function handleKeyUp(e) {
|
||||
// Joueur 1 (W/S)
|
||||
if ((e.key.toLowerCase() === 'w' && player1.velocityY < 0) ||
|
||||
(e.key.toLowerCase() === 's' && player1.velocityY > 0)) {
|
||||
player1.velocityY = 0;
|
||||
}
|
||||
|
||||
// Joueur 2 (Flèches)
|
||||
if ((e.key === 'ArrowUp' && player2.velocityY < 0) ||
|
||||
(e.key === 'ArrowDown' && player2.velocityY > 0)) {
|
||||
player2.velocityY = 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user