Rebranding: changement PACMAN en OULVIC et design rétro années 80 pour les fantômes

This commit is contained in:
2025-11-28 18:41:14 +01:00
parent cc91fda43d
commit 36e80274ff
2 changed files with 36 additions and 18 deletions

48
game.js
View File

@ -327,31 +327,49 @@ class Ghost {
draw() {
ctx.save();
ctx.translate(this.pixelX, this.pixelY);
const size = CELL_SIZE * 0.4;
ctx.fillStyle = this.color;
ctx.strokeStyle = '#000000';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(0, -CELL_SIZE * 0.15, CELL_SIZE * 0.3, Math.PI, 0, false);
ctx.rect(-CELL_SIZE * 0.3, -CELL_SIZE * 0.15, CELL_SIZE * 0.6, CELL_SIZE * 0.45);
ctx.arc(0, -size * 0.3, size * 0.5, Math.PI, 0, false);
ctx.fill();
ctx.stroke();
ctx.fillRect(-size * 0.5, -size * 0.3, size * 1.0, size * 0.7);
ctx.strokeRect(-size * 0.5, -size * 0.3, size * 1.0, size * 0.7);
const waveHeight = size * 0.15;
const waveWidth = size * 0.2;
ctx.beginPath();
ctx.rect(-CELL_SIZE * 0.3, CELL_SIZE * 0.3, CELL_SIZE * 0.2, CELL_SIZE * 0.2);
ctx.rect(-CELL_SIZE * 0.1, CELL_SIZE * 0.3, CELL_SIZE * 0.2, CELL_SIZE * 0.2);
ctx.rect(CELL_SIZE * 0.1, CELL_SIZE * 0.3, CELL_SIZE * 0.2, CELL_SIZE * 0.2);
ctx.moveTo(-size * 0.5, size * 0.4);
for (let i = 0; i < 5; i++) {
const x = -size * 0.5 + i * waveWidth;
const y = size * 0.4 + (i % 2 === 0 ? 0 : waveHeight);
ctx.lineTo(x, y);
}
ctx.lineTo(size * 0.5, size * 0.4);
ctx.lineTo(size * 0.5, size * 0.7);
ctx.lineTo(-size * 0.5, size * 0.7);
ctx.closePath();
ctx.fill();
ctx.fillStyle = '#fff';
ctx.stroke();
ctx.fillStyle = '#ffffff';
ctx.beginPath();
ctx.arc(-CELL_SIZE * 0.15, -CELL_SIZE * 0.1, CELL_SIZE * 0.08, 0, Math.PI * 2);
ctx.arc(CELL_SIZE * 0.15, -CELL_SIZE * 0.1, CELL_SIZE * 0.08, 0, Math.PI * 2);
ctx.arc(-size * 0.2, -size * 0.1, size * 0.12, 0, Math.PI * 2);
ctx.arc(size * 0.2, -size * 0.1, size * 0.12, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = '#000';
ctx.fillStyle = '#000000';
ctx.beginPath();
ctx.arc(-CELL_SIZE * 0.15, -CELL_SIZE * 0.1, CELL_SIZE * 0.04, 0, Math.PI * 2);
ctx.arc(CELL_SIZE * 0.15, -CELL_SIZE * 0.1, CELL_SIZE * 0.04, 0, Math.PI * 2);
ctx.arc(-size * 0.2, -size * 0.1, size * 0.06, 0, Math.PI * 2);
ctx.arc(size * 0.2, -size * 0.1, size * 0.06, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
}

View File

@ -3,13 +3,13 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jeu Pacman</title>
<title>Jeu Oulvic</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-wrapper">
<div class="container">
<h1>PACMAN</h1>
<h1>OULVIC</h1>
<div class="user-input-section">
<label for="username">Nom d'utilisateur:</label>
<input type="text" id="username" placeholder="Entrez votre nom" maxlength="15">
@ -21,7 +21,7 @@
</div>
<canvas id="gameCanvas" width="600" height="600"></canvas>
<div class="instructions">
<p>Utilisez les flèches directionnelles pour déplacer Pacman</p>
<p>Utilisez les flèches directionnelles pour déplacer Oulvic</p>
<button id="restartBtn" style="display: none;">Rejouer</button>
</div>
</div>