【读书笔记】Html5游戏开发

时间:2023-03-08 22:14:56
【读书笔记】Html5游戏开发

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

【读书笔记】Html5游戏开发

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); }

2.获取鼠标位置:

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. 获取按键输入:

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

//迷宫游戏
//移动目标
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;}
}

详细的解释在书的166页。

希望对你有帮助~

正在找下一本Html5的书,路过大神求推荐。