实现简易版方块掉落

最新推荐文章于 2022-04-29 17:05:26 发布

梦想成为大佬

最新推荐文章于 2022-04-29 17:05:26 发布

阅读量326

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript 动画 DOM操作随机数定时器

本文链接：https://blog.csdn.net/weixin_46106630/article/details/120780516

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

原生JS 实现方块掉落

效果图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width:500px;
            height: 700px;
            margin: 0 auto;
            border: 1px solid #000;
            position: relative;
        }
        #box>.boxchider{
            box-sizing: border-box;
          
            width: 100px;
            float: left;
            position: relative;
            height:100%;
        }
        .claerfix::after{
            content:"";
            display:block;
            visibility:hidden;
            clear:both;
            
        }
    </style>
</head>
<body>
    <div>
        <h1 id="title"></h1>
        <div id="box"  class="claerfix">
            <div class="boxchider" >

            </div >
            <div class="boxchider">

            </div>
            <div class="boxchider" >

            </div>
            <div class="boxchider" >

            </div>
            <div class="boxchider" >

            </div>
        </div>
    </div>
    <script>
        var box=document.getElementById("box");
        // 获取五条轨道
        var listbox=document.getElementsByClassName("boxchider");
        // 工厂方法
        function Move(){
        // 创建Div
        var createdDiv=document.createElement("div");
        // 生成随机数
        var num = Math.floor(Math.random() * 5);
        // 初始化动态创建的div
        createdDiv.style.position='absolute';
        createdDiv.style.width=100+"px";
        createdDiv.style.height=70+"px";
        createdDiv.style.background="#ccc";
       // 根据随机数选择在哪一个轨道上创建
        var chider=listbox[num];
        if(chider.clientHeight<=70) {
           
        } else{
        	
            document.getElementById("title").innerHTML=num;
           	
            chider.appendChild(createdDiv);  
            // 向指定轨道添加滑块
            for (let i = 0; i <chider.clientHeight-70; i++) {
            // 定时器实现动画效果
            setTimeout(()=>{
            	// 因为向相对于指定滑块的高度进行 绝对定位 那么就是 父级的高度-当前滑块的高度则等于向下坠落的位置
                createdDiv.style.top=i+"px";
            },i*7);
            
        }
      
        // 每次坠落都给当前轨道的高度减去已经添加过的高度 如果到70 直接给70即可
        chider.style.height=chider.clientHeight<=70?70+"px":chider.clientHeight-70+"px"
      
        }
        }
       
        
       setInterval(() => {
       // 定时循环调用程序
        Move();
       },1000);
        
    </script>
</body>
</html>