- 浏览: 584907 次
- 来自: ...
文章分类
最新评论
-
lgh1992314:
相同的元素呢
一种离散化方法 -
HelloSummerR:
圆心的位置是随机的,于是圆的部分会落到canvas外,那样就显 ...
HTML5 Canvas学习笔记(1)处理鼠标事件 -
hlstudio:
好久没见到sokuban了,这有个java版的,带源码,可以参 ...
求推箱子的最小步数(java) -
肖泽文:
太好了,谢谢你。。有中文注释!
HTML5 推箱子游戏过关演示动画 -
swm8023:
删除操作,将最后一个叶子节点插入后也有可能上浮吧
彻底弄懂最大堆的四种操作(图解+程序)(JAVA)
点击下面链接可看动画:
http://www.108js.com/article/article3/zip1/exam/a.html
效果图:
代码:
全部代码请下载。
热情奉献:HTML5 Canvas绘图与动画学习59例源码
http://www.108js.com/example.html
http://www.108js.com/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 = 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); } } })();
全部代码请下载。
热情奉献:HTML5 Canvas绘图与动画学习59例源码
http://www.108js.com/example.html
发表评论
-
HTML5 Canvas 旋转的“金字塔”
2015-12-24 13:25 10027效果图: 效果链接:http://www.108js.co ... -
HTML5 canvas 飘扬的五星红旗
2015-12-21 08:56 2372效果图: 效果链接: http://www.108js.co ... -
简单HTML5 Canvas Arrow旋转动画
2015-05-22 08:38 12902效果图: 效果链接: http://www.108js.c ... -
HTML5 Canvas简单透明文字动画
2015-05-22 08:17 7391效果图: 效果链接: http://www.108js.c ... -
一个非常好的HTML5 Canvas焰火效果
2014-12-28 15:56 1584效果图: 点击观看效果:http://www.108js. ... -
《HTML5 Canvas学习笔记(10)》数钱数到手抽筋
2014-12-21 14:01 3205网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。 鼠标拖动或 ... -
HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三(游戏面板)
2014-07-05 07:13 1374接上一遍《HTML5 Canvas学习笔记(8)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二(方块)
2014-07-04 13:08 1663接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一(色块)
2014-07-04 10:53 2336在网上看到一个俄罗斯方块游戏: http://www.108j ... -
HTML5 Canvas学习笔记(6)拼图游戏(数字版)
2014-06-28 17:38 2494今天网上发现了一段代码,只有界面,很不错,学习了并完成了逻辑。 ... -
HTML5 Canvas学习笔记(5)游戏得分动画
2014-06-26 17:11 1080效果图: 点击查看效果: http://www.108js ... -
HTML5 Canvas学习笔记(4)游戏界面的淡入淡出
2014-06-26 11:26 1937效果图: 点击看效果: http://www.108js. ... -
HTML5 Canvas学习笔记(3)加载游戏/动画音乐
2014-06-25 11:20 1663先要准备应付各种浏览器的声音文件,什么.mp3,.ogg ... -
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
2014-06-23 23:13 1905看到哪,学到哪,记到哪。见谅,这些笔记就没有顺序和知识上的连贯 ... -
HTML5 Canvas学习笔记(1)处理鼠标事件
2014-06-21 17:48 2926一直在学习HTML5 Canvas相关内容,游戏,动画 ... -
javaScript 广度优先搜索法"自动推箱子"(二)
2014-06-12 09:57 1296接上文: javaScript 广度优先搜索法"自动 ... -
javaScript 广度优先搜索法"自动推箱子"(一)
2014-06-12 09:45 1782用JS写了一个“广度优先搜索法”自动推箱子,理论上无论 ... -
HTML5 Canvas简单淡入淡出游戏启动界面
2014-06-05 12:22 2220欢迎访问博主的网站:http://www.108js.com ... -
HTML5 Canvas贝塞尔曲线动画
2014-05-22 08:35 1401点击这里可以查看动画效果: http://www.108js. ... -
javascript for语句最佳实践
2014-05-22 08:22 548当执行冗长的for语句时,要保持语句块的尽量简洁,例如: 糟 ...
相关推荐
推箱子游戏推箱子游戏推箱子游戏推箱推箱推箱子游戏子游戏子游戏推箱子游戏推箱子游戏
HTML5版推箱子游戏源码,这款游戏主要是基于HTML5中的Canvas来实现,界面做的同样很优秀,玩法和PC版的推箱子一样。属于过关游戏,可自动跳关,或重过关,游戏玩法:用键盘上的上、下、左、右键移动小人,把箱子全部...
推箱子小游戏的开发原理ppt, 推箱子游戏功能如下: ...让玩家通过按上下左右键控制工人 推箱子,当箱子们都推到了目的地后出现过关信息,并显示下一关。推错了玩家按空格键重新玩过这关。直到过完全部关卡。
用c#做的一款推箱子小游戏,实现推箱子的基本功能,希望对初学者有帮助
控制台推箱子游戏
verilog源码 fpga实现推箱子游戏。
这个压缩包里面是推箱子游戏图片素材 各种箱子图 各种背景图 各种人物图
HTML5 Canvas推箱子小游戏 HTML5 Canvas推箱子小游戏 HTML5 Canvas推箱子小游戏
基于VS2010的推箱子游戏 挺好玩的 可以作为刚接触游戏开发的程序员借鉴
java小游戏 推箱子java小游戏 推箱子java小游戏 推箱子java小游戏 推箱子java小游戏 推箱子java小游戏 推箱子java小游戏 推箱子java小游戏 推箱子java小游戏 推箱子java小游戏 推箱子java小游戏 推箱子java小游戏 推...
基于android的推箱子游戏的源代码基于android的推箱子游戏的源代码基于android的推箱子游戏的源代码
基于FPGA的推箱子游戏设计与实现.pdf
模拟推箱子第一关游戏代码
android studio开发 推箱子小游戏
用HTML5实现的推箱子小游戏,含源代码。在firefox7和chrome11下测试通过。共100关。可用于学习HTML5或个人娱乐。
用C#实现的推箱子游戏,从网上下的,很不错的程序,值得下载.
C#推箱子小游戏,里面可以自己设计地图,总共有10个关卡。
文件压缩包中包括 推箱子游戏的所有源代码及详细注释,包括项目中所需的图片及音乐,甚至项目的开发文档都配备了,应有尽有!
java小游戏 (源码+视频+文档+ppt) swing推箱子游戏java小游戏 (源码+视频+文档+ppt) swing推箱子游戏java小游戏 (源码+视频+文档+ppt) swing推箱子游戏java小游戏 (源码+视频+文档+ppt) swing推箱子游戏java小游戏 ...
基于html5实现的推箱子小游戏,总共有100个关卡,玩家可以随机输入,每一关中,玩家一共可以使用3次炸墙,以此来降低游戏难度。