欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

飞舞的泡泡球

程序员文章站 2022-03-13 13:55:52
...

飞舞的泡泡球
效果图如下
飞舞的泡泡球

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Title</title>
    6. 

  6.     <style>
    7. 

  7.         .container{
    8. 

  8.             width: 800px;
    9. 

  9.             height: 800px;
    10. 

  10.             background-color: #eee;
    11. 

  11.             margin: 60px auto;
    12. 

  12.             box-shadow: 5px 8px 2px #bdbdbd inset;
    13. 

  13.             border: 1px solid #666;
    14. 

  14.             position: relative;
    15. 

    16. 

  16.         }
    17. 

  17.         .but{
    18. 

  18.             margin: 0px auto;
    19. 

  19.             width: 800px;
    20. 

  20.         }
    21. 

    22. 

  22.         .ball{
    23. 

  23.             border-radius: 50%;
    24. 

  24.             /*background-color: rgb(157 110 233);*/
    25. 

  25.             position: absolute;
    26. 

  26.         }
    27. 

    28. 

  28.     </style>
    29. 

  29. </head>
    30. 

  30. <body>
    31. 

  31.     <div class="container" id="cont">
    32. 

  32.     </div>
    33. 

  33.         <div class="but"><button id="btn" onclick="pball()">弹球</button></div>
    34. 

    35. 

    36. 

  36.     <script>
    37. 

  37.         var comobj=document.getElementById('cont');
    38. 

    39. 

  39.         function pball(){
    40. 

  40.             var myWidth = Math.floor(Math.random()*30+10);
    41. 

  41.             var speY = Math.floor(Math.random()*10-6);
    42. 

  42.             var speX = Math.floor(Math.random()*10-6);
    43. 

  43.             var myball=document.createElement("div");
    44. 

    45. 

  45.             var mycolorR = Math.floor(Math.random()*255);
    46. 

  46.             var mycolorB = Math.floor(Math.random()*255);
    47. 

  47.             var mycolorG = Math.floor(Math.random()*255);
    48. 

    49. 

  49.             var contW = comobj.clientWidth;
    50. 

  50.             var contH = comobj.clientHeight;
    51. 

    52. 

  52.             // console.log(mycolorR+','+mycolorG)
    53. 

  53.             myball.style.backgroundColor = `rgb(${mycolorR} ${mycolorB} ${mycolorG})`;
    54. 

  54.             myball.style.width = `${myWidth}px`;
    55. 

  55.             myball.style.height = `${myWidth}px`;
    56. 

  56.             // console.log(`rgb(${mycolorR} ${mycolorB} ${mycolorG})`);
    57. 

    58. 

  58.             myball.className='ball';
    59. 

  59.             comobj.appendChild(myball);
    60. 

  60.             myball.style.top = `${contW/2}px`;
    61. 

  61.             myball.style.left =`${contH/2}px`;
    62. 

  62.             // console.log( `${comobj.clientWidth/2}px`)
    63. 

    64. 

    65. 

  65.             setInterval(function () {
    66. 

    67. 

  67.                 var  oftop = myball.offsetTop;
    68. 

  68.                 var  ofleft= myball.offsetLeft;
    69. 

  69.                 var myWid = myball.offsetWidth;
    70. 

  70.                 var myhei = myball.offsetHeight;
    71. 

  71.                 var tp= contH-myhei;
    72. 

  72.                 var lp = contW-myWid;
    73. 

    74. 

  74.                 var opSy = 0;
    75. 

  75.                 var lpSx = 0;
    76. 

    77. 

  77.                 opSy = oftop + speY;
    78. 

  78.                 lpSx = ofleft + speX;
    79. 

    80. 

  80.                 if (opSy<=0)
    81. 

  81.                 {
    82. 

  82.                     myball.style.top='0px';
    83. 

  83.                     speY = ~speY;
    84. 

  84.                 } else if (opSy>=tp) {
    85. 

  85.                     myball.style.top = `${tp}px`;
    86. 

  86.                     speY = ~speY;
    87. 

  87.                 }else {
    88. 

  88.                     myball.style.top = `${opSy}px`;
    89. 

  89.                 }
    90. 

    91. 

    92. 

  92.                 if (lpSx<=0)
    93. 

  93.                 {
    94. 

  94.                     myball.style.left='0px';
    95. 

  95.                     speX = ~speX;
    96. 

  96.                 }else if (lpSx>=lp) {
    97. 

  97.                     myball.style.left = `${lp}px`;
    98. 

  98.                     speX = ~speX;
    99. 

  99.                 }else {
    100. 

  100.                     myball.style.left = `${lpSx}px`;
    101. 

  101.                 }
    102. 

    103. 

    104. 

  104.             },50)
    105. 

    106. 

    107. 

    108. 

    109. 

  109.         }
    110. 

  110.     </script>
    111. 

  111. </body>
    112. 

  112. </html>
    113.

上一篇： 纯真破解工作室

下一篇： 基于Laravel的国产开源CMS，支持Swoole，含API接口

推荐阅读