S2JS - Costumes, sounds and a 2-D scroller : The finished code

Here it is, all put together.

If you haven't already registered a userid, click the button to do so. Otherwise click the
button to log on and copy this program to your own work area.

Once it's in your work area, you can access it from any internet device by entering its web address:

http://s2js.com / userid / fruit
(userid is your S2JS userid)

Our goal here was just to demonstrate techniques. You might use this as a starting-point to make your own really good game.

<html> <head> <title>2D scroller</title> </head> <body> <canvas id="myCanvas" width=300 height=300 style="background-color:lightgreen" > </canvas> <script> var ctx = myCanvas.getContext("2d"); // Get the drawing context for the canvas var FPS = 40; // How many frames per second var hero_speed = 3; // How fast the hero goes var keys = []; // which keys are down var obstacles = []; // things the hero can't move through var fruit = []; // fruit available to be eaten var viewport_offset_x = 0; // how much the viewport has moved var viewport_offset_y = 0; var viewport_margin = 10; // how close the hero can get to the edge before we scroll var margin_overlap_to_eat = 20; // how close the hero needs to overlap the fruit to eat it var scream = new Audio("http://www.s2js.com/snd/etc/scream.mp3"); var ooof = new Audio("http://www.s2js.com/snd/etc/ooof.mp3"); var hero = new MySprite("http://www.s2js.com/img/etc/spider.png", 50); hero.x = 100; hero.y = 100; function MySprite (img_url, width) { // This function creates a MySprite this.x = 0; this.y = 0; // Where is it? Start it at x=0, y=0 this.costume = 0; // Which costume is displayed ? this.costume_width = width; // How wide is each costume this.visible= true; this.velocity_x = 0; // How fast is it moving? this.velocity_y = 0; this.MyImg = new Image(); // Store the image in an Image object this.MyImg.src = img_url ; // Load the image from a url this.angle = 0; // How many degrees we are rotated this.flipV = false; // Are we flipped vertically this.flipH = false; // Are we flipped horizontally this.animation_rate = 0; // change costume every this many frames this.animation_first_costume = 0; // what costume the animation starts on this.animation_final_costume = null; // what costume the animation finish on this.animation_counter = 0; // how many frames since last change this.animation_continuous = true; // does it auto-repeat or just stop } MySprite.prototype.Do_Frame_Things = function() { ctx.save(); // Save the drawing context state if (!this.costume_width) this.costume_width = this.MyImg.width; // If no costumes, width is full image var num_costumes = this.MyImg.width / this.costume_width; // How many costumes provided? if (!this.animation_final_costume && num_costumes) this.animation_final_costume = num_costumes-1; // if final not set, use them all this.h = this.MyImg.height; // height of the image file this.w = this.costume_width; // width of a costume ctx.translate(this.x + this.w/2, this.y + this.h/2); // positioning 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.costume * this.w, 0, this.w, this.h, -this.w/2, -this.h/2, this.w, this.h); this.x = this.x + this.velocity_x; this.y = this.y + this.velocity_y; // move the thing if (this.animation_rate > 0) { this.animation_counter++; // count frames if (this.animation_counter > this.animation_rate) { // is it time for the next costume? this.animation_counter = 0; // reset the counter this.costume++; // select the next costume if (this.costume > this.animation_final_costume) // check if past last costume if (this.animation_continuous) this.costume = this.animation_first_costume // if continuous, loop back else this.costume = this.animation_final_costume; // otherwise stay on the last costume } // time for next costume } // we are animating ctx.restore(); // unwarp the context } function ImagesTouching(thing1, thing2, margin) { // // This function detects whether two MySprites are touching - very useful function // // 'margin', if provided, specifies how much overlap is allowed before they are considered to have touched // if (!margin) margin = 0; if (!thing1.visible || !thing2.visible) return false; if (!thing1.w || !thing2.w) return false; if (thing1.x >= thing2.x + thing2.w - margin || thing1.x + thing1.w <= thing2.x + margin) return false; if (thing1.y >= thing2.y + thing2.h - margin || thing1.y + thing1.h <= thing2.y + margin) return false; return true; } addEventListener('keydown', MyKeyDownHandler); addEventListener('keyup', MyKeyUpHandler); function MyKeyUpHandler(MyEvent) { keys[MyEvent.keyCode] = false; MyEvent.preventDefault(); } function MyKeyDownHandler(MyEvent) { keys[MyEvent.keyCode] = true; MyEvent.preventDefault(); } function add_obstacle(x, y) { var n = new MySprite("http://www.s2js.com/img/etc/obstacle.png") ; n.x = x; n.y = y; obstacles.push(n); } add_obstacle(150, 150) ; add_obstacle(175, 200) ; add_obstacle(-30, 100) ; add_obstacle(50, -30) ; function add_fruit(x, y) { var n = new MySprite("http://www.s2js.com/img/etc/strawberry.png", 35) ; n.x = x; n.y = y; n.animation_rate = Math.random()*40+40; // n.animation_final_costume = 4; fruit.push(n); } add_fruit(20, 20) ; add_fruit(-20, 220) ; add_fruit(-50, 320) ; add_fruit(290, 170) ; add_fruit(390, 100) ; add_fruit(200, -60) ; var fruit_remaining = fruit.length; function is_touching_an_obstacle (thing) { for (var i=0; i < obstacles.length; i++) if (ImagesTouching(thing, obstacles[i])) return true; return false; } function make_bad_thing_happen_to_fruit (berry) { if (berry.costume < 5) { scream.play(); fruit_remaining--; berry.costume = 5; berry.animation_final_costume = 9; berry.animation_continuous = false; berry.animation_rate = 8; } } function handle_keys_that_are_pressed() { var prev_x = hero.x; var prev_y = hero.y; if (keys[37]) { // Left hero.x -= hero_speed; if (hero.x < viewport_margin-viewport_offset_x) viewport_offset_x += (viewport_margin - viewport_offset_x - hero.x); } if (keys[39]) { // Right hero.x += hero_speed; if (hero.x + hero.w > myCanvas.width - viewport_margin - viewport_offset_x) viewport_offset_x += (myCanvas.width - viewport_margin - viewport_offset_x - hero.x - hero.w); } if (keys[38]) { // Up hero.y -= hero_speed; if (hero.y < viewport_margin-viewport_offset_y) viewport_offset_y += (viewport_margin - viewport_offset_y - hero.y); } if (keys[40]) { // Down hero.y += hero_speed; if (hero.y + hero.h > myCanvas.height - viewport_margin - viewport_offset_y) viewport_offset_y += (myCanvas.height - viewport_margin - viewport_offset_y - hero.y - hero.h); } if (is_touching_an_obstacle(hero)) { ooof.play(); hero.x = prev_x; // moved into an obstacle so undo the move hero.y = prev_y; } if (hero.x == prev_x && hero.y == prev_y) hero.animation_rate= 0 // not moving else hero.animation_rate= 2; // wriggling legs } function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); ctx.font= "14px Arial"; ctx.fillText(fruit_remaining + " left", 260, 20); ctx.save(); ctx.translate(viewport_offset_x, viewport_offset_y); handle_keys_that_are_pressed(); for (var i=0; i < obstacles.length; i++) obstacles[i].Do_Frame_Things(); for (var i=0; i < fruit.length; i++) { fruit[i].Do_Frame_Things(); if (ImagesTouching(fruit[i], hero, margin_overlap_to_eat)) make_bad_thing_happen_to_fruit(fruit[i]); } hero.Do_Frame_Things(); ctx.restore(); } setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer </script> </body> </html>