html简单推箱子（3个箱子）

最新推荐文章于 2023-05-26 14:56:44 发布
最新推荐文章于 2023-05-26 14:56:44 发布
阅读量1.7k 收藏 3
点赞数
文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/corruptwww/article/details/108909606
版权

先看一下最后做出来的页面

在这里插入图片描述

下面简单介绍一下我写的代码

先定义背景和箱子


<div style="opacity:0.6;position:absolute;width:1680px;height:840px;
	background-image: url(1a.jpg);
    	background-repeat: no-repeat;
    	background-size: 100% 100%;
    	-moz-background-size: 100% 100%;">  </div>
    	
<div id="xzH" style="opacity:1;position:absolute;left:400px;top:200px;width:100px;height:100px;
     background-image: url(hot1.jpg);"></div>
<div id="xzB" style="opacity:1;position:absolute;left:700px;top:500px;width:100px;height:100px;
     background-image: url(blue.jpg);"></div>
<div id="xzY" style="opacity:1;position:absolute;left:200px;top:200px;width:100px;height:100px;
     background-image: url(yellow1.jpg);"></div>
<div  style="position:absolute;left:1480px;top:630px;width:200px;height:200px;">
     <img id="up"  src="shang1.png" style="position:relative;left:70px;top:0px;width:60px;height:66px;"></img>
     <img id="left"  src="zuo1.png" style="position:relative;left:-54px;top:66px;width:60px;height:66px;"></img>
     <img id="right"  src="you1.png" style="position:relative;left:0px;top:66px;width:60px;height:66px;"></img>
     <img id="down"  src="xia1.png" style="position:relative;left:70px;top:58px;width:60px;height:66px;"></img>
</div>

插入自己喜欢的音乐

<audio controls>
  <source src="China-E.flac" type="audio/ogg">
</audio>

写script代码

<script type="text/javascript"> ”在这里写代码”</script>

这里我使用的是鼠标（手指）控制箱子移动，使用的是window.onload函数
先定义参数

        var DivY=document.getElementById('xzY');
        var Diva=document.getElementById('xzH');
        var DivB=document.getElementById('xzB');
        var imgup1=document.getElementById('up');
        var imgleft1=document.getElementById('left');
        var imgright1=document.getElementById('right');
        var imgdown1=document.getElementById('down');
        var sp=25;
        var big=100;

然后先随便选一个方向，利用碰撞检测原理写出函数

       imgup1.οnmοusedοwn=function(ev){	   
                   if(!(((DivY.offsetTop-DivB.offsetTop)<big)
	    && (Math.abs(DivY.offsetLeft-DivB.offsetLeft)<big)
	    && (DivY.offsetTop>DivB.offsetTop))){
	   	DivY.style.top=DivY.offsetTop-sp;
	<!--blue-yellow boom  -->
                  	 if(((DivY.offsetTop-DivB.offsetTop)<(big-10))
	    	&& (Math.abs(DivY.offsetLeft-DivB.offsetLeft)<big)
	   	 && (DivY.offsetTop>DivB.offsetTop)){
	   	DivY.style.top=DivY.offsetTop+sp;
	   	}   
	<!--hot-yellow  -->
                  	 if(((DivY.offsetTop-Diva.offsetTop)<big)
	    	&& (Math.abs(DivY.offsetLeft-Diva.offsetLeft)<big)
	   	 && (DivY.offsetTop>Diva.offsetTop)){
               <!--hot-blue boom  -->
	   		if(!(((Diva.offsetTop-DivB.offsetTop)<big)
	   		 && (Math.abs(DivB.offsetLeft-Diva.offsetLeft)<big)
	    		&& (Diva.offsetTop>DivB.offsetTop)))
			{
	   			Diva.style.top=Diva.offsetTop-sp;
			                   if(((Diva.offsetTop-DivB.offsetTop)<(big-10))
				    && (Math.abs(DivB.offsetLeft-Diva.offsetLeft)<big)
				    && (Diva.offsetTop>DivB.offsetTop))
				{
                     			   Diva.style.top=Diva.offsetTop+sp; 
                     			   DivY.style.top=DivY.offsetTop+sp; 
				}
			}
	   	}  
	 }

其他三个方向同理， 完整代码我放这了。

<script type="text/javascript">

window.onload=function(){
        var DivY=document.getElementById('xzY');
        var Diva=document.getElementById('xzH');
        var DivB=document.getElementById('xzB');
        var imgup1=document.getElementById('up');
        var imgleft1=document.getElementById('left');
        var imgright1=document.getElementById('right');
        var imgdown1=document.getElementById('down');
        var sp=25;
        var big=100;
        imgup1.onmousedown=function(ev){	   
                   if(!(((DivY.offsetTop-DivB.offsetTop)<big)
	    && (Math.abs(DivY.offsetLeft-DivB.offsetLeft)<big)
	    && (DivY.offsetTop>DivB.offsetTop))){
	   	DivY.style.top=DivY.offsetTop-sp;
	<!--blue-yellow boom  -->
                  	 if(((DivY.offsetTop-DivB.offsetTop)<(big-10))
	    	&& (Math.abs(DivY.offsetLeft-DivB.offsetLeft)<big)
	   	 && (DivY.offsetTop>DivB.offsetTop)){
	   	DivY.style.top=DivY.offsetTop+sp;
	   	}   
	<!--hot-yellow  -->
                  	 if(((DivY.offsetTop-Diva.offsetTop)<big)
	    	&& (Math.abs(DivY.offsetLeft-Diva.offsetLeft)<big)
	   	 && (DivY.offsetTop>Diva.offsetTop)){
               <!--hot-blue boom  -->
	   		if(!(((Diva.offsetTop-DivB.offsetTop)<big)
	   		 && (Math.abs(DivB.offsetLeft-Diva.offsetLeft)<big)
	    		&& (Diva.offsetTop>DivB.offsetTop)))
			{
	   			Diva.style.top=Diva.offsetTop-sp;
			                   if(((Diva.offsetTop-DivB.offsetTop)<(big-10))
				    && (Math.abs(DivB.offsetLeft-Diva.offsetLeft)<big)
				    && (Diva.offsetTop>DivB.offsetTop))
				{
                     			   Diva.style.top=Diva.offsetTop+sp; 
                     			   DivY.style.top=DivY.offsetTop+sp; 
				}
			}
	   	}  
	   }                        
         }
        imgleft1.onmousedown=function(ev){	   
                   if(!(((DivY.offsetLeft-DivB.offsetLeft)<big)
	    && (Math.abs(DivY.offsetTop-DivB.offsetTop)<big)
	    && (DivY.offsetLeft>DivB.offsetLeft))){
	   	DivY.style.left=DivY.offsetLeft-sp;
	<!--blue-yellow boom  -->
                  	 if(((DivY.offsetLeft-DivB.offsetLeft)<(big-10))
	    	&& (Math.abs(DivY.offsetTop-DivB.offsetTop)<big)
	   	 && (DivY.offsetLeft>DivB.offsetLeft)){
	   	DivY.style.left=DivY.offsetLeft+sp;
	   	}   
	<!--hot-yellow  -->
                  	 if(((DivY.offsetLeft-Diva.offsetLeft)<big)
	    	&& (Math.abs(DivY.offsetTop-Diva.offsetTop)<big)
	   	 && (DivY.offsetLeft>Diva.offsetLeft)){
               <!--hot-blue boom  -->
	   		if(!(((Diva.offsetLeft-DivB.offsetLeft)<big)
	   		 && (Math.abs(DivB.offsetTop-Diva.offsetTop)<big)
	    		&& (Diva.offsetLeft>DivB.offsetLeft)))
			{
	   			Diva.style.left=Diva.offsetLeft-sp;
			                   if(((Diva.offsetLeft-DivB.offsetLeft)<(big-10))
				    && (Math.abs(DivB.offsetTop-Diva.offsetTop)<big)
				    && (Diva.offsetLeft>DivB.offsetLeft))
				{
                     			   Diva.style.left=Diva.offsetLeft+sp; 
                     			   DivY.style.left=DivY.offsetLeft+sp; 
				}
			}
	   	}  
	   }   
         }
        imgright1.onmousedown=function(ev){

                   if(!(((DivB.offsetLeft-DivY.offsetLeft)<big)
	    && (Math.abs(DivB.offsetTop-DivY.offsetTop)<big)
	    && (DivB.offsetLeft>DivY.offsetLeft))){
	   	DivY.style.left=DivY.offsetLeft+sp;
	<!--blue-yellow boom  -->
                  	 if(((DivB.offsetLeft-DivY.offsetLeft)<(big-10))
	    	&& (Math.abs(DivB.offsetTop-DivY.offsetTop)<big)
	   	 && (DivB.offsetLeft>DivY.offsetLeft)){
	   	DivY.style.left=DivY.offsetLeft-sp;
	   	}   
	<!--hot-yellow  -->
                  	 if(((Diva.offsetLeft-DivY.offsetLeft)<big)
	    	&& (Math.abs(Diva.offsetTop-DivY.offsetTop)<big)
	   	 && (Diva.offsetLeft>DivY.offsetLeft)){
               <!--hot-blue boom  -->
	   		if(!(((DivB.offsetLeft-Diva.offsetLeft)<big)
	   		 && (Math.abs(DivB.offsetTop-Diva.offsetTop)<big)
	    		&& (DivB.offsetLeft>Diva.offsetLeft)))
			{
	   			Diva.style.left=Diva.offsetLeft+sp;
			                   if(((DivB.offsetLeft-Diva.offsetLeft)<(big-10))
				    && (Math.abs(DivB.offsetTop-Diva.offsetTop)<big)
				    && (DivB.offsetLeft>Diva.offsetLeft))
				{
                     			   Diva.style.left=Diva.offsetLeft-sp; 
                     			   DivY.style.left=DivY.offsetLeft-sp; 
				}
			}
	   	}  
	   }   

         }
        imgdown1.onmousedown=function(ev){	   
                   if(!(((DivB.offsetTop-DivY.offsetTop)<big)
	    && (Math.abs(DivY.offsetLeft-DivB.offsetLeft)<big)
	    && (DivB.offsetTop>DivY.offsetTop))){
	   	DivY.style.top=DivY.offsetTop+sp;
	<!--blue-yellow boom  -->
                  	 if(((DivB.offsetTop-DivY.offsetTop)<(big-10))
	    	&& (Math.abs(DivY.offsetLeft-DivB.offsetLeft)<big)
	   	 && (DivB.offsetTop>DivY.offsetTop)){
	   	DivY.style.top=DivY.offsetTop-sp;
	   	}   
	<!--hot-yellow  -->
                  	 if(((Diva.offsetTop-DivY.offsetTop)<big)
	    	&& (Math.abs(DivY.offsetLeft-Diva.offsetLeft)<big)
	   	 && (Diva.offsetTop>DivY.offsetTop)){
               <!--hot-blue boom  -->
	   		if(!(((DivB.offsetTop-Diva.offsetTop)<big)
	   		 && (Math.abs(DivB.offsetLeft-Diva.offsetLeft)<big)
	    		&& (DivB.offsetTop>Diva.offsetTop)))
			{
	   			Diva.style.top=Diva.offsetTop+sp;
			                   if(((DivB.offsetTop-Diva.offsetTop)<(big-10))
				    && (Math.abs(DivB.offsetLeft-Diva.offsetLeft)<big)
				    && (DivB.offsetTop>Diva.offsetTop))
				{
                     			   Diva.style.top=Diva.offsetTop-sp; 
                     			   DivY.style.top=DivY.offsetTop-sp; 
				}
			}
	   	}  
	   }                        
         }
 
}
</script>

<div style="opacity:0.6;position:absolute;width:1680px;height:840px;
	background-image: url(1a.jpg);
    	background-repeat: no-repeat;
    	background-size: 100% 100%;
    	-moz-background-size: 100% 100%;">  </div>
    	
<div id="xzH" style="opacity:1;position:absolute;left:400px;top:200px;width:100px;height:100px;
     background-image: url(hot1.jpg);"></div>
<div id="xzB" style="opacity:1;position:absolute;left:700px;top:500px;width:100px;height:100px;
     background-image: url(blue.jpg);"></div>
<div id="xzY" style="opacity:1;position:absolute;left:200px;top:200px;width:100px;height:100px;
     background-image: url(yellow1.jpg);"></div>
<div  style="position:absolute;left:1480px;top:630px;width:200px;height:200px;">
     <img id="up"  src="shang1.png" style="position:relative;left:70px;top:0px;width:60px;height:66px;"></img>
     <img id="left"  src="zuo1.png" style="position:relative;left:-54px;top:66px;width:60px;height:66px;"></img>
     <img id="right"  src="you1.png" style="position:relative;left:0px;top:66px;width:60px;height:66px;"></img>
     <img id="down"  src="xia1.png" style="position:relative;left:70px;top:58px;width:60px;height:66px;"></img>
</div>

<audio controls>
  <source src="China-E.flac" type="audio/ogg">
</audio>

写在最后：笔者最近才开始学的html，有好几次因为括号数量不对等导致整个程序运行不了。想提醒刚开始学html的各位，一定要注意括号对齐！！！
不过如果之前用过python的话，想必不用提醒都会注意的吧2333

秋叶原の黑猫
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用HTML5+原生js实现的推箱子游戏
weixin_30640291的博客
03-20 680
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用HTML5+原生js实现的推箱子游戏</title> <link rel="stylesheet" href="css/style...
HTML5 推箱子小游戏源码.zip
06-11
HTML5网页版推箱子小游戏，键盘方向键控制移动，Q键撤退，最多可撤退20部。
HTML5推箱子简单实现
07-19
HTML5 canvas实现简单的推箱子游戏，思路清晰，详细代码注释
html5推箱子源码
09-16
经典的html5推箱子源码,关卡虽然不太多,但可以添加.因为算法都写好了的再多也是一样的
html+js 实现 推箱子 贪吃蛇和简单的飞机大战
YangjulongTrue的博客
10-24 584
推箱子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #app{ } *{ margin: 0; padding: 0; } #app
html 推箱子.rar
07-20
推箱子游戏，作为一个经典的游戏模式，可以通过HTML结合JavaScript或CSS3实现一个纯网页版本。在这个“html 推箱子.rar”压缩包中，可能包含的是用HTML编写的推箱子游戏的源代码。 首先，我们来探讨HTML在构建推...
html推箱子ssss.zip
07-20
在这个"html推箱子ssss.zip"压缩包中，包含的是一个使用canvas元素构建的推箱子游戏。Canvas是HTML5引入的一个强大的图形绘制接口，允许开发者动态地在网页上绘制2D图形。 HTML是超文本标记语言，是网页制作的基础...
用html和js实现推箱子
12-23
但在这里，如果保持基本的HTML布局，我们可以简单地通过改变DOM元素的位置来实现推箱子的动画效果。 标签“推箱子”、“网页制作”、“js”和“html”表明了这个游戏是基于Web技术实现的，适合网页环境，无需额外...
推箱子、推箱子代码
11-06
在这个 HTML5 版本的推箱子游戏中，开发者利用了 HTML5 的 Canvas 元素进行图形绘制和交互，提供了丰富的视觉效果和流畅的游戏体验。 Canvas 是 HTML5 中的一个重要组成部分，它是一个可编程的图形区域，通过 ...
推箱子小游戏代码html,js+Jquery 制作推箱子小游戏(示例代码)
weixin_31028871的博客
06-04 826
Sokaban.roads{width:50px;height:50px;background:url(img/roods.png);background-size:100% 100%;}.people{width:50px;height:50px;background-size:100% 100%;}.box{background:url(img/box.png) !important;back...
HTML5实现的推箱子小游戏源代码
03-09
用HTML5实现的推箱子小游戏，含源代码。在firefox7和chrome11下测试通过。共100关。可用于学习HTML5或个人娱乐。
HTML5版推箱子游戏源码.rar
07-10
HTML5版推箱子游戏源码，这款游戏主要是基于HTML5中的Canvas来实现，界面做的同样很优秀，玩法和PC版的推箱子一样。属于过关游戏，可自动跳关，或重过关，游戏玩法：用键盘上的上、下、左、右键移动小人，把箱子全部推到小球的位置即可过关。箱子只可向前推，不能往后拉，并且小人一次只能推动一个箱子。
经典网页版HTML5推箱子小游戏代码
06-11
这是一款经典网页版HTML5 Canvas推箱子小游戏代码，游戏设置了很多关卡，越到后面难度越高。
推箱子小游戏（网页版）
04-21
基于js和html的推箱子游戏，相信大家可以从中学到许多。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
html推箱子.zip
07-29
html的推箱子游戏，是作为毕设的，所以有很多功能，包括很多地图，所有文件全在里面，声音，回撤，，等很多功能，，自己下载看
推箱子小游戏代码html,C++初学推箱子小游戏(代码有详细介绍,通俗易懂)
weixin_39759881的博客
05-30 381
#include#include// getch头文件#include //图形库头文件#include#pragma comment(lib,"winmm.lib")//多媒体库/*音乐播放 mciSendString MP3 wav 格式音乐 需要加这个头文件及库#include#pragma comment(lib,"winmm.lib")//多媒体库*//*鼠标操作MouseHit()...
HTML 推箱子小游戏制作
清风且从容，何需念君安。
05-26 637
【代码】HTML 推箱子小游戏制作。
HTML5推箱子小游戏 源码 共100关哦！
舜岳的博客
06-20 6913
推箱子 源码链接地址：https://github.com/shunyue1320/sokoban.git 推箱子小游戏展示效果图： 源码链接地址：https://github.com/shunyue1320/sokoban.git 进入后执行如下图步骤就能下载到自己电脑上啦！ 接下来了解一下我们用到的素材吧： 目标点 / 草坪 / 箱子 / 人物 / 障碍物 html样式就这么简单 通过...
[html5游戏开发]经典的推箱子
u013919449的专栏
11-04 2010
这一次先来看一个经典的推箱子游戏，相信大家也都知道这款游戏，推箱子游戏最早源于日本，是一款极其锻炼逻辑思考能力的游戏，箱子只能推不能拉，玩家必须在一个有限的空间里，将所有的箱子归位，如下图所示。 图1   这是我用最新版lufylegend.js引擎开发的，想挑战一下的朋友，可以点击下面的游戏链接试一下自己能通过几关。 http://lufylegend.com/demo/box 游戏一
使用htm制作一个简单的推箱子游戏
最新发布
07-08
下面是一个简单的推箱子游戏的 HTML 模板： ```html <!DOCTYPE html> <html> 推箱子游戏 /* 在这里设置游戏的样式 */ 推箱子游戏 <!-- 在这里放置游戏的方格和箱子 --> // 在这里编写 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值