h5的游戏开发详解


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来h5的游戏开发详解,h5游戏开发的注意事项有哪些,下面就是实战案例,一起来看一下。

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

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

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

图形和图片的绘制都很简单,关键的地方还是用数组和定时器去实现游戏的业务逻辑和效果。简单的本地存储、声音视频播放。但含金量太少了,不能满足学游戏的胃口。当当上面评价却不错。 书的出发点也是做基本的入门。The Essential Guide to Html5

1.基本图形:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

//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.获取鼠标位置:

1

2

3

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

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

       mx ==

3. 获取按键输入:

阅读剩余部分

相关阅读 >>

h5实现放大镜效果的代码

HTML5手机触屏touch事件的详细介绍

HTML5-geolocation apis的示例代码

在h5里手机端页面缩放应该如何实现

html中的title是什么意思?

HTML5 地理定位

html代码什么意思?

震惊!HTML5区块链游戏联盟成立,设立10亿级发展基金!

h5中文件上传的详细介绍

html与HTML5的区别是什么

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...