S2JS - Rotating, flipping, pointing - another game : Taking it for a run

Let's see what we've got so far.

This works pretty well. The jelly is chasing toward the mouse (or finger), and we have an assortment of fish going in various directions at various speeds.

Sometimes there's more than one fish on the screen, but frequently only one. In the final game the canvas will be much larger, so fish will take longer to cross.

In the meantime, try to make more fish by selecting a smaller interval for the add_a_random_fish timer. See if you can make fish soup!

<html> <body> <canvas id="myCanvas" width=300 height=300 style="background-color:MediumSeaGreen"> </canvas> <script> var ctx = myCanvas.getContext("2d"); // Get the drawing context for the canvas var FPS = 40; // How many frames per second var mouse_x = 0; var mouse_y = 0; // Where is the mouse var fish=[]; // an array of fish var score = 0; // the score 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); if (this.flipV) ctx.scale(1,-1); if (this.flipH) ctx.scale(-1,1); if (this.visible) ctx.drawImage(this.MyImg, -this.MyImg.width/2, -this.MyImg.height/2); ctx.restore(); this.x = this.x + this.velocity_x; this.y = this.y + this.velocity_y; // move the thing } function MyTouchMoveHandler(MyEvent) { var rect = myCanvas.getBoundingClientRect(); mouse_x = MyEvent.touches[0].clientX - rect.left; mouse_y = MyEvent.touches[0].clientY - rect.top; MyEvent.preventDefault() } addEventListener("touchmove", MyTouchMoveHandler); addEventListener("touchstart", MyTouchMoveHandler); function MyMouseMoveHandler (MyEvent) { var rect = myCanvas.getBoundingClientRect(); mouse_x= MyEvent.clientX - rect.left; mouse_y= MyEvent.clientY - rect.top; } addEventListener("mousemove", MyMouseMoveHandler); MySprite.prototype.Point_Towards = function(target_x, target_y) { var distance_x = target_x - (this.x + this.MyImg.width/2); var distance_y = target_y - (this.y + this.MyImg.height/2); this.angle = (Math.atan2(distance_y, distance_x) * 180 / Math.PI) + 90; } MySprite.prototype.Move_Towards = function(target_x, target_y, speed) { var distance_x = target_x - (this.x + this.MyImg.width / 2); var distance_y = target_y - (this.y + this.MyImg.height / 2); var actual_distance = Math.sqrt(distance_x * distance_x + distance_y * distance_y); // Thanks, Pythagoras! this.velocity_x = distance_x / actual_distance * speed ; this.velocity_y = distance_y / actual_distance * speed ; if (Math.abs(distance_x) < Math.abs(this.velocity_x)) this.velocity_x = 0; if (Math.abs(distance_y) < Math.abs(this.velocity_y)) this.velocity_y = 0; } function set_random_side (thing) { if (Math.random() > 0.5) { // choose side 50:50 // start on LHS thing.x = -thing.MyImg.width; // off-screen to the left thing.velocity_x = Math.random()*8 + 2; // moving right thing.flipH = true; // face other direction } else { // start on RHS thing.x = myCanvas.width; // off-screen to the right thing.velocity_x = -1 * (Math.random()*8 + 2); // moving left thing.flipH = false; // keep facing same way } thing.y = Math.random() * myCanvas.height * 0.8; // set a y-position } function add_a_random_fish() { var which_fish= Math.floor(Math.random()*4)+1; // random number, 1 to 4 var new_fish = new MySprite("http://s2js.com/img/etc/fish" + which_fish + ".png"); // new sprite with random fish image set_random_side(new_fish); // position the fish fish.push(new_fish); // add it to the array } function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); // clear the frame jelly.Point_Towards(mouse_x, mouse_y); // tell jelly to point to mouse jelly.Move_Towards(mouse_x, mouse_y, 3); // and move that way jelly.Do_Frame_Things(); // let the jelly do its thing for (var i=0; i < fish.length; i++) fish[i].Do_Frame_Things(); // let the fish be fishy } var jelly= new MySprite("http://s2js.com/img/etc/jellyfish2.png"); jelly.x=120; jelly.y=120; setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer setInterval(add_a_random_fish, 2000); // add a fish every two seconds </script> </body> </html>