【讀書筆記】Html5遊戲開發

時間 2019-11-18

原文原文鏈接

一直對HMTL5作遊戲饒有興趣，而這本書恰好就是HTML5 2遊戲初級入門的書。Demo簡單註釋詳細，能夠拿來練練手，一個星期左右就能夠讀完。若要追求酷炫高大上效果，這本書恐怕要讓你失望了。但做爲上手書仍是不錯的。javascript

一共十章，都是相似於下面的小遊戲，從淺到深。 Demo下載canvas

圖形和圖片的繪製都很簡單，關鍵的地方仍是用數組和定時器去實現遊戲的業務邏輯和效果。簡單的本地存儲、聲音視頻播放。但含金量太少了，不能知足學遊戲的胃口。噹噹上面評價卻不錯。書的出發點也是作基本的入門。The Essential Guide to Html5api

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.獲取鼠標位置：dom

function check(ev) {
    var mx;
    var my;
    if (ev.layerX || ev.layerX == 0) { // Firefox
        mx = ev.layerX;
        my = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
        mx = ev.offsetX;
        my = ev.offsetY;
    }
  // do something
}

3. 獲取按鍵輸入：ide

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. 添加事件監聽：ui

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

5.運動的圖形通常都是統一加載在一個數組中，定時器每觸發一次就重繪一次。每個對象都有draw方法。this

    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面向對象的能力沒有那些高級語言強，不少功能的實現都是巧妙的運用了數組。好比洗牌的動做。spa

      //洗牌就是更換了牌的位置  
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.不少地方要用到數學知識：好比小球碰撞，就須要改變x和y的運動方向便可。判斷是否在擊中目標。就是判斷xy是否在必定的區間。但判斷一個移動的物體能不能通過前面的路，且不能能穿越牆。就有點複雜了。像迷宮那個遊戲。本質是要判斷線段到球心的距離不小於球的半徑。

//迷宮遊戲
//移動目標
function movetoken(dx, dy) {
        this.sx += dx;//正常狀況下 
        this.sy += dy;
        var i;
        var wall;
        for (i = 0; i < walls.length; i++) {
            wall = walls[i];
            //若是發生相交 就要退回去 效果就是沒有移動
            if (intersect(wall.sx, wall.sy, wall.fx, wall.fy, this.sx, this.sy, this.rad)) {
                this.sx -= dx;
                this.sy -= dy;
                break;
            }
        }
    }
function intersect(sx, sy, fx, fy, cx, cy, rad) {
        var dx;
        var dy;
        var t;
        var rt;
        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;}
    }