网页特效
建站首页
|
广告代码
|
源码下载
|
站长工具
|
字体下载
|
网页模板
|
收藏本站
|
设为首页
网站首页
菜单导航
日期时间
背景图像
图层样式
鼠标键盘
页面窗口
色彩表格
链接文字
表单按钮
计数转换
游戏娱乐
综合实例
特效
热门搜索:
特效代码
js脚本
导航菜单
热点推荐:
英文字体
人民币汇率
dw插件
站长常用软件
alexa排名查询
您的位置:
网页特效
->
游戏娱乐
-> 推箱子 网页特效代码
推箱子 网页特效代码
作者:推箱子 网页特效代码 发布时间:2007-11-22 23:38:52 发布人: admin
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> <script> var smapdata = new Array( "11111111111111111111", "10000000000000000001", "10010000000000000001", "10010020000000000001", "10010000000000000301", "10010111110000003001", "10000001000000000301", "10000001000010000001", "10000001000000000001", "10000001000000111001", "10000000000000000001", "10000000011110000001", "10020200000000000001", "10000000000000000001", "11111111111111111111" )//原始地图信息,便于编辑地图。 var mapData =new Array(15); var spriteX=0; spriteY=0; var winbox=0; function readMap(){ //重建地图信息便于程序使用。 for(var i=0;i<15;i++){ mapData[i]=new Array(20); for(var j=0;j<20;j++){ mapData[i][j]=smapdata[i].substr(j,1); } } } function CreateMap(){ //用dom来创建地图。 var x=30; var y=30; var cbox=0; for (var i=0;i<15;i++){ for (var j=0;j<20;j++){ var oe=document.createElement("div"); oe.id="box"+i+"_"+j; //设定id规则以便后面程序访问。 oe.className="map"+mapData[i][j]; oe.style.pixelLeft=x; oe.style.pixelTop=y; gameArea.appendChild(oe); x+=19; } y+=19; x=30; } } function mLeft(){ if(spriteX-1>0) { if(mapData[spriteY][spriteX-1]=="1" ) return; if(mapData[spriteY][spriteX-1]=="2" ) { if(mapData[spriteY][spriteX-2]=="0" || mapData[spriteY][spriteX-2]=="3"){ if(mapData[spriteY][spriteX-2]=="3"){ mapData[spriteY][spriteX-2]="1";//若推到了目的地,则改箱子的属性为障碍物,从而固定箱子位置。 winbox++; if(winbox==3) win();//若三个箱子都到达目的地则赢。 } else mapData[spriteY][spriteX-2]="2"; mapData[spriteY][spriteX-1]="0"; eval("box"+spriteY+"_"+(spriteX-1)).style.backgroundColor='#333333'; eval("box"+spriteY+"_"+(spriteX-2)).style.backgroundColor='#3333FF'; spriteX--; sprite.style.pixelLeft-=19; } }else{ spriteX--; sprite.style.pixelLeft-=19; } } } function mRight(){ if(spriteX+1<20){ if(mapData[spriteY][spriteX+1]=="1") return; if(mapData[spriteY][spriteX+1]=="2"){ if(mapData[spriteY][spriteX+2]=="0" || mapData[spriteY][spriteX+2]=="3"){ if(mapData[spriteY][spriteX+2]=="3") { mapData[spriteY][spriteX+2]="1"; winbox++; if(winbox==3) win(); } else mapData[spriteY][spriteX+2]="2"; mapData[spriteY][spriteX+1]="0"; eval("box"+spriteY+"_"+(spriteX+1)).style.backgroundColor='#333333'; eval("box"+spriteY+"_"+(spriteX+2)).style.backgroundColor='#3333FF'; spriteX++; sprite.style.pixelLeft+=19; } }else{ spriteX++; sprite.style.pixelLeft+=19; } } } function mUp(){ if(spriteY-1>0) { if(mapData[spriteY-1][spriteX]=="1") return; if(mapData[spriteY-1][spriteX]=="2") { if(mapData[spriteY-2][spriteX]=="0" || mapData[spriteY-2][spriteX]=="3") { if(mapData[spriteY-2][spriteX]=="3") { mapData[spriteY-2][spriteX]="1"; winbox++; if(winbox==3) win(); } else mapData[spriteY-2][spriteX]="2"; mapData[spriteY-1][spriteX]="0"; eval("box"+(spriteY-1)+"_"+spriteX).style.backgroundColor='#333333'; eval("box"+(spriteY-2)+"_"+spriteX).style.backgroundColor='#3333FF'; spriteY--; sprite.style.pixelTop-=19; } }else{ spriteY--; sprite.style.pixelTop-=19; } } } function mDown(){ if(spriteY+1<20){ if(mapData[spriteY+1][spriteX]=="1") return; if(mapData[spriteY+1][spriteX]=="2") { if(mapData[spriteY+2][spriteX]=="0" || mapData[spriteY+2][spriteX]=="3") { if(mapData[spriteY+2][spriteX]=="3") { mapData[spriteY+2][spriteX]="1" winbox++; if(winbox==3) win(); } else mapData[spriteY+2][spriteX]="2"; mapData[spriteY+1][spriteX]="0"; eval("box"+(spriteY+1)+"_"+spriteX).style.backgroundColor='#333333'; eval("box"+(spriteY+2)+"_"+spriteX).style.backgroundColor='#3333FF'; spriteY++; sprite.style.pixelTop+=19; } }else{ spriteY++; sprite.style.pixelTop+=19; } } } function win(){ alert("you win!!!!!!!!!!!!!"); } function fnKeydown(){ var key=event.keyCode; switch(key){ case 37: mLeft(); break; case 39: mRight(); break; case 38: mUp(); break; case 40: mDown(); break; } return false; } function init(){ readMap(); CreateMap(); sprite.style.pixelLeft=49; sprite.style.pixelTop=49; spriteX=1; spriteY=1; } document.onkeydown=fnKeydown; </script> <style type="text/css">.map0 { BACKGROUND-COLOR: #333333; BORDER-BOTTOM: #999999 1px solid; BORDER-LEFT: #999999 1px solid; BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; HEIGHT: 20px; POSITION: absolute; WIDTH: 20px } .map1 { BACKGROUND-COLOR: #999999; BORDER-BOTTOM: #ffffff 2px outset; BORDER-LEFT: #ffffff 2px outset; BORDER-RIGHT: #ffffff 2px outset; BORDER-TOP: #ffffff 2px outset; HEIGHT: 20px; POSITION: absolute; WIDTH: 20px } .map2 { BACKGROUND-COLOR: #3333ff; BORDER-BOTTOM: #999999 1px solid; BORDER-LEFT: #999999 1px solid; BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; HEIGHT: 20px; POSITION: absolute; WIDTH: 20px } .map3 { BACKGROUND-COLOR: #006600; BORDER-BOTTOM: #999999 0px solid; BORDER-LEFT: #999999 0px solid; BORDER-RIGHT: #999999 0px solid; BORDER-TOP: #999999 0px solid; HEIGHT: 20px; POSITION: absolute; WIDTH: 20px } .box { BACKGROUND-COLOR: #0000cc; BORDER-BOTTOM: #ffffff 1px outset; BORDER-LEFT: #ffffff 1px outset; BORDER-RIGHT: #ffffff 1px outset; BORDER-TOP: #ffffff 1px outset; HEIGHT: 20px; POSITION: absolute; WIDTH: 20px } </style> <meta content="MSHTML 5.00.2920.0" name="GENERATOR"></head> <body bgcolor="#333333" onload="init()"> <div id="gameArea"></div> <div id="sprite" style="POSITION: absolute"><img src="http://web.archive.org/web/20150818102254im_/http://img.alixixi.com/li01.gif" width="20" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"></div></body></html>
推箱子 网页特效代码
将本文收藏到QQ书签与更多好友分享
上一篇:文章:
数格排序网页特效代码
下一篇:文章:
字母华容道网页特效代码
本类浏览排行 »
搜索页面中的内容
又一款综合搜索引擎代码
标题栏显示当前时间
倒影效果的电子表,显示当前时间
自动记录当前页面最新的更新日期
JS让网页每隔2秒弹出一次对话框
一款超酷的CSS列表排行榜
鼠标悬停放大的纯CSS分页效果
本站推荐文章 »
垂直三栏自适应等高布局
仿QQ消息管理器的文本内容样式
支付宝的控制台动画效果菜单
文字、图片拖曳移动
可拉伸移动的DIV层效果
很酷的图片伸缩放大功能
较好的视觉效果的网页选项卡
CSS实例:通过定义渐变边框给图片加阴影