S2JS - Costumes, sounds and a 2-D scroller : Testing the scroller

Let's take it for a run. Drive the hero around, off all four sides of the canvas.

Check it can't go through obstacles, and check it eats fruit properly.

<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 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 } var hero = new MySprite("http://www.s2js.com/img/etc/spider.png", 50); hero.x = 100; hero.y = 100; 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) ; 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) { berry.costume = 5; berry.animation_final_costume = 9; berry.animation_continuous = false; berry.animation_rate = 8; } } var viewport_offset_x = 0; // how much the viewport has moved var viewport_offset_y = 0; var viewport_margin = 10; // how close the tank can get to the edge before we scroll 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)) { 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.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)) 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>