S2JS - A scrolling game - Flappy Bird : Getting started

We're going to start with a bunch of stuff you've seen many times before:

An HTML wrapper, and a canvas
A ctx variable, which gives a "drawing context" for the canvas
The definition of MySprite object, which includes the ability to rotate and flip
A function that can detect if two sprites are touching
A variable called "bird", which is a MySprite and loads an image of the flappy bird
A frame render function, which gets called by a timer according to our FPS

Scroll around the code, and make sure everything looks familiar and that you understand why it's there.

<html> <head> <title>Flappy Bird</title> </head> <body> <canvas id="myCanvas" width=320 height=480 style="background-color:powderblue"> </canvas> <script> var ctx = myCanvas.getContext("2d"); // Get the drawing context for the canvas var FPS = 40; // How many frames per second function MySprite (img_url) { this.x = 0; this.y = 0; this.visible= true; this.velocity_x = 0; this.velocity_y = 0; this.MyImg = new Image(); this.MyImg.src = img_url ; this.angle = 0; // How many degrees we are rotated this.flipV = false; // Are we flipped vertically this.flipH = false; // Are we flipped horizontally } MySprite.prototype.Do_Frame_Things = function() { ctx.save(); ctx.translate(this.x + this.MyImg.width/2, this.y + this.MyImg.height/2); ctx.rotate(this.angle * Math.PI / 180); // rotating if (this.flipV) ctx.scale(1,-1); // flipping if (this.flipH) ctx.scale(-1,1); if (this.visible) ctx.drawImage(this.MyImg, -this.MyImg.width/2, -this.MyImg.height/2); this.x = this.x + this.velocity_x; this.y = this.y + this.velocity_y; // move the thing ctx.restore(); // unwarp the context } function ImagesTouching(thing1, thing2) { // // This function detects whether two MySprites are touching - very useful function // if (!thing1.visible || !thing2.visible) return false; if (thing1.x >= thing2.x + thing2.MyImg.width || thing1.x + thing1.MyImg.width <= thing2.x) return false; if (thing1.y >= thing2.y + thing2.MyImg.height || thing1.y + thing1.MyImg.height <= thing2.y) return false; return true; } function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); bird.Do_Frame_Things(); } var bird = new MySprite("http://s2js.com/img/etc/flappybird.png"); bird.x = myCanvas.width / 3; bird.y = myCanvas.height / 2; setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer </script> </body> </html>