2. 科技
    3. html简单推箱子（3个箱子）

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

    科技2022-07-10  169

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

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

    先定义背景和箱子

    <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

    Processed: 0.009, SQL: 8