找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发js基础 开关灯小游戏

2018-12-13 分类：JavaScript 阅读(674) 评论(0)
前端开发类和id区别
前端开发和后端开发区别
后端开发和前端开发的区别

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title>开关灯</title>
        <style media=”screen”>
            .wrap {
                margin: auto;
                font-size: 0px;
            }
            .colDiv {
                width: 40px;
                height: 40px;
                background: black;
                border: 1px solid gray;
                display: inline-block;
            }
            .start {
                width: 50%;
                height: 20px;
                color: red;
                font-size: 20px;
                display: inline-block;
            }
            .score {
                width: 50%;
                height: 20px;
                color: red;
                font-size: 20px;
                display: inline-block;
                text-align: right;
            }
        </style>
    </head>
    <body>
        <div class=”wrap”>
            <div class=”start”>开始</div>
            <div class=”score”>关卡:0</div>
        </div>
    </body>
    <script type=”text/javascript”>
        var wrap = document.querySelector(‘.wrap’)
        var start = document.querySelector(‘.start’)
        var score = document.querySelector(‘.score’)
        var scores = 0
        var rownum = 10
        var colnum = 10
        var allArr = []
        var flag = 0
        aa = 2
        for (var i = 0; i < rownum; i++) {
            var rowDiv = document.createElement(‘div’)
            var rowArr = []
            for (var j = 0; j < colnum; j++) {
                var colDiv = document.createElement(‘div’)
                colDiv.className = ‘colDiv’
                colDiv.x = j
                colDiv.y = i
                colDiv.oc = false
                colDiv.onclick = down
                rowDiv.appendChild(colDiv)
                rowArr.push(colDiv)
            }
            wrap.appendChild(rowDiv)
            allArr.push(rowArr)
            wrap.style.width = colnum * colDiv.offsetWidth + ‘px’
        }
        function on(a) {
            if (a.oc == false) {
                a.style.background = ‘yellow’
                a.oc = true
                flag++
            } else {
                a.style.background = ‘black’
                a.oc = false
                flag–
            }
        }
        function any(b) {
            on(b)
            if (b.y > 0) {
                on(allArr[b.y – 1][b.x])
            }
            if (b.y < rownum – 1) {
                on(allArr[b.y + 1][b.x])
            }
            if (b.x > 0) {
                on(allArr[b.y][b.x – 1])
            }
            if (b.x < colnum – 1) {
                on(allArr[b.y][b.x + 1])
            }
        }
        function down() {
            any(this)
            if (flag == 0) {
                alert(‘game over’)
                aa += 5
            }
        }
        function rand(num) {
            return parseInt(Math.random() * num)
        }
        function s() {
            for (var i = 0; i < aa; i++) {
                var ranx = rand(colnum)
                var rany = rand(rownum)
                any(allArr[rany][ranx])
            }
            scores++
            score.innerHTML = ‘关卡:’ + scores
        }
        start.onclick = s
    </script>
</html>
前端开发类和id区别吗
前端和后端开发区别
游戏前端开发和后端开发的区别
赞(0)
前端开发者 » 前端开发js基础 开关灯小游戏
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论