h5的游戏开发详解

时间2024-01-23 10:20:51发布访客分类HTML浏览683

导读：收集整理的这篇文章主要介绍了h5的游戏开发详解，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来h5的游戏开发详解，h5游戏开发的注意事项有哪些，下面就是实战案例，一起来看一下。一直对HMTL5做游戏饶有兴趣，而这本书刚好就是...

收集整理的这篇文章主要介绍了h5的游戏开发详解，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来h5的游戏开发详解，h5游戏开发的注意事项有哪些，下面就是实战案例，一起来看一下。

一直对HMTL5做游戏饶有兴趣，而这本书刚好就是HTML5 2游戏初级入门的书。Demo简单注释详细，可以拿来练练手，一个星期左右就可以读完。若要追求酷炫高大上效果，这本书恐怕要让你失望了。但作为上手书还是不错的。

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

一共十章，都是类似于下面的小游戏，从浅到深。 Demo下载

图形和图片的绘制都很简单，关键的地方还是用数组和定时器去实现游戏的业务逻辑和效果。简单的本地存储、声音视频播放。但含金量太少了，不能满足学游戏的胃口。当当上面评价却不错。书的出发点也是做基本的入门。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.获取鼠标位置：

 (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. 添加事件监听：

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

5.运动的图形一般都是统一加载在一个数组中，定时器每触发一次就重绘一次。每一个对象都有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面向对象的能力没有那些高级语言强，很多功能的实现都是巧妙的运用了数组。比如洗牌的动作。

      //洗牌就是更换了牌的位置  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是否在一定的区间。但判断一个移动的物体能不能经过前面的路，且不能能穿越墙。就有点复杂了。像迷宫那个游戏。本质是要判断线段到球心的距离不小于球的半径。

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

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！