"Reading notes" HTML5 game development

HMTL5 is always interested in playing games, and this book is just the beginner's book of HTML5 2 games. Demo simple comments detailed, you can take to practice practiced hand, one weeks or so can be read. This book is going to disappoint you if you're looking for a cool, big-on-the-top effect. But it's good to be a calligraphy.

Http://pan.baidu.com/s/1dD29Nhf

Altogether 10 chapters, are similar to the following small game, from shallow to deep. Demo download

Graphics and pictures are very simple to draw, the key point is to use arrays and timers to implement the game's business logic and effect. Simple local storage, sound and video playback. But the gold content is too little, can not satisfy the learning game appetite. When the above evaluation is good. The starting point of the book is also to do basic introductory. The Essential Guide to HTML5

1. Basic Graphics:

//Ball BallsfunctionBall (SX, Sy, RAD, stylestring) { This. SX =SX;  This. Sy =Sy;  This. rad =Rad;  This. Draw =Drawball;  This. Moveit =Moveball;  This. FillStyle =stylestring;}functionDrawball () {Ctx.fillstyle= This. FillStyle;    Ctx.beginpath (); //ctx.fillstyle= RGB (0,0,0);Ctx.arc ( This. SX, This. Sy, This. rad, 0, Math.PI * 2,true); Ctx.fill ();}functionmoveball (dx, dy) { This. SX + =DX;  This. sy + =dy;}//Rect Squarefunctionmyrectangle (SX, SY, Swidth, Sheight, stylestring) { This. SX =SX;  This. Sy =Sy;  This. Swidth =Swidth;  This. Sheight =Sheight;  This. FillStyle =stylestring;  This. Draw =drawrects;  This. Moveit = Moveball;//The Move method is the same}functiondrawrects () {Ctx.fillstyle= This. FillStyle; Ctx.fillrect ( This. SX, This. Sy, This. Swidth, This. sheight);}//PolygonfunctionPolyCard (SX, Sy, RAD, N, Frontbgcolor, BackColor, Polycolor) { This. SX =SX;  This. Sy =Sy;  This. rad =Rad;  This. Draw =Drawpoly;  This. Frontbgcolor =Frontbgcolor;  This. BackColor =BackColor;  This. Polycolor =Polycolor;  This. N =N;  This. Angle = (2 * math.pi)/n;//Parens May is not needed.     This. Moveit =Generalmove;}//Draw PolygonsfunctionDrawpoly () {Ctx.fillstyle= This. Frontbgcolor; Ctx.strokestyle= This. BackColor; Ctx.fillrect ( This. sx-2 * This. Rad, This. sy-2 * This. rad, 4 * This. rad, 4 * This. rad);    Ctx.beginpath (); Ctx.fillstyle= This. Polycolor; vari; varrad = This. rad;    Ctx.beginpath (); Ctx.moveto ( This. SX + rad * MATH.COS (-.5 * This. Angle), This. sy + rad * Math.sin (-.5 * This. Angle));  for(i = 1; i < This. N; i++) {Ctx.lineto ( This. SX + rad * Math.Cos ((i-. 5) * This. Angle), This. sy + rad * Math.sin ((i-. 5) * This. Angle)); } Ctx.fill ();}functiongeneralmove (dx, dy) { This. SX + =DX;  This. sy + =dy;}//ImagefunctionPicture (SX, SY, Swidth, Sheight, Imga) { This. SX =SX;  This. Sy =Sy;  This. IMG =Imga;  This. Swidth =Swidth;  This. Sheight =Sheight;  This. Draw =drawanimage;}functionDrawanimage () {Ctx.drawimage ( This. IMG, This. SX, This. Sy, This. Swidth, This. sheight);}

View Code

2. Get the mouse position:

function Check (EV) {    var  mx;     var my;     if // Firefox        mx = Ev.layerx;         = ev.layery;     Else if // Opera        mx = ev.offsetx;         = ev.offsety;    }
  Do something}

3. Get key input:

functionGetkey (event) {varKeyCode; if(Event = =NULL) {KeyCode=Window.event.keyCode;  Window.event.preventDefault (); }  Else{keycode=Event.keycode;  Event.preventdefault (); }  Switch(keycode) { Case68://press D deal ();  Break;  Case72://press H Playerdone ();  Break;  Case78://press n Newgame ();  Break; default: Alert ("Press D, H, or N."); }   }

4. Add Event Listener:

      var canvas1 = document.getElementById (' canvas ');        Canvas1.addeventlistener (false);//false indicates the order in which events are bubbling.        Canvas1.addeventlistener (false);        Canvas1.addeventlistener (false);

5. The graphics of motion are generally uniformly loaded in an array, and the timer is redrawn once per trigger. Each object has a draw method.

    var New Token (+, 5), "RGB (0,0,250)";    Everything.push (mypent);     function Drawall () {        ctx.clearrect (0, 0, Cwidth, cheight);         var i;          for (i = 0; i < everything.length; i++) {            everything[i].draw ();        }    }

6.javascript object-oriented ability without those high-level language strong, many of the implementation of the function is a clever use of the array. such as shuffling the action.

      //Shuffle is the place to change the cardfunctionShuffle () {vari = deck.length-1;//deck represents a deck of cards  vars;  while(i>0) {//there's a cycle where each card is changed on average two times.s = Math.floor (Math.random () * (i+1));//the random range is 0-i (including i)Swapindeck (S,i);//Swap Locationi--; }  }  functionSwapindeck (j,k) {varHold =NewMcard (DECK[J].NUM,DECK[J].SUIT,DECK[J].PICTURE.SRC);//mcard is the object of a card. DECK[J]=Deck[k]; DECK[K]=Hold ;}

7. Mathematical knowledge is used in many places: for example, a small ball collision requires changing the direction of X and Y movement. Determine if you are hitting the target. is to determine if XY is in a certain range. But judging whether a moving object can pass through the front road, and can not cross the wall. It's kind of complicated. Like the maze of that game. The essence is to determine the distance from the line to the sphere is not less than the radius of the ball.

//Maze Game
Moving targets
functionmovetoken (dx, dy) { This. SX + =dx;//under normal circumstances This. sy + =dy; vari; varWall;  for(i = 0; i < walls.length; i++) {Wall=Walls[i];
If there's a intersect, you go back and the effect is no move .if(Intersect (WALL.SX, Wall.sy, wall.fx, Wall.fy, This. SX, This. Sy, This. rad)) {                 This. SX-=DX;  This. SY-=dy;  Break; }        }    }functionintersect (SX, SY, FX, FY, CX, CY, RAD) {varDX; vardy; varT; varRT; DX= FX-SX; Dy= FY-Sy; T= 0.0-((SX-CX) * dx + (sy-cy) * dy)/(DX * dx) + (DY *dy)); if(T < 0.0) {T= 0.0; }        Else if(T > 1.0) {T= 1.0; } DX= (sx+t* (FX-SX))-CX; Dy= (sy +t* (fy-sy))-Cy; RT= (DX*DX) + (dy*dy); if(rt< (rad*Rad)) {            return true; } Else {            return false;} }

A detailed explanation is on page 166 of the book.

Hope to help you ~

is looking for the next HTML5 book, passing the Great God for recommendation.