渡一教育公开课web前端开发JavaScript精英课学习笔记（二十八）JavaScript 别踩方块

最新推荐文章于 2022-09-26 16:13:16 发布

じоνё靁〃

最新推荐文章于 2022-09-26 16:13:16 发布

阅读量452

点赞数

分类专栏： JavaScript、CSS、HTML

本文链接：https://blog.csdn.net/jingliuting/article/details/88846781

版权

JavaScript、CSS、HTML 专栏收录该内容

38 篇文章 12 订阅

订阅专栏

JavaScript 别踩方块

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>GameDiamond</title>

    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .wrapper {
            width: 400px;
            height: 600px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid #000;
            overflow: hidden;
        }

        .wrapper .start-box {
            position: relative;
            width: 100%;
            height: 100%;
            background-color: darkgoldenrod;
        }

        .wrapper .start-box a {
            position:absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 36px;
            text-decoration: none;
            color: #000;
            background-color: aquamarine;
            z-index: 1000;
        }

        .wrapper .start-box a:hover {
            color: crimson;
            font-weight: 700;
        }
        .wrapper .main{
            position:absolute;
            width:100%;
            height:100%;
            top:-150px;
        }
        .wrapper .main .row {
            /* position: absolute; */
            width: 100%;
            height: 150px;
        }

        .wrapper .main .row .col {
            width: 25%;
            height: 150px;
            float: left;
            transition: background-color 0.5s ease-out; 
        }
        .wrapper .score-box{
            width:100%;
            position:absolute;
            top:0px;
            z-index: 500 ;
            padding:20px;
            font-weight:700;
            font-size:36px;
            color:purple;
            background-color:#f40;
        }
    </style>
</head>

<body>

    <div class="wrapper">
        <div class="score-box">
            Score：<span class="score">0</span>
        </div>
        <div class="main"></div>
        <div class="start-box">
            <a>Game Start</a>
        </div>
    </div>

</body>
<script>

    (function () {
        var colors = ['red', 'blue', 'green', '#f40', 'orange', 'black']
        var wrap = document.querySelector('.wrapper');
        var gameStart = wrap.querySelector('.start-box a');
        var gameStartBox = wrap.querySelector('.start-box');
        var gameScore = wrap.querySelector('.score-box .score');
        var gameMain = wrap.querySelector('.main');
        var timer,
            initSpeed = 3,
            speed = 3,
            num = 0;

        gameStart.onclick = function () {
            gameStartBox.style.display = "none";
            for(;gameMain.firstChild;){
                clearInterval(gameMain.firstChild.tempTimer);
                gameMain.removeChild(gameMain.firstChild);
            }
            moveMain();
        }

        function moveMain(){
            createRow();
            timer = setInterval(function(){
                var offsetTop = gameMain.offsetTop + speed;
                if(offsetTop >=0 ){
                    offsetTop = -150;
                    createRow();
                }
                gameMain.style.top = offsetTop + 'px';
            },30)
        }






        function createRow() {
            var row = document.createElement('div');
            row.click = false;
            row.className = 'row';
            row.innerHTML = `
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        `;
            row.style.top = 0 + 'px';
            var cols = row.querySelectorAll('.col');
            var colorIdx = Math.floor(Math.random() * colors.length);
            var colIdx = Math.floor(Math.random() * 4);
            for (var i = 0; i < cols.length; i++) {
                if (i == colIdx) {
                    cols[i].style.backgroundColor = colors[colorIdx];
                    cols[i].onclick = function () {
                        this.style.backgroundColor = "#fff";
                        if(!row.click){
                            num ++;
                            row.click = true;
                        }
                        speed = initSpeed + Math.floor(num / 10);
                        gameScore.innerHTML = num;
                    }
                } else {
                    cols[i].style.backgroundColor = '#fff';
                    cols[i].onclick = function () {
                        gameOver();
                    }
                }
            }
            gameMain.insertBefore(row,gameMain.firstChild);
            row.tempTimer = setInterval(function(){
                if(row.offsetTop >= row.parentElement.offsetHeight + 150){
                    if(!row.click){
                        gameOver();
                    }
                    clearInterval(row.tempTimer);
                    row.parentElement.removeChild(row);
                }
            },30)
            return row;
        }

         function gameOver() {
            clearInterval(timer);
            initSpeed = 3;
            speed = 3;
            num = 0;
            gameScore.innerHTML = num;
            gameStartBox.style.display = 'flex';
            gameStart.innerHTML = 'Score：' + num + '<br>Game Over<br>Click Me Reset Start';
        }


    })()

</script>

</html>