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

52
game.js
View File

@ -327,29 +327,47 @@ class Ghost {
draw() { draw() {
ctx.save(); ctx.save();
ctx.translate(this.pixelX, this.pixelY); ctx.translate(this.pixelX, this.pixelY);
const size = CELL_SIZE * 0.4;
ctx.fillStyle = this.color; ctx.fillStyle = this.color;
ctx.strokeStyle = '#000000';
ctx.lineWidth = 2;
ctx.beginPath(); ctx.beginPath();
ctx.arc(0, -CELL_SIZE * 0.15, CELL_SIZE * 0.3, Math.PI, 0, false); ctx.arc(0, -size * 0.3, size * 0.5, Math.PI, 0, false);
ctx.rect(-CELL_SIZE * 0.3, -CELL_SIZE * 0.15, CELL_SIZE * 0.6, CELL_SIZE * 0.45); 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.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.stroke();
ctx.fillStyle = '#ffffff';
ctx.beginPath();
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.fill();
ctx.fillStyle = '#000000';
ctx.beginPath(); ctx.beginPath();
ctx.rect(-CELL_SIZE * 0.3, CELL_SIZE * 0.3, CELL_SIZE * 0.2, CELL_SIZE * 0.2); ctx.arc(-size * 0.2, -size * 0.1, size * 0.06, 0, Math.PI * 2);
ctx.rect(-CELL_SIZE * 0.1, CELL_SIZE * 0.3, CELL_SIZE * 0.2, CELL_SIZE * 0.2); ctx.arc(size * 0.2, -size * 0.1, size * 0.06, 0, Math.PI * 2);
ctx.rect(CELL_SIZE * 0.1, CELL_SIZE * 0.3, CELL_SIZE * 0.2, CELL_SIZE * 0.2);
ctx.fill();
ctx.fillStyle = '#fff';
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.fill();
ctx.fillStyle = '#000';
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.fill(); ctx.fill();
ctx.restore(); ctx.restore();

View File

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