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

Let's test those latest set of changes, to make sure the health is displaying correctly, and the turtle appears.

Verify the health drops slowly and goes up a little when you eat a fish. Try to avoid fish and verify the health turns red when it gets low.

We don't have the turtle doing anything interesting yet, nor even reappearing, but we'll do that next.

<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 var health = 100; // jelly health starts at 100 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 ctx.fillStyle= "green"; // assume all is fine, health colour will be green if (health < 30) ctx.fillStyle= "red"; // if health is low, health colour will be red ctx.fillRect(myCanvas.width-110, 5, health, 10); // fill a rectangle whose width is my health ctx.strokeRect(myCanvas.width-110, 5, 100, 10); // stroke a border, full width 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 turtle.Do_Frame_Things(); // let the turtle 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 health= health + 10; // eating a fish regains health if (health > 100) health= 100; // but never past 100 } 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 } } } function Appear_Turtle () { set_random_side(turtle); // start the turtle on a random side, just like a fish turtle.velocity_y = Math.random()*6-3; // slight vertical velocity so it goes a bit diagonal turtle.visible= true; // and make it visible } function Diminish_Health() { if (health > 0) health= health - 1; // health drops, but never past zero } var turtle= new MySprite("http://s2js.com/img/etc/turtle.png"); turtle.visible= false; 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 setTimeout(Appear_Turtle, 3000); // first turtle after 3 sec setInterval(Diminish_Health, 250); // lose health slowly but surely </script> </body> </html>