jeux html
This commit is contained in:
@@ -0,0 +1,251 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user