Detailed explanation of h5 game development

This time I will bring you a detailed explanation of h5 game development. What are the precautions for h5 game development? The following is a practical case, let’s take a look.

I have always been interested in making games with HMTL5, and this book is just an introduction to HTML5 2 games. The demo is simply annotated and detailed, so you can practice it and you can finish reading it in about a week. If you are looking for cool and high-end effects, this book will probably disappoint you. But it's still good as an introductory book.

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

There are ten chapters in total, all of which are similar to the following mini-games, from simple to advanced deep. Demo download

The drawing of graphics and pictures is very simple. The key point is to use arrays and timers to realize the business logic and effects of the game. Simple local storage, sound and video playback. But the gold content is too little to satisfy the appetite for learning games. Dangdang has good reviews above. The starting point of the book is also a basic introduction. The Essential Guide to Html5

1. Basic graphics:

//ball 球function Ball(sx, sy, rad, stylestring) {    this.sx = sx;    this.sy = sy;    this.rad = rad;    this.draw = drawball;    this.moveit = moveball;    this.fillstyle = stylestring;
}function drawball() {
    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();
}function moveball(dx, dy) {    this.sx += dx;    this.sy += dy;
}//Rect 方形function Myrectangle(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;//move方法是一样的}function drawrects() {
    ctx.fillStyle = this.fillstyle;
    ctx.fillRect(this.sx, this.sy, this.swidth, this.sheight);
}//多边形function Polycard(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 not be needed.
    this.moveit = generalmove;
}//画多边形function drawpoly() {
    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;    var i;    var rad = 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();
}function generalmove(dx, dy) {    this.sx += dx;    this.sy += dy;
}//图像function Picture(sx, sy, swidth, sheight, imga) {    this.sx = sx;    this.sy = sy;    this.img = imga;    this.swidth = swidth;    this.sheight = sheight;    this.draw = drawAnImage;
}function drawAnImage() {
    ctx.drawImage(this.img, this.sx, this.sy, this.swidth, this.sheight);
}

View Code

2. Get mouse position:

 (ev.layerX || ev.layerX == 0) { 
        mx ==  (ev.offsetX || ev.offsetX == 0) { 
        mx ==

3. Get key input:

function getkey(event) {  var keyCode; 
  if(event == null)
  {
    keyCode = window.event.keyCode; 
    window.event.preventDefault();
  }  else 
  {
    keyCode = event.keyCode; 
    event.preventDefault();
  }  switch(keyCode)
  {      case 68:  //按下D
       deal();      break; 
     case 72:   //按下H
     playerdone();      break; 
     case 78: //按下N
     newgame(); 
      break; 
    default:
    alert("Press d, h, or n.");
      }
  
 }

4. Add event monitoring:

      var canvas1 = document.getElementById('canvas');
        canvas1.addEventListener('mousedown', startwall, false);//false表示事件冒泡的顺序。
        canvas1.addEventListener('mousemove', stretchwall, false);
        canvas1.addEventListener('mouseup', finish, false);

5. Motion graphics are generally loaded in an array, and are redrawn every time the timer is triggered. Every object has a draw method.

    var mypent = new Token(100, 100, 20, "rgb(0,0,250)", 5);
    everything.push(mypent);    function drawall() {
        ctx.clearRect(0, 0, cwidth, cheight);        var i;        for (i = 0; i < everything.length; i++) {
            everything[i].draw();
        }
    }

6.javascriptObject-oriented's capabilities are not as strong as those of high-level languages, and many functions are realized by clever use of arrays. For example, the action of shuffling cards.

      //洗牌就是更换了牌的位置  function shuffle() {  var i = deck.length - 1;//deck代表一副牌
  var s;  while (i>0) {//这里循环一次 每张牌平均更换了两次位置
      s = Math.floor(Math.random()*(i+1));//随机范围是0-i (包括i)
      swapindeck(s,i);//交换位置
      i--;
  }
  } 
 function swapindeck(j,k) {    var hold = new MCard(deck[j].num,deck[j].suit,deck[j].picture.src); //MCard 是一张牌的对象。
    deck[j] = deck[k];
    deck[k] = hold;
 }

7. Mathematical knowledge is needed in many places: for example, when a ball collides, you need to change the direction of x and y movement. Determine whether the target is being hit. It is to determine whether xy is within a certain interval. But it determines whether a moving object can pass the road ahead and cannot pass through the wall. It's a bit complicated. Like the maze game. The essence is to determine that the distance from the line segment to the center of the sphere is not less than the radius of the sphere.

.sx +=.sy += (i = 0; i < walls.length; i++= (intersect(wall.sx, wall.sy, wall.fx, wall.fy, .sx, .sy, .sx -=.sy -== fx -= fy -= 0.0 - ((sx - cx) * dx + (sy - cy) * dy) / ((dx * dx) + (dy * (t < 0.0= 0.0  (t > 1.0= 1.0= (sx+t*(fx-sx))-= (sy +t*(fy-sy))-= (dx*dx) +(dy* (rt<(rad*

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The use of Nodejs routing and controller

html5 animation to realize the dancing umbrella

css3 chat bubble style

How to build a server with nodejs

The above is the detailed content of Detailed explanation of h5 game development. For more information, please follow other related articles on the PHP Chinese website!