飞舞的小球

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>飞舞的小球</title>
</head>
<style>
    *{
        margin:0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .desktop{
        width: 1200px;
        height: 700px;
        position: absolute;
        top: calc(50% - 350px);
        left: calc(50% - 600px);
        /*background-color: wheat;*/
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: center;
    }
    button{
        margin: 0 auto;
        background-color: white;
        width: 80px;
        height: 50px;
        border-radius: 5px;
        box-shadow: 0 5px 5px #dbdbdb;
    }
    button:hover{
        background-color: darkred;
        color: white;
    }
    .game_desktop{
        width: 95%;
        height: 95%;
        border-radius: 18px;
        background-color: wheat;
        box-shadow: 0 30px 30px #666666 ;
        margin: 10px 0 10px 0;
        position: relative;
    }
    .ball{
        position: absolute;
        border-radius: 50%;
    }
</style>
<body>
<!--
  clientWidth 水平方向 width + 左右padding
  clientHeight 垂直方向 height + 上下padding
  offsetWidth 水平方向 width + 左右padding + 左右border-width
  offsetHeight 垂直方向 height + 上下padding + 上下border-width
  scrollWidth 元素内容真实的宽度，内容不超出盒子高度时为盒子的clientWidth
  scrollHeight 元素内容真实的高度，内容不超出盒子高度时为盒子的clientHeight
  offsetTop 获取当前元素到 定位父节点 的top方向的距离
  offsetLeft 获取当前元素到 定位父节点 的left方向的距离
-->
<div id="desktop" class="desktop">
    <button onclick="begin()">点击开始</button>
    <div class="game_desktop" id="game_desktop">
    </div>
</div>
</body>
<script>
    var desktop= document.getElementById("desktop");
    var game_desktop= document.getElementById("game_desktop");
    var game_clintWith = game_desktop.clientWidth - 10 ;
    var game_clintHeight = game_desktop.clientHeight - 10;
    //设置垂直位置
    //设置垂直移动速度
    var i=0;
    //设置执行速度
    var z =100;
    function begin() {
        createBall();
        var ballid= "ball"+i;
        var ball = document.getElementById(ballid);
        var radius = parseInt(ball.style.width.substr(0,ball.style.width.indexOf('px')));
        //设置水平/垂直位置 保持和生成泡泡的位置一致
        var x = radius + game_clintWith * 0.5;
        var y = radius + game_clintHeight * 0.5;
        //设置随机方向
        var lr =  Math.random() < 0.5 ? -1*Math.random() : Math.random() ;
        //设置移动速度
        var sy=lr * Math.ceil(10*Math.random());
        var sx =lr * Math.ceil(10*Math.random());
        setInterval(function () {
            x += sx;
            y += sy;
            ball.style.left= x + 'px';
            ball.style.top = y + 'px';
            var balloffsetTop=ball.offsetTop;
            var balloffsetleft=ball.offsetLeft;
            if(balloffsetTop >= game_clintHeight- radius || balloffsetTop <=0 ){
                sy =  -sy;
            }
            if( balloffsetleft >= game_clintWith- radius ||  balloffsetleft <=0){
                sx =  -sx;
            }
            if(ball.style.marginLeft === '0px'){
                sx =  -sx;
            }
        },z);
    }
    function createBall() {
        var ids= 'ball' + ++i ;
        var newBall =  document.createElement("div");
        var clolor=['0','red','green','blue',"#666666","#555222","#252525","pink","yellow","#909090","#121212"];
        var ballColor=clolor[Math.ceil(10*Math.random())];
        var ballWh=Math.ceil(5*Math.random())*Math.ceil(15*Math.random());
        if(ballWh<10){
            ballWh *= 10;
        }
        newBall.className="ball";
        newBall.style.backgroundColor=ballColor;
        newBall.style.width= ballWh + 'px';
        newBall.style.height= ballWh + 'px';
        newBall.style.top= ballWh + game_clintHeight * 0.5  + 'px';
        newBall.style.left= ballWh + game_clintWith * 0.5 + 'px';
        newBall.id=ids;
        game_desktop.append(newBall)
    }
</script>
</html>
相关文章
