Question

Make Pac-Man in JavaScript form

Answer 1

[AI-generated answer — Bot]

// Create a canvas element

let canvas = document.createElement('canvas');

// Set the width and height of the canvas
canvas.width = 500;
canvas.height = 500;

// Append the canvas to the body
document.body.appendChild(canvas);

// Get the canvas context
let ctx = canvas.getContext('2d');

// Create Pac-Man
let pacman = {
x: 250,
y: 250,
radius: 25,
speed: 5,
color: 'yellow',
direction: 'right'
};

// Draw Pac-Man
function drawPacman() {
ctx.beginPath();
ctx.arc(pacman.x, pacman.y, pacman.radius, 0, Math.PI * 2);
ctx.fillStyle = pacman.color;
ctx.fill();
ctx.closePath();
}

// Move Pac-Man
function movePacman() {
if (pacman.direction === 'right') {
pacman.x += pacman.speed;
} else if (pacman.direction === 'left') {
pacman.x -= pacman.speed;
} else if (pacman.direction === 'up') {
pacman.y -= pacman.speed;
} else if (pacman.direction === 'down') {
pacman.y += pacman.speed;
}
}

// Update the canvas
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPacman();
movePacman();
requestAnimationFrame(update);
}

update();

// Handle keyboard events
document.addEventListener('keydown', (e) => {
if (e.keyCode === 37) {
pacman.direction = 'left';
} else if (e.keyCode === 38) {
pacman.direction = 'up';
} else if (e.keyCode === 39) {
pacman.direction = 'right';
} else if (e.keyCode === 40) {
pacman.direction = 'down';
}
});