首页 > 代码库 > js运动框架之掉落的扑克牌（重心、弹起效果）

js运动框架之掉落的扑克牌（重心、弹起效果）

2024-08-30 01:34:18   219人阅读

      玩过电脑自带纸牌游戏的同志们应该都知道，游戏过关后扑克牌会依次从上空掉落，落下后又弹起，直至“滚出”屏幕。

　　效果如图：　　　　　　   技术分享

　　这个案例的具体效果就是：点击开始运动，纸牌会从右上角掉落下来，之后弹起，运动的速度会逐渐减慢，直到越出屏幕后，全部纸牌消失，在右上角会重新出现一张纸牌，继续动作，一再往复。

　　具体代码如下：

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>掉落</title>
  6     <style>
  7         body{
  8             overflow: hidden;
  9             background: greenyellow;
 10         }
 11         div{
 12             width: 71px;
 13             height: 95px;
 14             position: absolute;
 15             top: 10px;
 16         }
 17     </style>
 18 </head>
 19 <body>
 20     <input id="btn" type="button" value="http://www.mamicode.com/开始运动">
 21     <div id="box" class="box">
 22         <img src="http://www.mamicode.com/images/A.jpg" width="71" height="95">
 23     </div>
 24 </body>
 25 </html>
 26 <script>
 27     //点击按钮，扑克片重复下落
 28     window.onload = function(){
 29         var oBtn = document.getElementById("btn");
 30         var oBox = document.getElementById("box");
 31 
 32         //初始扑克牌位置，在可视区的右上角
 33         oBox.style.top = 10 + "px";
 34         oBox.style.left=document.documentElement.clientWidth - oBox.offsetWidth + "px";
 35 
 36         //随机数
 37         function rnd(m,n){
 38             return parseInt(Math.random()*(m-n)+n);
 39         }
 40 
 41         //下落碰撞的运动框架
 42         function addMove(){
 43             //初始扑克牌位置，仍在可视区的右上角
 44             oBox.style.left=document.documentElement.clientWidth - oBox.offsetWidth + "px";
 45             oBox.style.top = 10 + "px";
 46 
 47             //初始左右移动的初始速度
 48             var iSpeedX = -rnd(6,20);
 49             var iSpeedY = rnd(6,20);
 50             var timer = null;
 51 
 52             clearInterval(timer);
 53             timer = setInterval(function(){
 54                 iSpeedY += 3; //速度逐渐加快
 55                 var l = oBox.offsetLeft + iSpeedX;
 56                 var t = oBox.offsetTop + iSpeedY;
 57 
 58                 //当扑克牌碰撞到可视区上部或底部时，速度要发生相应的变化
 59                 if(t>=document.documentElement.clientHeight - oBox.offsetHeight){ //当扑克牌碰撞底部一次
 60                     iSpeedY *= -0.8;  //速度降为原来的80%，并且变向
 61                     t=document.documentElement.clientHeight - oBox.offsetHeight
 62                 }else if(t<=0){ //当扑克牌碰撞顶部一次
 63                     iSpeedY *= -1; //速度变向
 64                     t=0;
 65                 }
 66 
 67                 //当速度的绝对值小于1时，直接为0
 68                 if(Math.abs(iSpeedY)<1){
 69                     iSpeedY = 0;
 70                 }
 71 
 72                 //赋值扑克牌的新位置
 73                 oBox.style.left = l + "px";
 74                 oBox.style.top = t + "px";
 75 
 76                 //随时克隆扑克牌，在扑克牌移动的过程中留下克隆出来的信息
 77                 var oNewBox = oBox.cloneNode(true);
 78                 oNewBox.setAttribute("index","new"); //通过setAttribute区分克隆出来的元素和最初的元素，为了接下来的删除做准备
 79                 oNewBox.style.background = "green";
 80                 oNewBox.style.left = l + "px";
 81                 oNewBox.style.top = t + "px";
 82                 document.body.insertBefore(oNewBox,oBox); //新科隆的扑克牌插在之前，否则会盖住原来的移动
 83 
 84                 //当扑克牌移动出可视区的时候，运动停止
 85                 if(oBox.offsetLeft < -oBox.offsetWidth){
 86                     iSpeedX = 0;
 87                     clearInterval(timer);
 88 
 89                     //将克隆出来的元素全部删除，只保留最初的扑克牌
 90                     var aBox = document.getElementsByTagName("div");
 91                     for(var i=0;i<aBox.length;i++){
 92                         if(aBox[i].getAttribute("index") == "new"){  //删除index=new的元素，即克隆出来的扑克牌，保留最初的扑克牌
 93                             document.body.removeChild(aBox[i]);
 94                             i--; //元素删除后会影响i值，所以需要i--
 95                         }
 96                     }
 97                     addMove();
 98                 }
 99             },30)
100         }
101 
102         oBtn.onclick = function(){
103             addMove();
104         }
105     }
106 </script>

 

js运动框架之掉落的扑克牌（重心、弹起效果）


联系
我们