js实现推箱子小游戏
来源：互联网 发布：u盘文件系统 知乎 编辑：程序博客网 时间：2024/05/01 21:23
w读者只需要 将代码中的图片添加 就可以运行这段程序 图片代表什么 代码中有注释 图片大小 均为35*35<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #wrap{ margin:50px auto;
//背景小方格 35*35 background: url("../image/bsckGreen.png"); position: relative; } #wrap div{ width: 35px; height: 35px; position: absolute; } #wrap div img{ position: absolute; } #wrap div.people img{ z-index: 2; } #wrap div.box img{ z-index: 1; } /* #wrap div img.tree{ position: absolute; bottom: 0px; } #wrap div image.ball{ }*/ </style></head><body><div id="wrap"></div><script type="text/javascript"> window.onload=function () { Game.exe(); } var Game={ //先找wrap oWrap:document.getElementById("wrap"), exe:function(){ Game.CreateWrap(Game.level); }, //当前管卡 level:0, size:{x:16,y:16}, CreateWrap: function(lel){ size={x:16,y:16}; Game.oWrap.style.cssText="width:"+size.x*35+"px;height:"+size.y*35+"px;"; //将将小格子变成div for(var i=0;i<size.x*size.y;i++){ var opeople; /* Game.oWrap.appendChild(appenddiv);*/ var x,y; switch (Game.mapdata[lel][i]){ case 1: //算坐标 x=i%size.x; y=parseInt(i/size.x); var appenddiv=document.createElement("div"); appenddiv.style.cssText="left:"+x*35+"px;top:"+y*35+"px;"; //这种image对象的方式 有一种预加载的功能 当你给他src 的时候 就会开始加载图片 var ima=new Image(); /游戏边界 树的图片 ima.src="../image/backtree.png"; appenddiv.appendChild(ima); appenddiv.className="tree"; appenddiv.x=x; appenddiv.y=y; appenddiv.appendChild(ima); Game. oWrap.appendChild(appenddiv); break; case 2: x=i%size.x; y=parseInt(i/size.x); /*alert(x+" "+y);*/ var appenddiv=document.createElement("div"); appenddiv.x=x; appenddiv.y=y; appenddiv.style.cssText="left:"+x*35+"px;top:"+y*35+"px;"; var ima=new Image();
//金蛋图片 ima.src="../image/backegg.png"; appenddiv.className="ball"; appenddiv.appendChild(ima); Game. oWrap.appendChild(appenddiv); break; case 3: x=i%size.x; y=parseInt(i/size.x); var appenddiv=document.createElement("div"); appenddiv.x=x; appenddiv.y=y; appenddiv.style.cssText="left:"+x*35+"px;top:"+y*35+"px;"; var ima=new Image();
//箱子图片 ima.src="../image/backbox.png" appenddiv.className="box"; appenddiv.appendChild(ima); Game. oWrap.appendChild(appenddiv); break; case 4: x=i%size.x; y=parseInt(i/size.x); var appenddiv=document.createElement("div"); appenddiv.x=x; appenddiv.y=y; appenddiv.style.cssText="left:"+x*35+"px;top:"+y*35+"px;"; var ima=new Image();
//推箱子的小人图片 ima.src="../image/backpeople.png" opeople=ima; appenddiv.className="people"; appenddiv.appendChild(ima); Game. oWrap.appendChild(appenddiv); opeople=ima; break; } } Game.contralPeople(opeople); }, //控制小人 contralPeople:function(op){ //先找到opeople div oparent=op.parentNode; document.onkeydown=function (event) { event=event||window.event; var keyCode=event.keyCode; switch(keyCode){ //往zuo走 case 37: /*alert(Game.level); alert(oparent.x-1+oparent.y*Game.size.x) alert(Game.mapdata[Game.level,oparent.x-1+oparent.y*Game.size.x]);*/ Game.movePeople({x:-1},op); break; //上 case 38: Game.movePeople({y:-1},op); break; case 39: Game.movePeople({x:1},op); break; case 40: Game.movePeople({y:1},op); break; } } }, movePeople:function (json,op) { //临时存放box[i] opeople = op; oparent = opeople.parentNode; var box = Game.getClass(Game.oWrap, "box"); x = json.x || 0; y = json.y || 0; if (Game.mapdata[Game.level][oparent.x + x + (oparent.y + y) * Game.size.x] != 1) { oparent.x = oparent.x + x; oparent.y = oparent.y + y; oparent.style.left = oparent.offsetLeft + x * 35 + "px"; oparent.style.top = oparent.offsetTop + y * 35 + "px"; for (var i = 0; i < box.length; i++) { if (box[i].x == oparent.x && box[i].y == oparent.y) { if (Game.mapdata[Game.level][box[i].x + x + (box[i].y + y) * Game.size.x] != 1) { //检测两个箱子是否碰撞 碰撞 小人则弹回 //alert(1); if (!Game.twoBoxJianCe(box[i], x, y)) { //alert(2); box[i].x = box[i].x + x; box[i].y = box[i].y + y; box[i].style.left = box[i].offsetLeft + x * 35 + "px"; box[i].style.top = box[i].offsetTop + y * 35 + "px"; Game.isOrNoSuccess(); } else { oparent.x = oparent.x - x; oparent.y = oparent.y - y; oparent.style.left = oparent.offsetLeft - x * 35 + "px"; oparent.style.top = oparent.offsetTop - y * 35 + "px"; } } else { //我特么就是天才 人物弹回 oparent.x = oparent.x - x; oparent.y = oparent.y - y; oparent.style.left = oparent.offsetLeft - x * 35 + "px"; oparent.style.top = oparent.offsetTop - y * 35 + "px"; } } } } /*alert(box[0].x);*/ }, twoBoxJianCe: function(box,x,y){ var obox=Game.getClass(Game.oWrap,"box"); //alert(box.x); for(var i=0;i<obox.length;i++){ //alert(obox[i].x); if(obox[i]!=box){ if(obox[i].x==box.x+x&&obox[i].y==box.y+y){ alert(obox[i]); //碰撞 return true; } } } //没碰撞 return false; }, //判断 isOrNoSuccess:function(){ var ball=Game.getClass(Game.oWrap,"ball"); var box=Game.getClass(Game.oWrap,"box"); var successnum=0; /*alert(box.length); alert(ball.length)*/; for(var i=0;i<box.length;i++){ for(var j=0;j<ball.length;j++){ if(box[i].x==ball[j].x&&box[i].y==ball[j].y){ successnum++; } } } /*alert(successnum);*/ if(successnum==ball.length){ alert("嘻嘻嘻 success"); } }, //存放管卡数据 mapdata:[ //第一关管卡数据 数组下标对应一个div 1表示边界 2表示球 3是箱子 4表示小人 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0, 0,0,0,0,0,0,1,2,1,0,0,0,0,0,0,0, 0,0,0,0,0,0,1,0,1,1,1,1,0,0,0,0, 0,0,0,0,1,1,1,3,0,3,2,1,0,0,0,0, 0,0,0,0,1,2,0,3,4,1,1,1,0,0,0,0, 0,0,0,0,1,1,1,1,3,1,0,0,0,0,0,0, 0,0,0,0,0,0,0,1,2,1,0,0,0,0,0,0, 0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,], [], [], [], [], ], getClass:function (node,classname) { if(node.getElementsByClassName) { return node.getElementsByClassName(classname); //如果存在该标签 就返回 } else { var elems = node.getElementsByTagName(node), defualt = []; for (var i = 0; i < elems.length; i++) { //遍历所有标签 if(elems[i].className.indexOf(classname) != -1) { //查找相应类名的标签 defualt[defualt.length] = elems[i]; } } return defualt; } }, }; /* * 1.做地图 * wrap的大小规定 * */</script></body></html>
阅读全文
0 0
- js实现推箱子小游戏
- 推箱子小游戏实现
- Qt实现推箱子小游戏
- Java实现推箱子小游戏
- js实现的推箱子小游戏（转）
- C语言实现推箱子小游戏
- 【Java】Java实现推箱子的小游戏
- android 自定义view实现推箱子小游戏。
- win32GDI函数编程实现推箱子小游戏
- win32GDI位图编程实现推箱子小游戏
- js实现推箱子游戏
- 推箱子小游戏
- 推箱子小游戏--控制台
- 推箱子小游戏
- 推箱子小游戏源码
- c语言实现的推箱子小游戏-1
- C语言，用EGE图形库实现推箱子小游戏
- C++ 小游戏之推箱子
- eMMC应用教程：关于RPMB的应用
- 初见蓝桥——历年试题 地宫寻宝
- WebView 渲染加速
- POI设置级联关系
- 南阳理工acm 451光棍节的快乐
- js实现推箱子小游戏
- js 选择器
- android 中文网站
- 【剑指Offer学习】【面试题47：不用加减乘除做加法】
- 记一次Quartz状态ERROR的排错(服务多实例下一定要保证最新代码)
- View、ViewGroup之onMeasure
- Hibernate框架学习(一 )
- SSM项目统一异常处理方案
- INIT_DELAYED_WORK() 函数剖析
