S2JS - Rotating, flipping, pointing - another game : Testing scoring

Let's try all that and make sure scoring is working properly.

Review what's in the Do_a_Frame function and verify you understand why all the elements are there and what they do.

<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 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); // clear the frame ctx.fillStyle= "yellow"; ctx.font="15px Arial"; ctx.fillText("Score: " + score, 0, 20); // display score 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++) { // for every fish fish[i].Do_Frame_Things(); // let the fish be fishy if (ImagesTouching(fish[i], jelly)) { // if it's touching the jelly fish.splice(i, 1); // remove the fish score = score + 1; // score goes up too } else if (fish[i].x + fish[i].MyImg.width < 0 || fish[i].x > myCanvas.width) { // way off-screen fish.splice(i, 1); // remove the fish } } } 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>