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.
Follow these steps to create the view for Canvas Hero:
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(); this.context = controller.anim.getContext(); }
Define the
drawScreen()
method which draws the loading, ready, game over, or win state screen:View.prototype.drawScreen = function(screenImg){ this.context.drawImage(screenImg...