In turn, the Sprite's draw() function will call draw() for its current Animation object. The behavior of the animation is as follows: The global draw() function calls draw() for each Sprite object on the screen. draw(): Draws a frame specified by how many frames have elapsed (frameCounter), which frame to draw (currentFrame), and how long it should stay for (frameRate). frameRate: # of global frames that should render before the next animation step. lastFrame: # of last frame in the animation sequence, zero-indexed. frameW, frameH: Width and height of the animation frames (must all be same size for now). startX, startY: Coordinates of the given image where the desired animation frames begin. image: Image() object whose 'src' property points to the graphic containing the animation frames. New Animation(image, startX, startY, frameW, frameH, lastFrame, frameRate) The sprite and animation classes were tricky to work out, because it's hard to determine what behaviors/properties should stay with the Sprite class. Once the Animation class is in place, we will create an animation of running left frames, and assign it to him with the name "RunLeft". "RunLeft" is a string that specifies the name of the default animation that the sprite should begin with. This places the megaMan sprite at (250,400) at a height/width of (25,29). Using Mega Man as an example (because he is awesome and someone had already ripped his animation frames at Game Sprites Archive, his sprite is initialized as follows before the setInterval call in the init() function: draw(): Calls draw() function of the current Animation, which keeps track of frames elapsed and renders the sequence. If the sprite is visible on-screne, the draw loop will pick up this change and immediately change to the given animation. setAnimation(animationName): Sets the Sprite's currentAnimation variable to the given animation name. addAnimation(animationName, newAnimation): Adds newAnimation (an Animation object) to the Sprite's animations array, with the name given (i.e. startAnimation: Will get into this later, but I figured all animate objects will have a default animation to start with. x, y: Coordinates relative to top-left of canvas The Sprite class will represent anything on the page that has to move, with variables for size and location. I began by tackling what was going to be the most tedious issue: displaying and animating the game objects. Animate (player character, NPC helpers, enemies) However my ambition always gets the best of me, so the hell with it - we're making a classic platformer.įirst things first, all platform games consist of the following elements: I started out wondering what type of game I should focus on, as usually the best introduction to a new programming language is a simple puzzle game such as Tetris or the like. My goal throughout this process will be to create an interesting (or at least functional) game using the new technologies provided by HTML5. A perfect example of this is the canvas element, which is a panel that can be drawn on with JavaScript code. HTML5 is a breakaway from past revisions, in that it lends itself heavily to JavaScript programming, local information storage, and other paradigms that allow for many applications that were either impossible or prohibitively complex in the past. This is the first post of hopefully many about my attempts at building games in HTML5.