推箱子代码

最新推荐文章于 2022-06-27 18:10:00 发布
最新推荐文章于 2022-06-27 18:10:00 发布
阅读量806 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tianpeiwen/article/details/8262738
版权
<SCRIPT LANGUAGE="JavaScript">
<!--
var mappath = new Array(
"11111111111111111111",
"10000000000000000001",
"10010000000000000001",
"10010020000000000001",
"10010000000000000301",
"10010111110000003001",
"10000001000000000301",
"10000001000010000001",
"10000001000000000001",
"10000001000000111001",
"10000000000000000001",
"10000000011110000001",
"10020200000000000001",
"10000000000000000001",
"11111111111111111111"
)                   // 初始化地图信息，0代表移动区域，1代表固定区域，2代表箱子的位置，3代表箱子最终位置

var mapData =new Array(15);
var pboxX=0;
pboxY=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]=mappath[i].substr(j,1);
}
}
}

function CreateMap(){      // 创建地图
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;
oe.className="map"+mapData[i][j];
oe.style.pixelLeft=x;
oe.style.pixelTop=y;
gameArea.appendChild(oe);
x+=19;
}
y+=19;
x=30;
}
}

function move(dir){             // 移动函数
var dx=0;
var dy=0;
if(dir=="Left") dx=-1;
if(dir=="Right") dx=1;
if(dir=="Up") dy=-1;
if(dir=="Down") dy=1;
if(mapData[pboxY+dy][pboxX+dx]=="1" ) return;
if(mapData[pboxY+dy][pboxX+dx]=="2" ) {
if(mapData[pboxY+dy*2][pboxX+dx*2]=="0" || mapData[pboxY+dy*2][pboxX+dx*2]=="3"){
if(mapData[pboxY+dy*2][pboxX+dx*2]=="3"){
mapData[pboxY+dy*2][pboxX+dx*2]="1";
winbox++;
if(winbox==3) win();            // 如果三个箱子全部到位则获胜
}
else
mapData[pboxY+dy*2][pboxX+dx*2]="2";
mapData[pboxY+dy][pboxX+dx]="0";
eval("box"+(pboxY+dy)+"_"+(pboxX+dx)).style.backgroundColor='#333333';      // 移动路线的颜色
eval("box"+(pboxY+dy*2)+"_"+(pboxX+dx*2)).style.backgroundColor='#3333FF';  // 移动箱子的颜色
pboxX+=dx;
pboxY+=dy;
pbox.style.pixelLeft+=dx*19;
pbox.style.pixelTop+=dy*19;
}
}else{
pboxX+=dx;
pboxY+=dy;
pbox.style.pixelLeft+=dx*19;
pbox.style.pixelTop+=dy*19;
}
}

function win(){                // 获胜过关
alert("您已经过关！");
}

function fnKeydown(){          // 控制键盘按键
var key=event.keyCode;
switch(key){
case 37:                       // 向左移动
move("Left");
break;
case 39:                       // 向右移动
move("Right");
break;
case 38:                       // 向上移动
move("Up");
break;
case 40:                       // 向下移动
move("Down");
break;
}
return false;
}

function init(){               // 页面加载的函数
readMap();                     // 读取地图信息
CreateMap();                   // 创建地图
pbox.style.pixelLeft=49;       // 初始化推箱人的位置
pbox.style.pixelTop=49;
pboxX=1;
pboxY=1;
}
document.οnkeydοwn=fnKeydown;  // 鼠标按下触发函数
//-->
</script>

<STYLE TYPE="text/css">
.map0{position:absolute;border:1px solid #999999;width:20;height:20;background-color:#333333}
.map1{position:absolute;border:2px outset #FFFFFF;width:20;height:20;background-color:#999999}
.map2{position:absolute;border:1px solid #999999;width:20;height:20;background-color:#3333FF}
.map3{position:absolute;border:0px solid #999999;width:20;height:20;background-color:#006600}
.box{position:absolute;border:1px outset #ffffff;width:20;height:20;background-color:#0000cc}
}
</STYLE>

<body bgColor=#333333 οnlοad="init()">
<div id=gameArea></div>
<div id="pbox" style="position:absolute"><img src="boy.gif" height=14 width=20></div>
</body>
tianpeiwen
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JS推箱子项目总结——地图创建与铺设简述（二）
weixin_50759039的博客
01-15 317
JS推箱子项目总结——地图创建与铺设简述（二）前言二维数组使用移动获胜最终代码展示 前言 上一篇我们讲解了地图的简单创建，虽然最后我加上了二维数组的一个代码展示，但讲的还是不是很详细。所以就有写了一篇专门讲一下。 在上一篇我们其实对地图的原理有了一定的了解，就是使用循环，不断创建小方块，填充进大地图里。二维数组创建是对地图的进一步优化。 在这一篇了，我会讲解一下，使用二维数组创建箱子与终点 首先，我把上一篇的div使用函数创建模板的代码放在这。 function createEle(oCss){ //把
推箱子、推箱子代码
11-06
今天就来分享一款非常经典的HTML5小游戏，一款考验你智力的推箱子游戏，这个游戏很常见，你应该是玩过的，这次我们用HTML5来重写了这款推箱子游戏，游戏设置和很多关卡，越到后面难度越高。
JavaScript编程技术实验报告8
weixin_44788220的博客
06-27 1053
1. 事件流模型 2. 事件处理程序 3. 事件对象 4. 事件类型（焦点，鼠标和滚轮，键盘和文本事件）
Javascript实现推箱子
qq_45741976的博客
10-15 482
标题 推箱子 设置箱子的大小，位置。 <img src="1.jpg" style="height: 100px;width: 100px; position: absolute;left: 0px; top: 0px;" id="img" /> 2.定义方法：function move() { console.log(event.keyCode); if(event.keyCode...
JS实现推箱子小游戏——源码
07-10
JS实现推箱子小游戏——源码 第一步布局 1.设置盒子元素 <body> <!-- 功能键 --> <div id="btn"> <input type="button" id="auto" value="自动行走"> <input type="button" id="prev" value="上一步"> <input type="button" id="nextLever" value="下一关"> <input type="button" id="lastLever" value="上一关"> </div> <!-- 游戏区域 --> <div id="warp"></div> </body> 2.给盒子设置相关的样式 <style> * { margin: 0; padding: 0; } ​ #warp { margin: 0px auto; background: url(img/block.jpg); position: relativ
推箱子游戏代码.zip
07-19
模拟推箱子第一关游戏代码
c#推箱子代码.zip
01-03
空闲时间使用c#编写的推箱子小游戏，注释比较完整，功能完整，不过只写了两个关卡，可以自己增加关卡地图
用C++实现推箱子
12-16
本文实例为大家分享了C++实现推箱子游戏的具体代码，供大家参考，具体内容如下 // 1.cpp : 此文件包含 "main" 函数。程序执行将在此处开始并结束。 // #include #include <stdio>//■ #include #include using ...
用html和js实现推箱子
12-23
js实现推箱子
js推箱子游戏
05-07
js初学者练习向，附带流程结构，及初期各个版本
一个用原生js编写的智能推箱子
08-10
一个用原生js编写的智能推箱子
推箱子js源码
05-20
里面是推箱子的javascript的程序，和推箱子流程结构
html5结合javaScript开发推箱子游戏
06-05
详细的开发到1-100关的推箱子游戏，画面精美，运行流畅，与经典的推箱子游戏关卡类似。
js 实现推箱子
Tao001100的博客
10-16 1033
js 实现推箱子 效果图 2.代码如下 1.地图函数： var box=$(‘.box div’); //地图使用的div集合 function create(){ //创建地图函数 box.each(function(index){ //index的数量是固定的，是box div下面div的数量 // 每次创建地图初始化div box.eq(index).remo...
js实现的推箱子小游戏（转）
zhanghaibing0903的专栏
10-21 849
function $id(id){return document.getElementById(id)}; function $name(name){return document.getElementsByName(name)}; //定义地图开始 var box =[] var map1 = [ [0,0,0,1,1,1,0,0,0,0], [0,0,0,1,4,1,0,0,0,0
用HTML5+原生js实现的推箱子游戏
weixin_30640291的博客
03-20 667
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用HTML5+原生js实现的推箱子游戏</title> <link rel="stylesheet" href="css/style...
2022最实用的HTML+JS实现推箱子游戏实例
村头老杨头的博客
08-06 2305
HTML+JS+CSS制作推箱子小游戏，最新实用，简单方便，易理解。
python设计推箱子代码
最新发布
06-25
而Python语言正是一种非常适合用来编写推箱子代码的工具。 在编写推箱子代码时，我们首先需要定义地图，地图可以使用一个二维数组来表示。在这个地图上，我们需要定义一些特殊的符号，比如墙、箱子、目的地等等。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值