如何用JavaScript写碰壁反弹效果?

碰壁反弹

碰壁反弹这个效果真的是挺有趣的,看起来就比较的高大上,而且写碰壁反弹成功后,也就能做些网页小游戏了。虽然这么说,但其实这个效果并不难写。只是坑比较的多,很多工作多年的程序员都可能会陷进去。
废话不多说,我们写起来:
1.CSS文件:

  <style>
      body{
        border-style: solid;
        border-color: sliver;
        border-width: 5px;
        margin-left: 100px;
        width:1000px;
        height:800px;
      }
      #screen{
        width:800px;
        height:600px;
        background-color:#272822;
        position:relative;
        left:100px;
        top:100px;
      }
      #egg{
        width:50px;
        height:50px;
        background-color:red;
        position:relative;
      }  
    </style>

2.body内容:

  <body>
  <div id="screen">    
        <div id="egg">
        </div>
  </div>
  </body>

3.JavaScript脚本:

var eggX=0;
    var eggY=0;
    var directX=1;
    var directY=1;
    function test(){
    eggX+=directX;
    eggY+=directY;
    egg.style.left=eggX+"px";
    egg.style.top=eggY+"px";
    if(eggX+egg.offsetWidth>=document.getElementById("screen").clientWidth||eggX<=0) {
        directX=-directX;
    }
    if(eggY+egg.offsetHeight>=document.getElementById("screen").clientHeight||eggY<=0){
        directY=-directY;
    }
}
setInterval("test()",1);

说明:拷贝代码,我们就能看到一个碰壁反弹的方框了。当然如果想要换成图片,直接将div里的内容换掉就OK了。不过这样似乎太美水准了点,在这附上完整代码(有障碍物的):

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>碰壁反弹</title>
    <style>
      body{
        border-style: solid;
        border-color: sliver;
        border-width: 5px;
        margin-left: 100px;
        width:1000px;
        height:800px;
      }
      #screen{
        width:800px;
        height:600px;
        background-color:#272822;
        position:relative;
        left:100px;
        top:100px;
      }
      #egg{
        width:50px;
        height:50px;
        background-color:red;
        position:relative;
      }
      #cock{
        position:relative;
        left:200px;
        top:200px;
        width:200px;
        height:30px;
        background-color: blue;
        cursor: pointer;
      }
    </style>  
  </head>
  <body>
  <div id="screen">    
        <div id="egg">
        </div>
        <div id="cock" onmousedown="startDrag(this)" onmousemove="drag(this)" onmouseup="stopDrag(this)">
        </div>
  </div>
  </body>
  <script type="text/javascript">
    var eggX=0;
    var eggY=0;
    var directX=1;
    var directY=1;
    function test(){
    eggX+=directX;
    eggY+=directY;
    egg.style.left=eggX+"px";
    egg.style.top=eggY+"px";
    if(eggX+egg.offsetWidth>=document.getElementById("screen").clientWidth||eggX<=0) {
        directX=-directX;
    }
    if(eggY+egg.offsetHeight>=document.getElementById("screen").clientHeight||eggY<=0){
        directY=-directY;
    }
    if(eggY+egg.offsetHeight>=document.getElementById("cock").offsetTop&&(eggX+egg.offsetWidth>=200&&eggX+egg.offsetWidth<=400)){
        directY=-directY;
    }
    if((eggY-30)>=document.getElementById("cock").offsetTop&&(eggX+egg.offsetWidth>=200&&eggX+egg.offsetWidth<=400)){
        directY=-directY;
    }
}
setInterval("test()",1);
  </script>
</html>

Happy hacking!

你可能感兴趣的:(如何用JavaScript写碰壁反弹效果?)