HTML5 推箱子游戏过关演示动画

点击下面链接可看动画:
[url]http://www.108js.com/article/article3/zip1/exam/a.html[/url]

效果图:[img]http://dl2.iteye.com/upload/attachment/0096/5256/03b73cb3-f5b3-30ee-8763-c540fd983bda.gif[/img]

代码:
 var canvas = document.getElementById("gameBox");
var context = canvas.getContext("2d");
var imglen = 14; //需预加载的图片数量
/*游戏主对象*/
var FlGame = {
grade : 2, //关卡
loadImgLen : 0, //已加载的图片数量
imgList : {},//缓存所有图像
map : [],//地图数据
timer : null, //计时器
girlPos : [], //女孩的位置
girlDirec : "down", //女孩当前的朝向(默认正面朝下)
girlFrame : 0, //女孩动画第N帧,共两帧
MoveTimes:0,//移动次数
UseTime:0,
lastTime:0,
msg: document.getElementById("msg"),
setp:-1,//移动步数
result:[],//过关答案
init : function(){ //入口
this.result=getSuccess(this.grade).split("");
this.getMap(this.grade);
this.draw();
this.lastTime= Date.now();
this.run();

},
getMap : function(_mapIndex){
this.map = getMap(_mapIndex);
},
draw : function(){ //绘制主对象
this.clearCanvas();
this.drawMap();
this.drawGirl();
this.showMoveInfo();
},

// 游戏主循环
run : function(){ //运行帧
var now = Date.now();
var dt = (now - this.lastTime) / 1000.0;
this.update(dt);//更新
this.draw();
this.lastTime = now;
var that = this;

this.timer = setTimeout(function(){
that.run();
},1000)
},

// 更新游戏对象
update: function(dt) {
this.UseTime += dt;
this.readText(dt);
},

readText:function(dt){
var sc=this.getSetp();
if(sc=="d"){
this.girlPos[0]+=1;
this.girlPos[1]+=0;
this.girlDirec ="down";

this.MoveTimes++;
}
if(sc=="u"){
this.girlPos[0]+=-1;
this.girlPos[1]+=0;
this.girlDirec ="up";
this.MoveTimes++;
}
if(sc=="l"){
this.girlPos[0]+=0;
this.girlPos[1]+=-1;
this.girlDirec ="left";
this.MoveTimes++;
}
if(sc=="r"){
this.girlPos[0]+=0;
this.girlPos[1]+=+1;
this.girlDirec ="right";
this.MoveTimes++;
}

if(sc=="D"){
this.girlPos[0]+=1;
this.girlPos[1]+=0;
this.girlDirec ="down";
this.MoveTimes++;
if(this.map[this.girlPos[0]][this.girlPos[1]]==6)//人的位置是带花的花盆
this.map[this.girlPos[0]][this.girlPos[1]] = 4;//留下花
else
this.map[this.girlPos[0]][this.girlPos[1]] = 3;

if( this.map[this.girlPos[0]+1][this.girlPos[1]] ==4)
this.map[this.girlPos[0]+1][this.girlPos[1]] = 6;
else
this.map[this.girlPos[0]+1][this.girlPos[1]] = 5;

}

if(sc=="U"){
this.girlPos[0]+=-1;
this.girlPos[1]+=0;
this.girlDirec ="up";
this.MoveTimes++;
if(this.map[this.girlPos[0]][this.girlPos[1]]==6)//人的位置是带花的花盆
this.map[this.girlPos[0]][this.girlPos[1]] = 4;//留下花
else
this.map[this.girlPos[0]][this.girlPos[1]] = 3;
if( this.map[this.girlPos[0]-1][this.girlPos[1]] ==4)
this.map[this.girlPos[0]-1][this.girlPos[1]] = 6;
else
this.map[this.girlPos[0]-1][this.girlPos[1]] = 5;
}
if(sc=="R"){
this.girlPos[0]+=0;
this.girlPos[1]+=1;
this.girlDirec ="right";
this.MoveTimes++;
if(this.map[this.girlPos[0]][this.girlPos[1]]==6)//人的位置是带花的花盆
this.map[this.girlPos[0]][this.girlPos[1]] = 4;//留下花
else
this.map[this.girlPos[0]][this.girlPos[1]] = 3;


if( this.map[this.girlPos[0]][this.girlPos[1]+1] ==4)
this.map[this.girlPos[0]][this.girlPos[1]+1] = 6;
else
this.map[this.girlPos[0]][this.girlPos[1]+1] = 5;

}
if(sc=="L"){
this.girlPos[0]+=0;
this.girlPos[1]+=-1;
this.girlDirec ="left";
this.MoveTimes++;
if(this.map[this.girlPos[0]][this.girlPos[1]]==6)//人的位置是带花的花盆
this.map[this.girlPos[0]][this.girlPos[1]] = 4;//留下花
else
this.map[this.girlPos[0]][this.girlPos[1]] = 3;
if( this.map[this.girlPos[0]][this.girlPos[1]-1] ==4)
this.map[this.girlPos[0]][this.girlPos[1]-1] = 6;
else
this.map[this.girlPos[0]][this.girlPos[1]-1] = 5;

}

},
getSetp:function(){
this.setp++;
if(this.setp==this.result.length) {
return 0;
}
return this.result[this.setp];
},
drawMap : function(){
var mapBg = context.createPattern(this.imgList.map_bg,"repeat");
context.save();
context.fillStyle = mapBg;
context.fillRect(0,0,667,519);
context.restore();
for(var i=0;i<this.map.length;i++){
for(var j=0;j<this.map[i].length;j++){
if(this.map[i][j]!=1){
var x = (j+1)*1+j*36;
var y = (i+1)*1+i*36;
if(this.map[i][j]==9){//人物位置,在人的位置要绘底图
this.map[i][j] = 3;
if(this.girlPos.length==0){ //初始化时,取一次人物的初始坐标
this.girlPos = [i,j];
}
}
var mapFlag = this.map[i][j];
context.drawImage(this.imgList["map_"+mapFlag],x,y);
}
}
}
},
drawGirl :function(){ //女孩,direc方向
this.girlFrame = this.girlFrame==0?1:0;
var i = this.girlPos[0];
var j = this.girlPos[1];
var x = (j+1)*1+j*36+3;
var y = (i+1)*1+i*36-4;
context.drawImage(this.imgList["npc_"+this.girlDirec+"_"+this.girlFrame],x,y);
},

showMoveInfo:function()
{
this.msg.innerHTML="第"+(this.grade)+"关 移动次数:"+this.MoveTimes+" 用时:"+Math.floor(this.UseTime);
},
stop : function(){ //停止
clearInterval(this.timer);
},
clearCanvas : function(){ //清空画布
canvas.width=0;
canvas.width=667;
},

imgOnload : function(img){
FlGame.loadImgLen++;
FlGame.imgList[img.picname] = img;
if(FlGame.loadImgLen==imglen){
FlGame.init();//所有图片加载后启动动画
}
}
};
//加载所属图片
(function(){
var imgList = { //加载的清单
map_bg:"images/map_bg.png",
map_2:"images/map_2.jpg",
map_3:"images/map_3.jpg",
map_4:"images/map_4.jpg",
map_5:"images/map_5.jpg",
map_6:"images/map_6.jpg",
npc_down_0:"images/npc_down_0.png",
npc_down_1:"images/npc_down_1.png",
npc_up_0:"images/npc_up_0.png",
npc_up_1:"images/npc_up_1.png",
npc_left_0:"images/npc_left_0.png",
npc_left_1:"images/npc_left_1.png",
npc_right_0:"images/npc_right_0.png",
npc_right_1:"images/npc_right_1.png"
};
for(name in imgList){
var img = new Image();
img.src = imgList[name];
img.picname = name;
img.onload =function(){ FlGame.imgOnload(this);}
img.onerror = function(e){
alert("资源加载时发生错误!"+this.src);
}
}
})();


全部代码请下载。
热情奉献:[color=blue][b]HTML5 Canvas绘图与动画学习59例源码[/b][/color]
[url]http://www.108js.com/example.html[/url]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值