Rebranding: changement PACMAN en OULVIC et design rétro années 80 pour les fantômes
This commit is contained in:
52
game.js
52
game.js
@ -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();
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user