Pong-1 produces a more complete (static) image of what our Pong program should look like.

Important Functions

• new FontFace(name, path)
  • This instantiates a new FontFace object from a font file that lives on disk.
• myFont.load()
  • This function will load the font into memory from disk so that it is ready to be used in our game.
• context.fillRect(x, y, width, height)
  • Draws a rectangle onto the screen. The four parameters are its position and size dimensions. This is the cornerstone drawing function of the entirety of our Pong implementation!

Important Code

Alongside main.ts file and index.html, you’ll find that we’ve added a font file to our project called Joystix.ttf. This is the “retro” font we’ll use to make our Pong game look more authentic.

On that note, you’ll find a small addition at the top of our main:

const myFont = new FontFace('Joystix', 'url(./Joystix.ttf)');

myFont.load().then(function (font) {
  document.fonts.add(font);
});

This will allow us to create a custom font object (based off the font file we’ve added to our project directory) that we can set as the active font in our game.

The only other changes to the code in this update can be found in the render() function.

The scene is built from five draw calls:

• two fillText() calls for the scores,
• one fillRect() call for each paddle,
• one fillRect() call for the ball.

As you work, remember that fillRect() takes x, y, width, and height. The paddles are positioned near the left and right edges, and the ball should be a small square centered on the canvas.

🧩 Challenge: Draw the complete static scene

Use fillRect() to draw the centered ball after the scores and paddles are rendered.