Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 飞舞的小球
Blogger Information
Blog 21
fans 0
comment 0
visits 12373
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
飞舞的小球
中天行者
Original
506 people have browsed it

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>飞舞的小球</title>
  6. </head>
  7. <style>
  8.     *{
  9.         margin:0;
  10.         padding: 0;
  11.     }
  12.     html,body{
  13.         width: 100%;
  14.         height: 100%;
  15.         position: relative;
  16.     }
  17.     .desktop{
  18.         width: 1200px;
  19.         height: 700px;
  20.         position: absolute;
  21.         top: calc(50% - 350px);
  22.         left: calc(50% - 600px);
  23.         /*background-color: wheat;*/
  24.         display: flex;
  25.         justify-content: space-between;
  26.         flex-direction: column;
  27.         align-items: center;
  28.     }
  29.     button{
  30.         margin: 0 auto;
  31.         background-color: white;
  32.         width: 80px;
  33.         height: 50px;
  34.         border-radius: 5px;
  35.         box-shadow: 0 5px 5px #dbdbdb;
  36.     }
  37.     button:hover{
  38.         background-color: darkred;
  39.         color: white;
  40.     }
  41.     .game_desktop{
  42.         width: 95%;
  43.         height: 95%;
  44.         border-radius: 18px;
  45.         background-color: wheat;
  46.         box-shadow: 0 30px 30px #666666 ;
  47.         margin: 10px 0 10px 0;
  48.         position: relative;
  49.     }
  50.     .ball{
  51.         position: absolute;
  52.         border-radius: 50%;
  53.     }
  55. </style>
  56. <body>
  57. <!--
  58.   clientWidth 水平方向 width + 左右padding
  59.   clientHeight 垂直方向 height + 上下padding
  61.   offsetWidth 水平方向 width + 左右padding + 左右border-width
  62.   offsetHeight 垂直方向 height + 上下padding + 上下border-width
  64.   scrollWidth 元素内容真实的宽度，内容不超出盒子高度时为盒子的clientWidth
  65.   scrollHeight 元素内容真实的高度，内容不超出盒子高度时为盒子的clientHeight
  67.   offsetTop 获取当前元素到 定位父节点 的top方向的距离
  68.   offsetLeft 获取当前元素到 定位父节点 的left方向的距离
  70. -->
  71. <div id="desktop" class="desktop">
  72.     <button onclick="begin()">点击开始</button>
  73.     <div class="game_desktop" id="game_desktop">
  74.     </div>
  75. </div>
  79. </body>
  80. <script>
  81.     var desktop= document.getElementById("desktop");
  82.     var game_desktop= document.getElementById("game_desktop");
  83.     var game_clintWith = game_desktop.clientWidth - 10 ;
  84.     var game_clintHeight = game_desktop.clientHeight - 10;
  85.     //设置垂直位置
  86.     //设置垂直移动速度
  87.     var i=0;
  88.     //设置执行速度
  89.     var z =100;
  91.     function begin() {
  92.         createBall();
  93.         var ballid= "ball"+i;
  94.         var ball = document.getElementById(ballid);
  95.         var radius = parseInt(ball.style.width.substr(0,ball.style.width.indexOf('px')));
  96.         //设置水平/垂直位置 保持和生成泡泡的位置一致
  97.         var x = radius + game_clintWith * 0.5;
  98.         var y = radius + game_clintHeight * 0.5;
  99.         //设置随机方向
  100.         var lr =  Math.random() < 0.5 ? -1*Math.random() : Math.random() ;
  101.         //设置移动速度
  102.         var sy=lr * Math.ceil(10*Math.random());
  103.         var sx =lr * Math.ceil(10*Math.random());
  104.         setInterval(function () {
  105.             x += sx;
  106.             y += sy;
  107.             ball.style.left= x + 'px';
  108.             ball.style.top = y + 'px';
  109.             var balloffsetTop=ball.offsetTop;
  110.             var balloffsetleft=ball.offsetLeft;
  111.             if(balloffsetTop >= game_clintHeight- radius || balloffsetTop <=0 ){
  112.                 sy =  -sy;
  113.             }
  114.             if( balloffsetleft >= game_clintWith- radius ||  balloffsetleft <=0){
  115.                 sx =  -sx;
  116.             }
  117.             if(ball.style.marginLeft === '0px'){
  118.                 sx =  -sx;
  119.             }
  120.         },z);
  124.     }
  126.     function createBall() {
  127.         var ids= 'ball' + ++i ;
  128.         var newBall =  document.createElement("div");
  129.         var clolor=['0','red','green','blue',"#666666","#555222","#252525","pink","yellow","#909090","#121212"];
  130.         var ballColor=clolor[Math.ceil(10*Math.random())];
  131.         var ballWh=Math.ceil(5*Math.random())*Math.ceil(15*Math.random());
  132.         if(ballWh<10){
  133.             ballWh *= 10;
  134.         }
  135.         newBall.className="ball";
  136.         newBall.style.backgroundColor=ballColor;
  137.         newBall.style.width= ballWh + 'px';
  138.         newBall.style.height= ballWh + 'px';
  139.         newBall.style.top= ballWh + game_clintHeight * 0.5  + 'px';
  140.         newBall.style.left= ballWh + game_clintWith * 0.5 + 'px';
  141.         newBall.id=ids;
  142.         game_desktop.append(newBall)
  143.     }
  146. </script>
  147. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post