49 lines
1.0 KiB
JavaScript
49 lines
1.0 KiB
JavaScript
/*
|
|
canvas.js
|
|
|
|
toute la logique de rendu visuel
|
|
*/
|
|
|
|
import { maze } from "./maze.js";
|
|
import { player } from "./player.js";
|
|
|
|
const canvas = document.getElementById("maze");
|
|
const ctx = canvas.getContext("2d");
|
|
const cellSize = 70;
|
|
|
|
export function drawMaze() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
for (let y = 0; y < maze.length; y++) {
|
|
for (let x = 0; x < maze[y].length; x++) {
|
|
if (maze[y][x] === 1) ctx.fillStyle = "#333";
|
|
else if (maze[y][x] === 2) ctx.fillStyle = "gold";
|
|
else ctx.fillStyle = "#eee";
|
|
|
|
ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
|
|
}
|
|
}
|
|
}
|
|
|
|
export function drawPlayer() {
|
|
ctx.fillStyle = "red";
|
|
ctx.beginPath();
|
|
ctx.arc(
|
|
player.x * cellSize + cellSize / 2,
|
|
player.y * cellSize + cellSize / 2,
|
|
cellSize / 3,
|
|
0, Math.PI * 2
|
|
);
|
|
ctx.fill();
|
|
}
|
|
|
|
export function drawBlind() {
|
|
ctx.fillStyle = "black";
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
|
|
export function render() {
|
|
drawMaze();
|
|
drawPlayer();
|
|
}
|