How to Draw a Pac-Man Ghost in JavaScript

Creating engaging graphics with JavaScript can transform a simple webpage into an interactive experience. One fun project where you can practice your canvas skills is drawing a Pac-Man ghost. These iconic characters not only evoke nostalgia for countless gamers but also serve as a gateway to learning more about drawing on the web using HTML5 canvas. In this article, we’ll cover how to create a simple representation of a Pac-Man ghost step by step.

Getting Started with HTML5 Canvas

Before diving into the code, it’s essential to understand the HTML5 canvas element, which is used for rendering graphics. The canvas acts as a blank slate where you can draw shapes and images using JavaScript. To start, include a canvas in your HTML document:

<canvas id="pacman-ghost" width="400" height="400"></canvas>

Now, you are set to code the appearance of the Pac-Man ghost! Ensure you also link to your JavaScript file at the bottom of your HTML document so it runs after the canvas is fully loaded.

Understanding Colors and Shapes

Pac-Man ghosts, known for their distinctive colors and rounded shapes, are simple to emulate with basic shapes. The primary features of a ghost include a rounded top, a squarish bottom, and small feet. For our example, we will create Blinky, the red ghost. Here’s how you can set it up:

const canvas = document.getElementById('pacman-ghost');
const ctx = canvas.getContext('2d');

After setting up the canvas context, we can start drawing. The ghost’s main body can be created with a filled arc for its rounded head and a rectangle for its body. Let’s see how this is done:

function drawGhost() {
    // Draw the ghost's head
    ctx.beginPath();
    ctx.arc(200, 150, 50, Math.PI, 0, true);
    ctx.fillStyle = 'red';
    ctx.fill();

    // Draw the ghost's body
    ctx.beginPath();
    ctx.rect(150, 150, 100, 100);
    ctx.fillStyle = 'red';
    ctx.fill();
}
drawGhost();

Adding Features

Now that we have the basic structure, it’s time to add more characteristics that distinguish a Pac-Man ghost. The next elements to add are the ghost’s eyes and feet. You can achieve this by drawing additional arcs and rectangles:

function drawGhost() {
    // Previous ghost body code...

    // Draw eyes
    ctx.beginPath();
    ctx.arc(180, 135, 8, 0, Math.PI * 2, true); // Left eye
    ctx.fillStyle = 'white';
    ctx.fill();
    ctx.beginPath();
    ctx.arc(220, 135, 8, 0, Math.PI * 2, true); // Right eye
    ctx.fill();
    ctx.beginPath();
    ctx.arc(183, 135, 4, 0, Math.PI * 2, true); // Left pupil
    ctx.fillStyle = 'black';
    ctx.fill();
    ctx.beginPath();
    ctx.arc(223, 135, 4, 0, Math.PI * 2, true); // Right pupil
    ctx.fillStyle = 'black';
    ctx.fill();

    // Draw feet
    ctx.beginPath();
    ctx.arc(160, 250, 10, Math.PI, Math.PI * 2); // Left foot
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.beginPath();
    ctx.arc(240, 250, 10, Math.PI, Math.PI * 2); // Right foot
    ctx.fillStyle = 'red';
    ctx.fill();
}
drawGhost();

With these additional details, the ghost is starting to take on its familiar appearance. You can customize the ghost further by experimenting with colors and shapes to represent different characters from the game.

Animating Your Pac-Man Ghost

Now that we have a stationary ghost, we can bring it to life with some simple animations. Using the requestAnimationFrame method is an elegant way to create smooth animations. Let’s add a simple bobbing effect to our ghost:

let bobbingDirection = 1;
let ghostY = 150;
function animateGhost() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas
    ghostY += bobbingDirection;
    if (ghostY > 160 || ghostY < 150) {
        bobbingDirection *= -1; // Reverse direction
    }
    ctx.save();
    ctx.translate(0, ghostY);
    drawGhost();
    ctx.restore();
    requestAnimationFrame(animateGhost);
}
animateGhost();

This simple animation enhances your ghost's dynamics, making it feel more engaging. You can play around with the speed and direction of the bobbing to get creative!

Conclusion

By following these steps, you have not only learned how to draw a classic Pac-Man ghost using JavaScript but also acquired skills in manipulating the HTML5 canvas for graphics. This project demonstrates the fundamentals of shapes, colors, and simple animations, providing a solid foundation for future adventures in web graphics.

As you continue to explore JavaScript, consider delving into more complex projects or maybe even creating an entire Pac-Man game! Remember, practice makes perfect. Don’t hesitate to adapt the code, add more features, or even change the character to fit your imagination. Happy coding!