JS网页推箱子

最新推荐文章于 2023-10-26 00:09:59 发布
原创 最新推荐文章于 2023-10-26 00:09:59 发布 · 911 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #JS网页推箱子 #调试 #firefox #firebug

博主分享了通过Firefox和Firebug调试JavaScript实现的网页推箱子游戏的历程，详细介绍了在遇到问题和解决过程中的学习体验，并表示游戏还有待进一步优化和更新。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 这一周完成了这个推箱子游戏，中间出现了很多问题，有时也总运行不出结果，这过程中我学会了使用Firefox+Firebug来进行调试，虽然这过程是先看懂别人的代码再去实现，但感觉收获也很大。这个推箱子还有很多很多需要加强的地方，未来还会不断改进它。

-------------------------------------------------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------------------------------------------

<html>
<head>

<title>JS网页推箱子</title>
<script type="text/javascript">
var win=0;
var positionx=1;
var positiony=1;
var x=30;
 var y=30;
 var mapdate=new Array(15);
 var mapdate1=new Array(
"11111111111111111111",
"10000000100000000001",
"10010000100001100001",
"10010020100000000001",
"10010000000000000301",
"10010111110000003001",
"10000001000000000301",
"10000001000000000001",
"10000001000000000001",
"10000001000001111001",
"10000000000000000001",
"10000000011110001001",
"10020200000000001001", 
"10000000000000001001",
"11111111111111111111")

function  makemap()
{for(var i=0;i<15;i++)
	{mapdate[i]=new Array(20);
	 for(var j=0;j<20;j++)
		{mapdate[i][j]=mapdate1[i].substr(j,1);
		 var ae=document.createElement("div");
		 ae.id="box"+i+"_"+j;
		 ae.className="map"+mapdate[i][j];
		 
		 ae.style.pixelLeft=x;
		 ae.style.pixelTop=y;
		 gamearea.appendChild(ae);
		 x=x+20; 
		}
	 y=y+20;
	 x=30;
	}
 person.style.pixelLeft=50;
person.style.pixelTop=50;
}

function ifkeydown()
{
var key=event.keyCode;
if(key==37)
	{left();}
if(key==39)
	{right();}
if(key==38)
	{up();}
if(key==40)
	{down();}

}

function left()
{
if(mapdate[positiony][positionx-1]=="1")
	{return;}
if(mapdate[positiony][positionx-1]=="0")
	{person.style.pixelLeft-=20;
	positionx--;}
if(mapdate[positiony][positionx-1]=="2")
	{if(mapdate[positiony][positionx-2]=="1")
		{return;}
	 if(mapdate[positiony][positionx-2]=="0")
	 	{eval("box"+positiony+"_"+(positionx-1)).style.backgroundColor="#000000";
		eval("box"+positiony+"_"+(positionx-2)).style.backgroundColor=" #00FF00";
		mapdate[positiony][positionx-1]="0";
		mapdate[positiony][positionx-2]="2";
		person.style.pixelLeft-=20;
	    positionx--;
		}
	  if(mapdate[positiony][positionx-2]=="3")
	  {eval("box"+positiony+"_"+(positionx-1)).style.backgroundColor="#000000";
		eval("box"+positiony+"_"+(positionx-2)).style.backgroundColor=" #00FF00";
		mapdate[positiony][positionx-1]="0";
		mapdate[positiony][positionx-2]="1";
		person.style.pixelLeft-=20;
	    positionx--;
		win=win+1;
		if(win==3)
			{alert("you,win!");}
		}
	}
if(mapdate[positiony][positionx-1]=="3")
	{return;}
}
function right()
{
if(mapdate[positiony][positionx+1]=="1")
	{return;}
if(mapdate[positiony][positionx+1]=="0")
	{person.style.pixelLeft+=20;
	positionx++;}
if(mapdate[positiony][positionx+1]=="2")
	{if(mapdate[positiony][positionx+2]=="1")
		{return;}
	 if(mapdate[positiony][positionx+2]=="0")
	 	{eval("box"+positiony+"_"+(positionx+1)).style.backgroundColor="#000000";
		eval("box"+positiony+"_"+(positionx+2)).style.backgroundColor=" #00FF00";
		mapdate[positiony][positionx+1]="0";
		mapdate[positiony][positionx+2]="2";
		person.style.pixelLeft+=20;
	    positionx++;
		}
	  if(mapdate[positiony][positionx+2]=="3")
	  {eval("box"+positiony+"_"+(positionx+1)).style.backgroundColor="#000000";
		eval("box"+positiony+"_"+(positionx+2)).style.backgroundColor=" #00FF00";
		mapdate[positiony][positionx+1]="0";
		mapdate[positiony][positionx+2]="1";
		person.style.pixelLeft+=20;
	    positionx++;
		win=win+1;
		if(win==3)
			{alert("you,win!");}
		}
	  }
if(mapdate[positiony][positionx+1]=="3")
	{return;}
}
function up()
{
if(mapdate[positiony-1][positionx]=="1")
	{return;}
if(mapdate[positiony-1][positionx]=="0")
	{person.style.pixelTop-=20;
	positiony--;}
if(mapdate[positiony-1][positionx]=="2")
	{if(mapdate[positiony-2][positionx]=="1")
		{return;}
	 if(mapdate[positiony-2][positionx]=="0")
	 	{eval("box"+(positiony-1)+"_"+positionx).style.backgroundColor="#000000";
		eval("box"+(positiony-2)+"_"+positionx).style.backgroundColor=" #00FF00";
		mapdate[positiony-1][positionx]="0";
		mapdate[positiony-2][positionx]="2";
		person.style.pixelTop-=20;
	    positiony--;
		}
	  if(mapdate[positiony-2][positionx]=="3")
	 	{eval("box"+(positiony-1)+"_"+positionx).style.backgroundColor="#000000";
		eval("box"+(positiony-2)+"_"+positionx).style.backgroundColor=" #00FF00";
		mapdate[positiony-1][positionx]="0";
		mapdate[positiony-2][positionx]="1";
		person.style.pixelTop-=20;
	    positiony--;
		win=win+1;
		if(win==3)
			{alert("you,win!");}
		}
		
	}
if(mapdate[positiony-1][positionx]=="3")
	{return;}
}
function down()
{
if(mapdate[positiony+1][positionx]=="1")
	{return;}
if(mapdate[positiony+1][positionx]=="0")
	{person.style.pixelTop+=20;
	positiony++;}
if(mapdate[positiony+1][positionx]=="2")
	{if(mapdate[positiony+2][positionx]=="1")
		{return;}
	 if(mapdate[positiony+2][positionx]=="0")
	 	{eval("box"+(positiony+1)+"_"+positionx).style.backgroundColor="#000000";
		eval("box"+(positiony+2)+"_"+positionx).style.backgroundColor=" #00FF00";
		mapdate[positiony+1][positionx]="0";
		mapdate[positiony+2][positionx]="2";
		person.style.pixelTop+=20;
	    positiony++;
		}
	  if(mapdate[positiony+2][positionx]=="3")
	 	{eval("box"+(positiony+1)+"_"+positionx).style.backgroundColor="#000000";
		eval("box"+(positiony+2)+"_"+positionx).style.backgroundColor=" #00FF00";
		mapdate[positiony+1][positionx]="0";
		mapdate[positiony+2][positionx]="1";
		person.style.pixelTop+=20;
	    positiony++;
		win=win+1;
		if(win==3)
			{alert("you,win!");}
		}
	}
if(mapdate[positiony+1][positionx]=="3")
	{return;}
}


document.onkeydown=ifkeydown;
</script>


<style type="text/css" >
.man {position:absolute; width:20px; height:20px; background-color:#FF0000;  BORDER-BOTTOM: #ffffff 2px outset; 
        BORDER-LEFT: #ffffff 2px outset; 
        BORDER-RIGHT: #ffffff 2px outset; 
        BORDER-TOP: #ffffff 2px outset; }
.map0 { background-color:#000000; position:absolute; width:20px; height:20px;  BORDER-BOTTOM: #ffffff 2px outset; 
        BORDER-LEFT: #ffffff 2px outset; 
        BORDER-RIGHT: #ffffff 2px outset; 
        BORDER-TOP: #ffffff 2px outset; }
.map2 { background-color: #00FF00; position:absolute; width:20px; height:20px;  BORDER-BOTTOM: #ffffff 2px outset; 
        BORDER-LEFT: #ffffff 2px outset; 
        BORDER-RIGHT: #ffffff 2px outset; 
        BORDER-TOP: #ffffff 2px outset; }
.map3 { background-color: #0000FF; position:absolute; width:20px; height:20px;  BORDER-BOTTOM: #ffffff 2px outset; 
        BORDER-LEFT: #ffffff 2px outset; 
        BORDER-RIGHT: #ffffff 2px outset; 
        BORDER-TOP: #ffffff 2px outset; }
.map1 { background-color: #999999; position:absolute; width:20px; height:20px;  BORDER-BOTTOM: #ffffff 2px outset; 
        BORDER-LEFT: #ffffff 2px outset; 
        BORDER-RIGHT: #ffffff 2px outset; 
        BORDER-TOP: #ffffff 2px outset; }
</style>
</head>

<body style="left:400px; position:absolute;" bgcolor="#999999" onload="makemap()">
<div id="gamearea"></div>
<div id="person" class="man"></div>
</body>
</html>


nceuaprsf
关注
【HTML小游戏】推箱子网页版(附完整源码)
zhangxia_的博客
11-09 1万+
经典的推箱子是一个非常古老游戏，甚至是80，90年代的回忆，目的是在训练你的逻辑思考能力。在一个狭小的仓库中，要求把木箱放到指定的位置，稍不小心就会出现箱子无法移动或者通道被堵住的情况，所以需要巧妙的利用有限的空间和通道，合理安排移动的次序和位置，才能顺利的完成任务。在移动箱子的过程中，是对你的思维能力的一个训练，今天这款推箱子正是童年的回忆，但是我们的目的是为了通过学习源码的形式，来学习前端开发的知识，熟练掌握HtML标签，CSS属性和JS逻辑的知识。
推箱子小游戏（网页版）
04-21
基于js和html的推箱子游戏，相信大家可以从中学到许多。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
纯网页版推箱子入门
02-18
这个文件不需要安装别的运行环境，在Google浏览器上即可运行，对网络小游戏有兴趣又处入程序员这个坑的小伙伴有一些帮助，大神们就不需要观看了
HTML用Vue制作简易推箱子（带墙壁）网页
weixin_51960885的博客
05-24 580
4.编写script代码，用vue实现推箱子网页效果。1.首先创建项目并为项目添加vue组件。3.为主体代码设置样式,设置图片背景。
HTML5网页版推箱子小游戏.zip
05-24
HTML5网页版推箱子小游戏，键盘方向键控制移动，Q键撤退，最多可撤退20部。
Web上的推箱子游戏Sokoban
wbsu2004的博客
09-30 3516
Sokoban 是款具有无限撤消和近 500 个推箱子谜题的推箱子游戏。
javascript实现推箱子网页小游戏（非常值得学习）源码.rar
01-27
本项目"javascript实现推箱子网页小游戏（非常值得学习）源码"提供了一个完整的推箱子游戏的实现，是学习JavaScript编程和游戏开发的宝贵资源。 首先，我们要了解JavaScript的基础。JavaScript是一种解释型、面向...
js推箱子网页小游戏源代码.zip
07-04
推箱子游戏，作为一款经典的逻辑益智游戏，其在网页上的实现主要依赖于JavaScript（JS）编程语言。JS是Web开发中的重要脚本语言，它主要用于处理网页的动态内容和交互性。在这个“js推箱子网页小游戏源代码.zip”...
js推箱子网页小游戏特效代码
03-20
在这个"js推箱子网页小游戏特效代码"中，我们可以通过分析源代码来学习如何使用JavaScript实现游戏逻辑。 首先，游戏的基本框架是HTML5和CSS3，它们提供了网页的结构和样式。HTML5的`<canvas>`标签常用于绘制游戏...
javascript --推箱子
an13724628351的博客
11-10 203
<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>推箱子</title> <meta name="keywords" content="关键字列表" /> <met...
javascript版的推箱子游戏
04-16
js,javascript,推箱子,js版推箱子可以自定义关卡，系统能记忆关卡步骤自动运行！
JavaScript编写推箱子游戏
12-10
推箱子游戏是老游戏了， 网上有各种各样的版本， 说下推箱子游戏的简单实现，以及我找到的一些参考视频和实例； 　　如下是效果图： 　　这个拖箱子游戏做了移动端的适配， 我使用了zepto的touch模块， 通过手指滑动屏幕就可以控制乌龟走不同的方向； 　　因为推箱子这个游戏比较简单， 直接用了过程式的方式写代码， 模块也就是两个View 和 Model， 剩下就是用户的事件Controller， 用户每一次按下键盘的方向键都会改变数据模型的数据，然后重新生成游戏的静态html， 然后用innerHTML方式插入到界面， 自动生成DOM节点； 　　游戏的关卡模型就是数据， 我把每一关的数据分为三
JavaScript开发的推箱子游戏
01-18
JavaScript开发的推箱子游戏。打开index.htm即可本地测试
js推箱子游戏
05-07
js初学者练习向，附带流程结构，及初期各个版本
经典网页版HTML5推箱子小游戏代码
06-11
这是一款经典网页版HTML5 Canvas推箱子小游戏代码，游戏设置了很多关卡，越到后面难度越高。
JS推箱子小游戏
电脑高级开关机工程师的博客
06-13 1379
JavaScript推箱子小游戏
JavaScript实现推箱子游戏(附完整源码)
最新发布
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-26 444
JavaScript实现推箱子游戏(附完整源码)
JS实现推箱子游戏
2201_75321887的博客
04-24 1051
使用JS制作推箱子游戏主要是使用了键盘的监听事件（onkeyup，onkeydown，onkeypress），它们的不同点在于：onkeyup是按键按下去然后抬起的时候触发事件；onkeydown是按键按下去时就触发事件；onkeypress是按键按下去且产生了字符时触发事件，这里我们主要使用onkeyup。
JavaScript推箱子项目
weixin_45547854的博客
10-30 666
JS小项目----推箱子 面向对象思想来编写Java Script 推箱子 需要源码联系企鹅1825010650，后续继续更新小项目源码 创建地图类Map.js var _Map = function() { this.mapGrid = [ // 创建地图 8*8 0代表的是墙 [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, ...
用JavaScript开发推箱子网页小游戏教程
综上所述，文件中提到的“javascript实现推箱子网页小游戏（非常值得学习）源码”不仅是一个具体的游戏项目，也是学习JavaScript编程和网页小游戏开发的宝贵资源。通过学习这个项目，编程学习者能够提升自己的实践...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值