252 lines
7.0 KiB
HTML
252 lines
7.0 KiB
HTML
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Casse-briques Autonome</title>
|
|
<!-- Chargement de Tailwind CSS pour le design de la page -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body
|
|
class="bg-slate-900 text-slate-100 flex flex-col items-center justify-center min-h-screen select-none"
|
|
>
|
|
<h1 class="text-3xl font-extrabold mb-4 tracking-wider text-amber-400">
|
|
CASSE-BRIQUES
|
|
</h1>
|
|
|
|
<!-- Conteneur du jeu -->
|
|
<div
|
|
class="relative bg-slate-800 p-4 rounded-2xl shadow-2xl border border-slate-700"
|
|
>
|
|
<canvas
|
|
id="gameCanvas"
|
|
width="480"
|
|
height="320"
|
|
class="bg-slate-950 rounded-lg shadow-inner block"
|
|
></canvas>
|
|
</div>
|
|
|
|
<p class="text-xs text-slate-400 mt-4">
|
|
Utilisez les touches fléchées **←** et **→** (ou **Q** et **D**) pour
|
|
déplacer la raquette.
|
|
</p>
|
|
|
|
<script>
|
|
const canvas = document.getElementById("gameCanvas");
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
// Paramètres de la balle
|
|
let x = canvas.width / 2;
|
|
let y = canvas.height - 30;
|
|
let dx = 2;
|
|
let dy = -2;
|
|
const ballRadius = 6;
|
|
|
|
// Paramètres de la raquette
|
|
const paddleHeight = 10;
|
|
const paddleWidth = 75;
|
|
let paddleX = (canvas.width - paddleWidth) / 2;
|
|
|
|
// Contrôles
|
|
let rightPressed = false;
|
|
let leftPressed = false;
|
|
|
|
// Paramètres des briques
|
|
const brickRowCount = 4;
|
|
const brickColumnCount = 7;
|
|
const brickWidth = 60;
|
|
const brickHeight = 20;
|
|
const brickPadding = 8;
|
|
const brickOffsetTop = 30;
|
|
const brickOffsetLeft = 18;
|
|
|
|
let score = 0;
|
|
let lives = 3;
|
|
|
|
// Initialisation du tableau des briques
|
|
const bricks = [];
|
|
for (let c = 0; c < brickColumnCount; c++) {
|
|
bricks[c] = [];
|
|
for (let r = 0; r < brickRowCount; r++) {
|
|
bricks[c][r] = { x: 0, y: 0, status: 1 };
|
|
}
|
|
}
|
|
|
|
// Écouteurs d'événements clavier
|
|
document.addEventListener("keydown", keyDownHandler, false);
|
|
document.addEventListener("keyup", keyUpHandler, false);
|
|
|
|
function keyDownHandler(e) {
|
|
if (
|
|
e.key === "Right" ||
|
|
e.key === "ArrowRight" ||
|
|
e.key === "d" ||
|
|
e.key === "D"
|
|
) {
|
|
rightPressed = true;
|
|
} else if (
|
|
e.key === "Left" ||
|
|
e.key === "ArrowLeft" ||
|
|
e.key === "q" ||
|
|
e.key === "Q"
|
|
) {
|
|
leftPressed = true;
|
|
}
|
|
}
|
|
|
|
function keyUpHandler(e) {
|
|
if (
|
|
e.key === "Right" ||
|
|
e.key === "ArrowRight" ||
|
|
e.key === "d" ||
|
|
e.key === "D"
|
|
) {
|
|
rightPressed = false;
|
|
} else if (
|
|
e.key === "Left" ||
|
|
e.key === "ArrowLeft" ||
|
|
e.key === "q" ||
|
|
e.key === "Q"
|
|
) {
|
|
leftPressed = false;
|
|
}
|
|
}
|
|
|
|
// Détection des collisions avec les briques
|
|
function collisionDetection() {
|
|
for (let c = 0; c < brickColumnCount; c++) {
|
|
for (let r = 0; r < brickRowCount; r++) {
|
|
const b = bricks[c][r];
|
|
if (b.status === 1) {
|
|
if (
|
|
x > b.x &&
|
|
x < b.x + brickWidth &&
|
|
y > b.y &&
|
|
y < b.y + brickHeight
|
|
) {
|
|
dy = -dy;
|
|
b.status = 0;
|
|
score += 10;
|
|
// Victoire
|
|
if (score === brickRowCount * brickColumnCount * 10) {
|
|
alert("VICTOIRE ! Félicitations !");
|
|
document.location.reload();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Dessiner la balle
|
|
function drawBall() {
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
|
|
ctx.fillStyle = "#f43f5e"; // Rouge vif
|
|
ctx.fill();
|
|
ctx.closePath();
|
|
}
|
|
|
|
// Dessiner la raquette
|
|
function drawPaddle() {
|
|
ctx.beginPath();
|
|
ctx.rect(
|
|
paddleX,
|
|
canvas.height - paddleHeight - 10,
|
|
paddleWidth,
|
|
paddleHeight,
|
|
);
|
|
ctx.fillStyle = "#38bdf8"; // Bleu clair
|
|
ctx.fill();
|
|
ctx.closePath();
|
|
}
|
|
|
|
// Dessiner les briques
|
|
function drawBricks() {
|
|
const colors = ["#f59e0b", "#10b981", "#6366f1", "#ec4899"]; // Couleurs par ligne
|
|
for (let c = 0; c < brickColumnCount; c++) {
|
|
for (let r = 0; r < brickRowCount; r++) {
|
|
if (bricks[c][r].status === 1) {
|
|
const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
|
|
const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
|
|
bricks[c][r].x = brickX;
|
|
bricks[c][r].y = brickY;
|
|
ctx.beginPath();
|
|
ctx.rect(brickX, brickY, brickWidth, brickHeight);
|
|
ctx.fillStyle = colors[r % colors.length];
|
|
ctx.fill();
|
|
ctx.closePath();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Afficher le score et les vies
|
|
function drawScoreAndLives() {
|
|
ctx.font = "12px monospace";
|
|
ctx.fillStyle = "#94a3b8";
|
|
ctx.fillText("Score: " + score, 20, 20);
|
|
ctx.fillText("Vies: " + lives, canvas.width - 60, 20);
|
|
}
|
|
|
|
// Boucle principale du jeu
|
|
function draw() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
drawBricks();
|
|
drawBall();
|
|
drawPaddle();
|
|
drawScoreAndLives();
|
|
collisionDetection();
|
|
|
|
// Rebond sur les murs (gauche / droite)
|
|
if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
|
|
dx = -dx;
|
|
}
|
|
|
|
// Rebond sur le mur du haut
|
|
if (y + dy < ballRadius) {
|
|
dy = -dy;
|
|
}
|
|
// Gestion de la raquette et du bas (perte de vie)
|
|
else if (y + dy > canvas.height - ballRadius - 10) {
|
|
if (x > paddleX && x < paddleX + paddleWidth) {
|
|
// Effet d'angle selon l'endroit où la balle tape la raquette
|
|
let hitPoint = x - (paddleX + paddleWidth / 2);
|
|
dx = hitPoint * 0.15;
|
|
dy = -dy;
|
|
} else {
|
|
lives--;
|
|
if (!lives) {
|
|
alert("GAME OVER");
|
|
document.location.reload();
|
|
} else {
|
|
x = canvas.width / 2;
|
|
y = canvas.height - 30;
|
|
dx = 2;
|
|
dy = -2;
|
|
paddleX = (canvas.width - paddleWidth) / 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Mouvement de la raquette
|
|
if (rightPressed && paddleX < canvas.width - paddleWidth) {
|
|
paddleX += 6;
|
|
} else if (leftPressed && paddleX > 0) {
|
|
paddleX -= 6;
|
|
}
|
|
|
|
// Mouvement de la balle
|
|
x += dx;
|
|
y += dy;
|
|
|
|
requestAnimationFrame(draw);
|
|
}
|
|
|
|
// Lancement du jeu
|
|
draw();
|
|
</script>
|
|
</body>
|
|
</html>
|