In this section, you will be creating a NinjaMan game based on the popular PacMan game. Right out of the gate, this sounds complicated but you have already created all the components you need to understand how to create this game. To approach this application, we will break NinjaMan into a few chunks. First, crafting the HTML and CSS as tools to our algorithm design. Second, let’s create an algorithm to render the appropriate HTML for our NinjaMan’s world. Lastly, we will need to position NinjaMan in this world and on a keypress, move NinjaMan in the appropriate direction.

There will be a few challenges for you to complete as well when we are all done.

We will cover the following:

  • Overview of CSS
  • Crafting the HTML and CSS to create static content
  • Using an algorithm to create HTML for us
  • Positioning our NinjaMan
  • Having our NinjaMan move around on Keypress
  • Detecting walls
  • Eating Sushi

Images can be found here:

Recreating NinjaMan with static content

Now that we have what NinjaMan’s world should like, how would we go about creating it using an algorithm?

Creating the NinjaMan World

So we have our NinjaMan world but our NinjaMan is not moving around and interacting with this world. We know the foundation of what should be occurring so make sure to try to move NinjaMan around before watching this next section.

Making NinjaMan Move

Great work! We have NinjaMan interacting with a full world. Move onto the next page where there are a few challenges to push you to the next level.