Js Exercise 1: Collect garbage.

effect

Code:
<!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>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: rgb(95, 156, 236);
        }

        .bin {
            position: absolute;
            z-index: 10;
            top: 500px;
            left: 650px;
            width: 160px;
            height: 160px;
            font-size: 20px;
            color: tomato;
            text-align: center;
            line-height: 140px;
            background-color: pink;
        }

        div.bin div {
            width: 0;
            height: 0;
            border: 40px solid transparent;
            border-bottom-color: rgb(95, 156, 236);
            border-width: 80px 25px 80px 25px;
        }

        div.bin div:first-child {
            float: left;
            border-left-color: rgb(95, 156, 236);
        }

        div.bin div:last-child {
            float: right;
            border-right-color: rgb(95, 156, 236);
        }

        .trash {
            display: none;
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            height: 40px;
            width: 63px;
            font-size: 15px;
            color: black;
            line-height: 40px;
            text-align: center;
            border-radius: 4px;
            background-color: pink;
        }
        .score {
            position: absolute;
            z-index: 10;
            top: 50px;
            right: 50px;
            width: 100px;
            height: 100px;
            font-size: 20px;
            color: red;
            text-align: center;
            line-height: 100px;
            border-radius: 5px;
            background-color: pink;
        }

    </style>

    <script>
        alert('捡垃圾游戏\n\n游戏规则为:a向左移动 d向右移动\n点击确认后游戏将在几秒后开始');
        window.addEventListener("load", function () {
            let score = 0;
            let i=1;
            let sorts = ['易拉罐', '罐头盒', '牙膏皮', '废电池', '旧衣物', '废玻璃', '硬塑料','报纸','节能灯','刀具','锅','牛奶盒','毛巾','书包','镜子','螺丝','剩饭剩菜','落叶','水果残余','化妆品','温度计','灯泡','烟头','尘土'];
            let time = getRandomIntInclusive(2,5)*1000;
            let bin = document.querySelector('.bin');

            function getRandomIntInclusive(min, max) {
                min = Math.ceil(min);
                max = Math.floor(max);
                return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
            }

            function isDropIn(obj,bin){
                let span = document.querySelector('.score').querySelector('span');
                if(obj.offsetTop==460&&bin.offsetLeft<obj.offsetLeft&&bin.offsetLeft+100>obj.offsetLeft){
                    score+=2;
                    obj.style.display = 'none';
                    span.innerHTML = score;
                }
            }

            function drop(obj){
                let trash = sorts[getRandomIntInclusive(0,sorts.length-1)];
                let x = getRandomIntInclusive(200,1100);
                obj.style.display = 'block';
                obj.innerHTML = trash;
                obj.style.left = x+'px';
                obj.style.top = '0';
                clearInterval(obj.timer);
                obj.timer=setInterval(function(){
                    if(obj.offsetTop<600){
                        obj.style.top = obj.offsetTop +2 +'px';
                    }
                    else{
                        obj.style.display = 'none'
                    }
                    isDropIn(obj,bin);
                },25)
            }
            

            document.addEventListener('keydown', function (e) {
                if (e.keyCode == 65 && bin.offsetLeft >= 100) {
                    bin.style.left = bin.offsetLeft - 14 + 'px';
                }
                if (e.keyCode == 68 && bin.offsetLeft <= 1200) {
                    bin.style.left = bin.offsetLeft + 14 + 'px';
                }
            })

            let trashs = document.querySelectorAll('.trash');
            setInterval(function(){
                drop(trashs[i%5]);
                i++;
            },time)

        })

    </script>

</head>

<body>
    <!-- 15:40开始 -->
    <div class="bin">
        垃圾桶
        <div></div>
        <div></div>
    </div>
    <div class="trash" ,data-index="1"></div>
    <div class="trash" ,data-index="2"></div>
    <div class="trash" ,data-index="3"></div>
    <div class="trash" ,data-index="4"></div>
    <div class="trash" ,data-index="5"></div>
    <div class="score">
        得分：<span>0</span>
    </div>
</body>

</html>
Js Exercise 1: Collect garbage.

effect

Guess you like
