【读书笔记】Html5游戏开发

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

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

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

【读书笔记】Html5游戏开发

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