之前写的小游戏，要么就比较简单，要么就是比较难看，或者人物本身是不会动的。
结合了其它人的经验，研究了一下精灵运动，就写一个简单的小游戏来试一下。
介绍一下几个主要的类：
- Frame：帧的定义，主要描述动画的一帧
- Animation：动画的定义，主要描述一个连贯的动画，由多个帧组成
- Sprite：精灵的定义，主要描述一个完整的实体，由多个动画组成
- TimeProcess：时间管理，由
requestAnimationFrame完成
- Person：一个完整人定义，就是主人公--
男人
- BlockBase：块的基类，下降中的障碍物基类，包含一些基本的参数与方法
- NormalBlock：普通块，继承于
BlockBase，最基础的块
- MissBlock,LeftBlock...等：其它特殊功能的块
- BlockFactory：块工厂，生产块的类
- Main：游戏主入口
游戏的文件结构：
- wfn.js：基础文件，包含动画定义，公共方法（都是比较简单的）
- person.js：人物的定义
- block.js：各种障碍物块的定义
- main.js：游戏主逻辑入口文件，处理主要逻辑
游戏的文件结构：
TimeProcess：主要用于统一处理定时器的事件，确保全局只有一个计时器
1 //定义贞管理类，兼容
2 var requestAnimationFrame = window.requestAnimationFrame
3 || window.mozRequestAnimationFrame
4 || window.webkitRequestAnimationFrame
5 || function(cb){setTimeout(cb,1000/60)};
6
7 var TimeProcess = function(){
8
9 this.list = [];
10 this.isStart = false;
11 }
12 TimeProcess.prototype = {
13
14 add : function(cb,param,context){
15
16 this.list.push({cb:cb,param:param,context:context});
17 },
18 start : function(){
19
20 this.isStart = true;
21
22 var self = this;
23
24 requestAnimationFrame(function(){
25
26 var item = null,
27 p = [];
28
29 for(var i=0;i<self.list.length;i++){
30
31 item = self.list[i];
32
33 item.cb.apply(item.context,item.param);
34 }
35
36 if(self.isStart)requestAnimationFrame(arguments.callee);
37 });
38 },
39 stop : function(){
40
41 this.isStart = false;
42 }
43 }
View Code
Frame：帧的定义，就类似flash中的帧
1 //帧的定义
2 /**
3 @param x int 帧在雪碧图中的起始x坐标
4 @param y int 帧在雪碧图中的起始y坐标
5 @param w int 帧在雪碧图中的宽
6 @param y int 帧在雪碧图中的高
7 @param dw int 帧实际的宽
8 @param dh int 帧实际的高
9 */
10 var Frame = function(x,y,w,h,dw,dh){
11
12 this.x = x;
13 this.y = y;
14 this.w = w;
15 this.h = h;
16 this.dw = dw;
17 this.dh = dh;
18 }
View Code
Animation：动画的定义，一个动作需要多个连贯的帧才能完成
1 //一个动画得定义
2 var Animation = function(param) {
3
4 this.startX = param.startX || 0;
5 this.startY = param.startY || 0;
6 this.fs = param.fs || 1;
7 this.sw = param.sw || 0;
8 this.sh = param.sh || 0;
9 this.width = param.width || param.sw;
10 this.height = param.height || param.sh;
11 this.dir = param.dir || "right";
12 this.loop = !!param.loop;
13 //this.fps = param.fps || 30;
14
15 //this.lazy = 1000 / this.fps;
16 //this.last = 0;
17
18 this.ls = [];
19 //当前帧
20 this.current = null;
21 //当前帧得索引
22 this.index = -1;
23
24 this.init();
25 }
26 Animation.prototype = {
27 init : function(){
28
29 for(var i=0;i<this.fs;i++){
30
31 var x = this.startX + (this.dir=="right"?i*this.sw:0);
32 var y = this.startY + (this.dir=="down"?i*this.sh:0);
33
34 var frame = new Frame(x,y,this.sw,this.sh,this.width,this.height);
35
36 this.ls.push(frame);
37 }
38
39 this.index = 0;
40 this.current = this.ls[0];
41 },
42 //下一帧
43 next : function() {
44
45 if(this.index + 1 >= this.ls.length){
46
47 if(this.loop){
48
49 this.current = this.ls[0];
50 this.index = 0;
51 }
52 }
53 else{
54
55 this.index += 1;
56
57 this.current = this.ls[this.index];
58 }
59 },
60 //重置为第一帧
61 reset : function(){
62
63 this.current = this.ls[0];
64 this.index = 0;
65 },
66 size : function(){
67
68 return {w:this.width,h:this.height};
69 }
70 }
View Code
Sprite：精灵的定义，一个完整的个体，是需要多个动画，例如向左，向右等
1 //一个精灵的定义
2 /**
3 @param objParam object 动画的json对象 {"left":[frame1,frame2],"right":[frame1,frame2]}
4 @param def string 默认动画索引
5 @param img object 精灵得雪碧图
6 @param cxt object canvas对象
7 @param x int 精灵的起始位置x
8 @param y int 精灵的起始位置y
9 */
10 var Sprite = function(img,cxt,fps,param){
11
12 this.animations = {};
13 this.img = img;
14 this.cxt = cxt;
15 this.x = param.x || 0;
16 this.y = param.y || 0;
17 this.fps = fps;
18
19 this.xspeed = param.xspeed || 0;
20 this.yspeed = param.yspeed || 0;
21
22 this.yaspeed = param.yaspeed || 0;
23
24 this.lazy = 1000 / this.fps;
25 this.last = 0;
26
27 this.moveLazy = 33;
28 this.moveLast = 0;
29
30 //当前动画
31 this.index = null;
32
33 this.key = "";
34 }
35 Sprite.prototype = {
36 add : function(key,animation){
37
38 this.animations[key] = animation;
39
40 if(!this.index){
41 this.index = animation;
42 this.key = key;
43 }
44 },
45 //修改当前动画
46 change : function(key){
47
48 if(key == this.key)return false;
49
50 var index = this.animations[key];
51
52 if(!index)return false;
53
54 this.index = index;
55 this.okey = this.key;
56 this.key = key;
57 this.index.reset();
58 },
59 //绘画出当前帧
60 draw : function(){
61
62 if(!this.index || !this.img)return false;
63
64 var frame = this.index.current;
65
66 this.cxt.drawImage(this.img,frame.x,frame.y,frame.w,frame.h,this.x,this.y,frame.dw,frame.dh);
67 },
68 //更新精灵
69 update : function(){
70
71 var t = new Date().getTime();
72
73 var diff = t - this.last;
74
75 var moveDiff = t - this.moveLast;
76
77 if(this.last == 0){
78 diff = this.lazy;
79 moveDiff = this.moveLazy;
80 }
81
82 if(diff >= this.lazy){
83
84 this.index.next();
85
86 this.last = t;
87 }
88
89 if(moveDiff >= this.moveLazy){
90
91 if(this.yaspeed)this.yspeed += this.yaspeed;
92
93 if(this.xspeed)this.x += this.xspeed;
94 if(this.yspeed)this.y += this.yspeed;
95
96 this.moveLast = t;
97 }
98 },
99 //移动
100 move : function(x,y){
101
102 this.x = x;
103 this.y = y;
104 },
105 setXSpeed : function(xs){
106
107 this.xspeed = xs;
108 },
109 setYSpeed : function(ys,yas){
110
111 this.yspeed = ys;
112 this.yaspeed = yas || 0;
113 },
114 //获取当前精灵得大小
115 size : function(){
116
117 var frame = this.index.current;
118
119 return {w:frame.dw,h:frame.dh,x:this.x,y:this.y,r:this.x+frame.dw,b:this.y+frame.dh};
120 }
121 }
View Code
下面是游戏试玩：
键盘左右控制移动，界面上的按钮是给iphone触屏用，图片全面兼容iphone4的retina，可以直接放在phonegap中使用！
<script type="text/javascript">// -1)return true;
return false;
}
var exports = {
addClass : addClass,
removeClass :removeClass,
hasClass : hasClass
};
return exports;
}());
WF.reg("http",function(){
function ajax(url,param,succ,err,type){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (4 == xmlhttp.readyState) {
if (200 == xmlhttp.status || 304 == xmlhttp.status) {
var Bodys = xmlhttp.responseText;
succ && succ(Bodys);
}
else if(xmlhttp.status >= 400){
err && err(xmlhttp.status);
}
}
}
type = type || "get";
param = param || {};
var param_arr = [];
for(var name in param){
param_arr.push(name + "=" + param[name]);
}
param = param_arr.join("&");
if(type == "get"){
url += "?"+param_arr.join("&");
param = null;
}
xmlhttp.open(type, url, true);
if(type == "post")xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.send(param);
}
function get(url,param,succ,err){
ajax(url,param,function(data){
succ(JSON.parse(data));
},err,"get");
}
function post(url,param,succ,err){
ajax(url,param,function(data){
succ(JSON.parse(data));
},err,"post");
}
var exports = {
ajax : ajax,
get : get,
post : post
};
return exports;
}());
WF.reg("file",function(){
function script(url,dom,cb){
var script = document.createElement("script");
script.type = "text/javascript";
if(cb){
script.onload = function(){
cd();
}
}
script.src = url;
dom = dom || document.body;
dom.appendChild(script);
}
function imgs(arrUrl,cb){
var count = 0;
var imgs = [];
for(var i=0;i= arrUrl.length){
imgs.sort(function(a,b){return a.index-b.index;});;
cb && cb(imgs);
}
}
img.index = i;
img.src = arrUrl[i];
}
}
function audios(arrUrl,cb){
var count = 0;
var audios = [];
for(var i=0;i= arrUrl.length){
audios.sort(function(a,b){return a.index-b.index;});;
cb && cb(audios);
}
},false);
audio.index = i;
audio.src = arrUrl[i];
}
}
var exports = {
script:script,
imgs : imgs,
audios : audios
}
return exports;
}());
WF.reg("obj",function(){
function merge(objOne,objTwo){
for(var key in objTwo){
objOne[key] = objTwo[key];
}
}
var exports = {
merge : merge
}
return exports;
}());
WF.reg("box2d",function(){
function boxIn(box1,box2){
if(box1.x >= box2.x && box1.x+box1.w <= box2.x+box2.w){
if(box1.y >= box2.y && box1.y + box1.h <= box2.y + box2.h)return true;
}
return false;
}
function boxOver(box1,box2){
if(box1.x >= box2.x && box1.x <= box2.x + box2.w){
if(box1.y >= box2.y && box1.y <= box2.y + box2.h)return true;
}
if(box1.x + box1.w >= box2.x && box1.x + box1.w <= box2.x + box2.w){
if(box1.y + box1.h >= box2.y && box1.y + box1.h <= box2.y + box2.h)return true;
}
return false;
}
var exports = {
boxIn : boxIn,
boxOver : boxOver
};
return exports;
}());
WF.reg("sprite",function(){
//帧的定义
/**
@param x int 帧在雪碧图中的起始x坐标
@param y int 帧在雪碧图中的起始y坐标
@param w int 帧在雪碧图中的宽
@param y int 帧在雪碧图中的高
@param dw int 帧实际的宽
@param dh int 帧实际的高
*/
var Frame = function(x,y,w,h,dw,dh){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.dw = dw;
this.dh = dh;
}
//一个精灵得定义
/**
@param arr Array 帧的数组
@param repeat boolean 动画是否重复
*/
var Animation = function(param) {
this.startX = param.startX || 0;
this.startY = param.startY || 0;
this.fs = param.fs || 1;
this.sw = param.sw || 0;
this.sh = param.sh || 0;
this.width = param.width || param.sw;
this.height = param.height || param.sh;
this.dir = param.dir || "right";
this.loop = !!param.loop;
//this.fps = param.fps || 30;
//this.lazy = 1000 / this.fps;
//this.last = 0;
this.ls = [];
//当前帧
this.current = null;
//当前帧得索引
this.index = -1;
this.init();
}
Animation.prototype = {
init : function(){
for(var i=0;i= this.ls.length){
if(this.loop){
this.current = this.ls[0];
this.index = 0;
}
}
else{
this.index += 1;
this.current = this.ls[this.index];
}
},
//重置为第一帧
reset : function(){
this.current = this.ls[0];
this.index = 0;
},
size : function(){
return {w:this.width,h:this.height};
}
}
//一个精灵的定义
/**
@param objParam object 动画的json对象 {"left":[frame1,frame2],"right":[frame1,frame2]}
@param def string 默认动画索引
@param img object 精灵得雪碧图
@param cxt object canvas对象
@param x int 精灵的起始位置x
@param y int 精灵的起始位置y
*/
var Sprite = function(img,cxt,fps,param){
this.animations = {};
this.img = img;
this.cxt = cxt;
this.x = param.x || 0;
this.y = param.y || 0;
this.fps = fps;
this.xspeed = param.xspeed || 0;
this.yspeed = param.yspeed || 0;
this.yaspeed = param.yaspeed || 0;
this.lazy = 1000 / this.fps;
this.last = 0;
this.moveLazy = 33;
this.moveLast = 0;
//当前动画
this.index = null;
this.key = "";
}
Sprite.prototype = {
add : function(key,animation){
this.animations[key] = animation;
if(!this.index){
this.index = animation;
this.key = key;
}
},
//修改当前动画
change : function(key){
if(key == this.key)return false;
var index = this.animations[key];
if(!index)return false;
this.index = index;
this.okey = this.key;
this.key = key;
this.index.reset();
},
//绘画出当前帧
draw : function(){
if(!this.index || !this.img)return false;
var frame = this.index.current;
this.cxt.drawImage(this.img,frame.x,frame.y,frame.w,frame.h,this.x,this.y,frame.dw,frame.dh);
},
//更新精灵
update : function(){
var t = new Date().getTime();
var diff = t - this.last;
var moveDiff = t - this.moveLast;
if(this.last == 0){
diff = this.lazy;
moveDiff = this.moveLazy;
}
if(diff >= this.lazy){
this.index.next();
this.last = t;
}
if(moveDiff >= this.moveLazy){
if(this.yaspeed)this.yspeed += this.yaspeed;
if(this.xspeed)this.x += this.xspeed;
if(this.yspeed)this.y += this.yspeed;
this.moveLast = t;
}
},
//移动
move : function(x,y){
this.x = x;
this.y = y;
},
setXSpeed : function(xs){
this.xspeed = xs;
},
setYSpeed : function(ys,yas){
this.yspeed = ys;
this.yaspeed = yas || 0;
},
//获取当前精灵得大小
size : function(){
var frame = this.index.current;
return {w:frame.dw,h:frame.dh,x:this.x,y:this.y,r:this.x+frame.dw,b:this.y+frame.dh};
}
}
var exports = {
Frame : Frame,
Animation : Animation,
Sprite : Sprite
};
return exports;
}());
WF.reg("time",function(){
//定义贞管理类，兼容
var requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| function(cb){setTimeout(cb,1000/60)};
var TimeProcess = function(){
this.list = [];
this.isStart = false;
}
TimeProcess.prototype = {
add : function(cb,param,context){
this.list.push({cb:cb,param:param,context:context});
},
start : function(){
this.isStart = true;
var self = this;
requestAnimationFrame(function(){
var item = null,
p = [];
for(var i=0;i= 100)this.life = 100;
//判断边界值
var f_size = this.size();
var x = f_size.x;
var y = f_size.y;
if(x <= 0)x = 0;
if(f_size.r >= this.pinfo.w)x = this.pinfo.w - f_size.w;
if(f_size.b >= this.pinfo.h && this.isJump==true){
y = this.pinfo.h - f_size.h;
this.dead();
}
if(f_size.y <= 0)this.dead();
//判断是否离开方块
if(this.block){
var b_size = this.block.size();
if(f_size.r <= b_size.x || f_size.x >= b_size.r){
this.goDown();
}
}
if(this.isFilp && this.sprite.yspeed >= 0){
this.goDown();
}
this.move(x,y);
},
draw : function(){
this.sprite.draw();
},
changeDir : function(dir,flag){
this.lastKey = dir;
if(this.isDead)return false;
if(dir == this.dir && (dir=="left" || dir=="right"))return false;
if(this.isJump == false || dir == "down" || dir == "up"){
this.dir = dir;
this.sprite.change(this.dir);
}
var xforce = this.block?this.block.xforce||0:0;
if(dir == "left")this.sprite.setXSpeed(this.xspeed*-1 + xforce);
else if(dir == "right")this.sprite.setXSpeed(this.xspeed + xforce);
else if(dir == "normal" && !flag) this.sprite.setXSpeed(xforce);
},
size : function(){
return this.sprite.size();
},
move : function(x,y){
this.sprite.move(x,y);
},
checkBlockOn : function(block){
if(!this.isJump)return false;
var m_size = this.size();
var b_size = block.sprite.size();
if(m_size.r > b_size.x && m_size.x < b_size.r){
if(m_size.b >= b_size.y && m_size.b <= b_size.b +4){
this.standBlock(m_size.x,b_size.y-m_size.h);
this.block = block;
block.ManOn(this);
return true;
}
}
return false;
},
standBlock : function(x,y){
this.move(x,y);
this.isJump = false;
if(this.lastKey == "left" || this.lastKey == "right"){
this.changeDir(this.lastKey);
}else{
this.changeDir("normal",true);
}
},
goDown : function(){
if(this.dir == "normal")this.sprite.setXSpeed(0);
this.sprite.setYSpeed(this.yspeed,this.yaspeed);
this.changeDir("down");
this.isJump = true;
this.isFilp = false;
this.block = null;
},
goUp : function(){
this.changeDir("up");
this.isJump = true;
this.isFilp = true;
this.block = null;
this.sprite.setYSpeed(this.yspeed*-2,0.4);
},
changeSpeed : function(xspeed,yspeed){
if(xspeed)this.sprite.setXSpeed(xspeed);
if(yspeed)this.sprite.setYSpeed(yspeed);
},
setXForce : function(xforce){
if(this.dir == "left"){
this.sprite.setXSpeed(this.xspeed * -1 + xforce);
}
else if(this.dir == "right"){
this.sprite.setXSpeed(this.xspeed + xforce);
}
else if(this.dir == "normal"){
this.sprite.setXSpeed(xforce);
}
},
cutLift : function(cut){
this.life -= cut;
if(this.life <= 0)this.dead();
},
dead : function(){
this.sprite.setXSpeed(0);
this.sprite.setYSpeed(0);
this.changeDir("normal");
this.isDead = true;
}
}
var BlockBase = function(x,y,img,cxt,panelInfo){
this.x = x;
this.y = y;
this.img = img;
this.cxt = cxt;
this.pinfo = panelInfo;
this.yspeed = -4;
this.sprite = null;
this.dismiss = false;
}
BlockBase.prototype = {
init : function(){
this.initSprite();
},
initSprite : function(){},
update : function(){
this.sprite.update();
this.childUpdate();
},
childUpdate : function(){},
checkMap : function(){
var size = this.sprite.size();
if(size.y <= 0)return true;
return false;
},
ManOn : function(man){},
draw : function() {
this.sprite.draw();
},
size : function(){
return this.sprite.size();
}
}
var NormalBlock = function(x,y,img,cxt,panelInfo){
BlockBase.apply(this,arguments);
}
NormalBlock.prototype = new BlockBase();
NormalBlock.prototype.initSprite = function(){
var sprite = new WF.sprite.Sprite(this.img,this.cxt,1,{x:this.x,y:this.y,yspeed:this.yspeed});
sprite.add("normal",new WF.sprite.Animation({sw:200,sh:32,width:100,height:16,dir:"down"}));
this.sprite = sprite;
};
NormalBlock.prototype.ManOn = function(man){
man.changeSpeed(0,this.yspeed);
}
var MissBlock = function(x,y,img,cxt,panelInfo){
BlockBase.apply(this,arguments);
this.restTime = 30;
this.isStand = false;
}
MissBlock.prototype = new BlockBase();
MissBlock.prototype.initSprite = function(){
var sprite = new WF.sprite.Sprite(this.img,this.cxt,1,{x:this.x,y:this.y,yspeed:this.yspeed});
sprite.add("normal",new WF.sprite.Animation({startY:32,sw:200,sh:32,width:100,height:16,dir:"down"}));
this.sprite = sprite;
}
MissBlock.prototype.ManOn = function(man){
man.changeSpeed(0,this.yspeed);
this.isStand = true;
}
MissBlock.prototype.childUpdate = function(){
if(!this.isStand)return false;
this.restTime--;
if(this.restTime <= 0){
this.dismiss = true;
}
}
var LeftBlock = function(x,y,img,cxt,panelInfo){
BlockBase.apply(this,arguments);
this.xforce = -4;
}
LeftBlock.prototype = new BlockBase();
LeftBlock.prototype.initSprite = function(){
var sprite = new WF.sprite.Sprite(this.img,this.cxt,5,{x:this.x,y:this.y,yspeed:this.yspeed});
sprite.add("normal",new WF.sprite.Animation({sw:200,sh:32,width:100,height:16,dir:"down",fs:2,loop:true}));
this.sprite = sprite;
}
LeftBlock.prototype.ManOn = function(man){
man.changeSpeed(0,this.yspeed);
man.setXForce(this.xforce);
}
var RightBlock = function(x,y,img,cxt,panelInfo){
BlockBase.apply(this,arguments);
this.xforce = 4;
}
RightBlock.prototype = new BlockBase();
RightBlock.prototype.initSprite = function(){
var sprite = new WF.sprite.Sprite(this.img,this.cxt,5,{x:this.x,y:this.y,yspeed:this.yspeed});
sprite.add("normal",new WF.sprite.Animation({startY:64,sw:200,sh:32,width:100,height:16,dir:"down",fs:2,loop:true}));
this.sprite = sprite;
}
RightBlock.prototype.ManOn = function(man){
man.changeSpeed(0,this.yspeed);
man.setXForce(this.xforce);
}
var ThornBlock = function(x,y,img,cxt,panelInfo){
BlockBase.apply(this,arguments);
this.cut = 70;
}
ThornBlock.prototype = new BlockBase();
ThornBlock.prototype.initSprite = function(){
var sprite = new WF.sprite.Sprite(this.img,this.cxt,1,{x:this.x,y:this.y,yspeed:this.yspeed});
sprite.add("normal",new WF.sprite.Animation({sw:200,sh:32,width:100,height:16,dir:"down"}));
this.sprite = sprite;
}
ThornBlock.prototype.ManOn = function(man){
man.cutLift(this.cut);
man.changeSpeed(0,this.yspeed);
}
var FlipBlock = function(x,y,img,cxt,panelInfo){
BlockBase.apply(this,arguments);
this.flipcount = 5;
this.isStand = false;
}
FlipBlock.prototype = new BlockBase();
FlipBlock.prototype.initSprite = function(){
var sprite = new WF.sprite.Sprite(this.img,this.cxt,1,{x:this.x,y:this.y,yspeed:this.yspeed});
sprite.add("normal",new WF.sprite.Animation({sw:200,sh:32,width:100,height:16,dir:"down"}));
sprite.add("down",new WF.sprite.Animation({startY:32,sw:200,sh:24,width:100,height:12,dir:"down"}));
sprite.add("up",new WF.sprite.Animation({startY:56,sw:200,sh:43,width:100,height:22,dir:"down"}));
this.sprite = sprite;
}
FlipBlock.prototype.changeDir = function(dir){
var o_size = this.sprite.size();
this.sprite.change(dir);
var n_size = this.sprite.size();
var y = (o_size.h - n_size.h) + o_size.y;
this.sprite.move(o_size.x,y);
}
FlipBlock.prototype.ManOn = function(man){
this.changeDir("down");
man.changeSpeed(0,this.yspeed);
this.isStand = true;
man.goUp();
}
FlipBlock.prototype.childUpdate = function(){
if(!this.isStand)return false;
this.flipcount--;
if(this.flipcount <= 0){
this.isStand = false;
this.flipcount = 5;
this.changeDir("up");
}
}
var BlockFactory = {
imgs : {
"block":null,
"move":null,
"flip":null,
"thorn":null
},
gameinfo : null,
cxt : null,
init : function(param){
this.imgs.block = param.block;
this.imgs.move = param.move;
this.imgs.flip = param.flip;
this.imgs.thorn = param.thorn;
this.gameinfo = param.gameinfo;
this.cxt = param.cxt;
},
create : function(){
var rnd = Math.floor(Math.random()*14);
var rnd_x = Math.floor(Math.random()*224);
var x = rnd_x;
var y = 460;
var block;
switch(rnd){
case 0:
case 1:
case 2:
block = new NormalBlock(x,y,this.imgs.block,this.cxt,this.gameinfo);
break;
case 3:
case 4:
block = new MissBlock(x,y,this.imgs.block,this.cxt,this.gameinfo);
break;
case 5:
case 6:
case 7:
block = new LeftBlock(x,y,this.imgs.move,this.cxt,this.gameinfo);
break;
case 8:
case 9:
case 10:
block = new RightBlock(x,y,this.imgs.move,this.cxt,this.gameinfo);
break;
case 11:
case 12:
block = new FlipBlock(x,y,this.imgs.flip,this.cxt,this.gameinfo);
break;
case 13:
block = new ThornBlock(x,y,this.imgs.thorn,this.cxt,this.gameinfo);
break;
}
block.init();
return block;
}
}
var Main = {
gameInfo : {w:0,h:0},
cxt : null,
person : null,
timeQuene : null,
time : 0,
leveltime : 0,
level : 0,
imgs : [],
blocks : [],
init : function(){
var canvas = document.createElement("canvas");
canvas.width = "320";
canvas.height="480";
canvas.id ="canvas";
WF.getId("js_main").appendChild(canvas);
WF.getId("js_main").setAttribute("tabindex","-1");
var span = document.createElement("span");
span.id="js_life";
WF.getId("js_main_life").appendChild(span);
WF.getId("js_end_flush").innerHTML='';
Main.initStart();
},
initStart : function(){
Main.initData();
},
initData : function(){
WF.file.imgs(["http://images.cnblogs.com/cnblogs_com/floyd/516300/o_man.png","http://images.cnblogs.com/cnblogs_com/floyd/516300/o_block.png","http://images.cnblogs.com/cnblogs_com/floyd/516300/o_move.png","http://images.cnblogs.com/cnblogs_com/floyd/516300/o_thorn.png","http://images.cnblogs.com/cnblogs_com/floyd/516300/o_flip.png","http://images.cnblogs.com/cnblogs_com/floyd/516300/o_thorn_bg.png"],function(imgs){
Main.imgs = imgs;
var canvas = WF.getId("canvas");
Main.gameInfo.w = canvas.offsetWidth;
Main.gameInfo.h = canvas.offsetHeight;
Main.cxt = canvas.getContext("2d");
WF.getId("js_start_loading").style.display="none";
WF.getId("js_start_btn").style.display = "block";
});
},
start : function(){
WF.getId("js_start_flush").style.display = "none";
Main.person = new Person(150,0,Main.imgs[0],Main.cxt,Main.gameInfo);
Main.initBlock(Main.imgs);
Main.initEvent();
Main.process();
},
initBlock : function(imgs){
BlockFactory.init({
block : imgs[1],
move : imgs[2],
flip : imgs[4],
thorn : imgs[3],
cxt : Main.cxt,
gameinfo : Main.gameInfo
});
var block = new NormalBlock(120,460,imgs[1],Main.cxt,Main.gameInfo);
block.init();
Main.blocks.push(block);
},
drawThornBg : function(){
for(var i=0;i<=35;i++){
Main.cxt.drawImage(Main.imgs[5],0,0,18,21,i*9,0,9,11);
}
},
initEvent : function(){
WF.getId("js_main").onkeydown = function(e){Main.keyDown(e);};
WF.getId("js_main").onkeyup = function(e){Main.keyUp(e);};
WF.getId("js_left_btn").ontouchstart = function(){
Main.person.changeDir("left");
}
WF.getId("js_right_btn").ontouchstart = function(){
Main.person.changeDir("right");
}
WF.getId("js_left_btn").ontouchend = WF.getId("js_right_btn").ontouchend = function(){
Main.person.changeDir("normal");
}
},
keyDown : function(e){
if(e.keyCode == 37){
this.person.changeDir("left");
}
if(e.keyCode == 39){
this.person.changeDir("right");
}
e.preventDefault();
},
keyUp : function(e){
if(e.keyCode == 37 || e.keyCode == 39){
this.person.changeDir("normal");
}
e.preventDefault();
},
process : function(){
var tq = new WF.time.TimeProcess();
tq.add(Main.draw,null,Main);
tq.add(Main.update,null,Main);
this.timeQuene = tq;
this.timeQuene.start();
},
update : function(){
Main.time++;
if(Main.time >= 40){
Main.blocks.push(BlockFactory.create());
Main.time = 0;
Main.leveltime += 2;
Main.level = Math.floor(Main.leveltime / 10);
}
Main.person.update();
if(Main.person.isDead){
Main.over();
WF.getId("js_life").style.width = "0px";
return false;
}
for(var i=0,l=Main.blocks.length;i= 100){
WF.getId("js_end_flush").getElementsByTagName("p")[0].innerHTML = "你牛B呀,下了层,男人中的男人呀！";
WF.getId("js_end_flush").getElementsByTagName("a")[0].innerHTML = "想更男人一点";
WF.getId("js_end_flush").getElementsByTagName("span")[0].className = "icon happy";
}
else{
WF.getId("js_end_flush").getElementsByTagName("p")[0].innerHTML = "你太菜了,才玩了层,还不算真男人呀！";
WF.getId("js_end_flush").getElementsByTagName("a")[0].innerHTML = "再来一次";
WF.getId("js_end_flush").getElementsByTagName("span")[0].className = "icon";
}
},
replay : function(){
Main.blocks = [];
Main.time = 0;
Main.leveltime = 0;
Main.level = 0;
Main.person.life = 100;
Main.start();
WF.getId("js_end_flush").style.display = "none";
}
};
Main.init();
// ]]></script>
完整源码猛击：下载
PS：bug这种玩意，是肯定会有的了。。。大家就见谅吧。。