html5游戲開發(fā)的示例分析

小編給大家分享一下html5游戲開發(fā)的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一直對(duì)HMTL5做游戲饒有興趣，而這本書剛好就是HTML5 2游戲初級(jí)入門的書。Demo簡(jiǎn)單注釋詳細(xì)，可以拿來練練手，一個(gè)星期左右就可以讀完。若要追求酷炫高大上效果，這本書恐怕要讓你失望了。但作為上手書還是不錯(cuò)的。

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

一共十章，都是類似于下面的小游戲，從淺到深。  Demo下載

圖形和圖片的繪制都很簡(jiǎn)單，關(guān)鍵的地方還是用數(shù)組和定時(shí)器去實(shí)現(xiàn)游戲的業(yè)務(wù)邏輯和效果。簡(jiǎn)單的本地存儲(chǔ)、聲音視頻播放。但含金量太少了，不能滿足學(xué)游戲的胃口。當(dāng)當(dāng)上面評(píng)價(jià)卻不錯(cuò)。 書的出發(fā)點(diǎn)也是做基本的入門。The Essential Guide to Html5

1.基本圖形：

//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.獲取鼠標(biāo)位置：

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

3. 獲取按鍵輸入：

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. 添加事件監(jiān)聽：

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

5.運(yùn)動(dòng)的圖形一般都是統(tǒng)一加載在一個(gè)數(shù)組中，定時(shí)器每觸發(fā)一次就重繪一次。每一個(gè)對(duì)象都有draw方法。

    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.javascript面向?qū)ο蟮哪芰]有那些高級(jí)語(yǔ)言強(qiáng)，很多功能的實(shí)現(xiàn)都是巧妙的運(yùn)用了數(shù)組。比如洗牌的動(dòng)作。

      //洗牌就是更換了牌的位置  function shuffle() {  var i = deck.length - 1;//deck代表一副牌
  var s;  while (i>0) {//這里循環(huán)一次 每張牌平均更換了兩次位置
      s = Math.floor(Math.random()*(i+1));//隨機(jī)范圍是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 是一張牌的對(duì)象。
    deck[j] = deck[k];
    deck[k] = hold;
 }

7.很多地方要用到數(shù)學(xué)知識(shí)：比如小球碰撞，就需要改變x和y的運(yùn)動(dòng)方向即可。判斷是否在擊中目標(biāo)。就是判斷xy是否在一定的區(qū)間。但判斷一個(gè)移動(dòng)的物體能不能經(jīng)過前面的路，且不能能穿越墻。就有點(diǎn)復(fù)雜了。像迷宮那個(gè)游戲。本質(zhì)是要判斷線段到球心的距離不小于球的半徑。

.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*

以上是“html5游戲開發(fā)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！