先看一下最后做出来的页面
下面简单介绍一下我写的代码
先定义背景和箱子
<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