点击下面链接可看动画：/article/article3/zip1/exam/a.html效果图：代码：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 =
var that =
this.timer =setTimeout(function(){
that.run();
}, // 更新游戏对象 update: function(dt) {
this.UseTime +=
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;//留下花
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;
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;//留下花
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;
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;//留下花
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;
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;//留下花
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;
this.map[this.girlPos[0]][this.girlPos[1]-1] = 5; } }, getSetp:function(){ this.setp++;
if(this.setp==this.result.length) {
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.i++){
for(var j=0;j&this.map[i].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] =
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 =
img.onload =function(){ FlGame.imgOnload(this);}
img.onerror = function(e){
alert(&资源加载时发生错误！&+this.src);
} }})();全部代码请下载。热情奉献：HTML5 Canvas绘图与动画学习59例源码
最新教程周点击榜
微信扫一扫君，已阅读到文档的结尾了呢~~
推箱子游戏设计与实现
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
推箱子游戏设计与实现
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口推箱子小游戏大全
游戏简介：最好玩的推箱子小游戏、推箱子小游戏大全，尽在新浪玩玩小游戏平台。这里不仅有推箱子游戏，还有数以千计、五花八门的免费在线小游戏等你来玩，还等什么！快来玩吧！
推箱子小游戏
人气用户推荐
热门游戏榜
新浪玩玩意见反馈
欢迎使用新浪玩玩并提出宝贵建议。请提交玩玩意见反馈。
Copyright & 1996 - 2017 SINA Corporation, All Rights Reserved
北京市通信公司提供网络带宽}