Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
function start(canvas, radius = 10) {
const mazesPaths = generateBackground();
const { x, y } = findAStartingPoint(mazesPaths.wallsPath, radius);
renderPlayer(canvas, {currX: x, currY: y, playerRadius: radius}, mazesPaths.wallsPath);
}
function renderPlayer(canvas, {currX, currY, playerRadius}, wallsPath) {
let radius = playerRadius, x = currX, y = currY;
if (spaceClicked) {
radius = 2;
}
const ctx = canvas.getContext("2d");
if (clickedKey) {
if (clickedKey.includes('Down') || clickedKey.includes('Up')) {
y = currY + KEYBOARD_KEYS[clickedKey] * PIXEL_RATIO / 2;
} else {
x = currX + KEYBOARD_KEYS[clickedKey] * PIXEL_RATIO / 2;
}
}
if (y - radius < 0 || y + radius >= CANVAS_HEIGHT || x - radius < 0 || x + radius >= CANVAS_WIDTH || isCircleInPath({radius, x, y}, wallsPath)) {
x = currX;
y = currY;
} else {
const playerPath = new Path2D();
playerPath.arc(x, y, radius, 0, 2 * Math.PI);
ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
ctx.fillStyle = "blue";
ctx.fill(playerPath);
}
requestAnimationFrame(() => renderPlayer(canvas, {currX: x, currY: y, playerRadius}, wallsPath));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment