Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use html5 to achieve mushroom and bear games". The content in the article is simple and clear, easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use html5 to achieve mushroom and bear games".

Add the start button

Add the start button to the html code and position it in the middle of the canvas

B, global variables

Var gameRunning = false;// game running status var gameloopId;// remembers the variables of the loop

C, it turns out that there is no pause at the beginning of the game, write a function that starts to pause.

/ start or pause the game function ToggleGameplay () {gameRunning =! gameRunning; if (gameRunning) {$("# BtnImgStart"). Hide (); gameloopId = setInterval (GameLoop, 10);} else {clearInterval (gameloopId);}}

D, add start button event

/ / event handling function AddEventHandlers () {/ / if the mouse moves, the mushroom moves with $("# container") .mousemove (function (e) {mushroom.x = e.pageX-(mushroom.image.width/2);}) / / start button $("# BtnImgStart") .click (function () {ToggleGameplay ();});}

Note that you want to remove the setInterval (GameLoop, 10); from the $(window). Ready (function () {}) function

Second, add several items of life

A. required global variables

Var lives=3;//3 number of lives var livesImages = new Array (); / / Array of life pictures

B, life picture initialization

/ / since there are only 6 life pictures, there can only be a maximum of 6 for (var xonomo; xscreenHeight-animal.image.height) {lives-= 1 horizontalSpeed bank / life minus 1 / / when there is still a life bar, the game is suspended and the bear returns to the middle position, showing the start button if (lives > 0) {horizontalSpeed = speed. / / initialize the horizontal speed verticalSpeed =-speed; / / initialize the vertical speed animal.x = parseInt (screenWidth/2); / / initialize the bear's x coordinate animal.y = parseInt (screenHeight/2); / / initialize the bear's y coordinate $("# BtnImgStart"). Show (); / / Show start button ToggleGameplay () / / pause the game GameLoop (); / / initialize drawing}}

E. when the number of lives equals 0 or the prize is destroyed, the game is over

/ / end the game function GameOver () {gameRunning = false; clearInterval (gameloopId); alert ("Game over!");}

In the code where the bear hits the bottom line, add a judgment. When the number of lives = 0, the game ends.

If (lives C2 & & D1 < D2) {/ / collision return true;}} return false } / / Animal collision mushroom function HasAnimalHitMushroom () {/ / if collision if (CheckIntersect (animal, mushroom) 5) {/ / if the collision belongs to the lower left position of the mushroom if ((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.25)) {horizontalSpeed =-speed / / bounce} / / if the position of the collision belongs to the upper left position of the mushroom else if ((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.5)) {/ / the bounce speed is halved horizontalSpeed =-speed/2 } / / if the position of the collision belongs to the upper right position of the mushroom else if ((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.75)) {horizontalSpeed = speed/2 } else {horizontalSpeed = speed;} verticalSpeed =-speed;// changes the vertical velocity. That is, the animal moves up}} / / to create a prize array function InitPrizes () {var count=0; / / a total of three lines of for (var x _ 0; x

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.