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

This article introduces the relevant knowledge of "how to hit Rocket Mini Game with H5". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

one。 Introduction to the game

Game introduction:

Rockets carrying letter bombs continue to hit the ground, please hit the keyboard according to the letters on the rocket, each corresponding knock will shoot down the rocket carrying the letter and add one point, and each rocket hits the ground will reduce the value of life by one. For every ten rockets shot down, the number of rockets will be increased by one, and a little extra health will be rewarded, and the upper limit of health is eight.

II. HTML content

Index.html contains canvas canvas and a div that introduces the rules of the game.

When the mouse clicks anywhere on the page, enter the game interface:

Index

Browsers do not support canvas

1.Click space to pause or begin game.

2.Enter the letter on the rockets to hit them.

3.Number of the hearts will add one together with the rockets after ten rockets hit.

4.Failed when the number of hearts equals zero.

5.Click anywhere to start game!

II. JS content 1. Animation realization

Instead of using setTimeOut () or setInterval () as the animation timer in common.js, you use window.requestAnimationFrame, a more optimized way to achieve animation.

For the use of requestAnimFrame, first set the compatibility of the browser, and set the frame rate of animation. Here, the callback function is executed once per 1000/60ms.

Window.requestAnimFrame = (function () {return window.requestAnimationFrame | | window.webkitRequestAnimationFrame | | window.mozRequestAnimationFrame | | window.oRequestAnimationFrame | | window.msRequestAnimationFrame | | function (callback) {window.setTimeout (callback, 1000 / 60);};}) ()

The two parameters in requestAnimFrame, callback is the function to be redrawn next time, and element is the node to be redrawn, namely

RequestAnimFrame (callback, element); 2. Code block and object analysis

(1) the Game code block controls the start, end and restart of the game, the operation of the animation and the determination of mouse and keyboard click events.

Game.begin (), the game start interface, click anywhere and call the Game.run () function to enter the game interface.

Game.run (), the game running interface, here uses the custom compatibility function requestAnimFrame to call back the Game.transform () function to redraw the canvas, and calls the keyboard click listening function Game.hit (event) to determine whether the key hits the rocket.

Game.over (), the game end interface, displays the game score, the health rewarded in the game and the final number of rockets. Clicking anywhere will call the Game.restart () function to initialize the game parameters and call Game.begin () to enter the game start interface.

(2) the Background code block is used to draw the background. The default style is a gradient with vertical grayscale deepening.

(3) Hearts code block, according to the global variable heartsNum to set the number of health values, the initial is 5, by iterating and setting the horizontal offset offSetX to create the location attribute of the object in the hearts array, while the Heart object wants to save the location and radius attributes. In addition, the draw () function is set up in the Heart object for self-drawing, while the draw () function is set in the Hearts code block to control the self-drawing of all objects in the hearts array, so as to realize the state management of the life value when the animation is running.

(4) the Rockets code block is responsible for drawing small rockets, the number of rockets is controlled by the global variable rocketsNum, the initial is 5, the specific drawing of the rocket is completed by the Rocket object, where the state of the Rocket object is randomly generated, and the rockets array in the Rockets code block is responsible for saving the state of all Rocket objects. The Rockets code block controls the self-drawing of all Rocket objects and iterates through the objects in the array to determine whether the rocket has been hit when the keyboard is tapped.

(5) TextNodes code block is responsible for drawing the text, the TextNodes.setup () function is responsible for setting the offset of the content, position, font, style and characters of the text, of course, it can not be set, and the default value will be used in this case. The TextNode object holds the content and position information of a single character and is responsible for self-drawing the text, while the TextNodes code block is responsible for the self-drawing of all objects in the nodes array.

(6) the start function is responsible for moving from the interface that introduces the rules of the game to the start interface of the game.

I won't say much about it below, and post the code common.js:

_ window.onload=function () {var canvas=document.getElementById ("canvas"); var ctx=canvas.getContext ("2d"); canvas_width=canvas.width; canvas_height=canvas.height; var heartsNum=5;// HV var extraHearts=0;// additional HV var rocketsNum=5;// Rocket count var score=0 / / score window.requestAnimFrame = (function () {return window.requestAnimationFrame | | window.webkitRequestAnimationFrame | | window.mozRequestAnimationFrame | | window.oRequestAnimationFrame | | window.msRequestAnimationFrame | | function (callback) {window.setTimeout (callback, 1000 / 60);};}) () Var Game= {animationID:0,//animationID,flag controls pause and start flag:true, begin:function () {ctx.clearRect TextNodes.setup ("HitRocket", 100jorg240, "96px italics, arial", "# 000"); TextNodes.draw (); TextNodes.setup ("Click anywhere to start", 150,360th, "42px italics, arial", "# 000"); TextNodes.draw (); Rockets.init () Hearts.init (); window.addEventListener ("click", Game.run);}, / / buffer, remove listener run:function () {window.removeEventListener ("click", Game.run); Game.transform () Window.addEventListener ("keyup", Game.hit)}, transform:function () {if (heartsNum > 0) {Game.animationID=requestAnimationFrame (Game.transform) / / emptying the canvas ctx.clearRect (0meme 0recoverycanvaswidthgravecanvasarticleheight); / / background Background.draw () / / scoring TextNodes.setup ("Score:" + score,640,50, "42px italics, arial", "# f00", 20); TextNodes.draw (); / / Rocket Rockets.transform () Rockets.modify (); Rockets.draw (); / / Life value Hearts.modify (); Hearts.draw ();} else Game.over () }, hit:function (event) {event = (event)? event:window.event If (event.keyCode==32) / / pause start if (Game.flag) {Game.flag=false; window.cancelAnimationFrame (Game.animationID) } else {Game.flag=true; requestAnimationFrame (Game.transform);} else if (event.keyCode > = 65&&event.keyCode)

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.