O'Reilly logo

HTML5 Canvas Cookbook by Eric Rowell

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a View class

In this recipe, we'll create the View class, which is the simplest of the three MVC classes. The View class is responsible for drawing state screen images and also renders each animation frame by calling the draw() method for the level, each of the bad guys, the hero, and the health bar. In addition, the View class also renders a handy FPS display in the top-right cornerof the screen so we can see how well the game is performing.

How to do it...

Follow these steps to create the view for Canvas Hero:

  1. Define the View constructor:
    /* * Game view * * The view has access to the canvas context * and is responsible for the drawing logic */ function View(controller){ this.controller = controller; this.canvas = controller.anim.getCanvas(); ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required