Decorating the Game

Congratulations! You have finished the obstacle game. Now, we're just going to make the game look a bit nicer. First, let's center the game title and give it a shadow effect with CSS. If you get confused about how to use text-shadow, see the bottom of this lesson.

This should be the result:

Now, let's center the canvas on the webpage.

Lastly, we should give the website a nicer background. In this lesson, we will add a grid as the background. Download this picture (you can right-click it and click save image as).

Now upload the picture to your replit project. The easiest way is to drag the file to your list of files on the left.

Now add this CSS code to make the image a part of the background.

All Done!

Your final game should look like this. Congratulations on a completed game project 😁

Note About Text-Shadow

Like the name implies, the text-shadow property in CSS lets us add a shadow effect to our text. Here's how you use it:

text-shadow: x y blur color

x - How much further to the right the shadow will be from the text. Negative values will put the shadow to the left

y - How far down the shadow will be from the text. Negative values will put the shadow above the text.

blur - How blurred the shadow of the text will be. If you make this zero, the shadow will be an exact copy of the text.

color - The color of the shadow.

Examples

text-shadow: 0px 0px 0px blue;

Here, you can't see the shadow because it is right behind the text.

text-shadow: 5px 5px 0px blue;

The blue shadow text is a little to the right and a little below the red text.

text-shadow: 5px 5px 6px blue;

Now, you can no longer read the shadow text because it is blurred.

Stylizing the Game