js小游戏-别踩白块儿

js+jq面向对象编程-别踩白块儿之别踩川建国同志。一个非常简单的小游戏。点击拜登会变成特朗普,点击特朗普或者特朗普碰到下边框游戏结束。排版比较简单，js代码也非常好理解。首先是css部分图片自行保存。Biden.pngDonald.pngdie.png<style>*{margin: 0;padding: 0;}#app{width: 40

Hope°

1434人浏览 · 2021-02-10 01:13:24

Hope° · 2021-02-10 01:13:24 发布

js+jq面向对象编程-别踩白块儿。

一个非常简单的小游戏。点击黑色会变成白色，,点击白色或者碰到大盒子下边框游戏结束。
排版比较简单，js代码也非常好理解,而且不到100行，使用的方法也非常简单。
在这里插入图片描述

首先是css部分

  <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            width: 408px;
            height: 608px;
            border: 1px solid #ccc;
            margin: auto;
            overflow: hidden;
            position: relative;
        }

        .row {
            position: absolute;
            top: -150px;
            left: 0;
        }

        .row div {
            float: left;
            width: 100px;
            height: 150px;
            border: 1px solid #ccc;
        }

        .row .black {
            background: black;
            background-size: 100% 100%;
        }

        .white {
            background: #fff;
            background-size: 100% 100%;
        }

        .tits {
            text-align: center;
            position: fixed;
            top: 680px;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .tits p {
            height: 50px;
            line-height: 50px;
            font-size: 33px;
            color: red
        }

        #gameOver {
            width: 408px;
            height: 608px;
            background: #fff;
            position: fixed;
            top: 305px;
            left: 50%;
            text-align: center;
            transform: translate(-50%, -50%);
            color: red;
            display: none;
            border: 1px solid #ccc
        }

        #gameOver h1 {
            margin-top: 200px;
        }
    </style>

然后是html部分

<body>
   <div id="app">
        <!-- 游戏区域 -->
    </div>
    <div id="gameOver">
        <h1>游戏结束</h1>
        <br>
        <p>下次继续努力吧</p>
    </div>
    <div class="tits">
        <p>别踩白块儿</p>
        当前分数为<span id='score'>0</span>分
    </div>
</body>

最后是js部分

js部分需要引入jq框架

    <script src="./jquery-1.12.4.min.js"></script>

添加方块

首先往对象中添加方块。
定义一个数组，用来存放class名，并且默认全部显示为白色，写一个随机数，随机其中一个为黑色。
并且把他们遍历放进class为row的div里面，最后显示在页面中。
设置计时器，算出每次添加的时间。每次添加的时间 = 每次移动的时间 ✖ 盒子的高度 ➗ 定义好的速度

var game = {
  speed: 5, //定义速度
}
    // 连续添加
  addRows() {
      time = (20 * 150) / game.speed
      addRows = setInterval(() => {
          // 加载4个白色，随机一个为黑色
          load = ['white', 'white', 'white', 'white']
          BlackPosition = Math.floor(Math.random() * 4)
          load[BlackPosition] = 'black'
          var str = ''
          for (var i = 0; i < load.length; i++) {
              str += ` <div class='${load[i]}' ></div>`
          }
          app.innerHTML += `<div class='row' name='${game.list}'>${str}</div>`
          game.list++
      }, time)
  },

方块移动

遍历所有的行（.row），通过改变它的top值，来实现移动。
当超出大盒子，就清除了这一行。
遍历所有的黑色方块，放黑色方块碰到盒子底部，游戏结束，并且清除所有的计数器。

    // 移动
    rowMove() {
        rowMoves = setInterval(function () {
            // 遍历所有行 并且移动
            $.each($('.row'), (v, i) => {
                $(i).css('top', i.offsetTop + game.speed)
                // 当超出距离就删除这一行
                if ($(i).offset().top > $('#app').height()) {
                    $(i).remove()
                }
            })
            // 遍历黑色块 当超出距离就清除计时器
            $.each($('.black'), (v, i) => {
                if ($(i).offset().top >= 458) {
                    clearInterval(rowMoves)
                    clearInterval(addRows)
                    $('#app').hide()
                    $('#gameOver').show()
                }
            })
        }, 20)
    },

点击消除黑色块

给一个鼠标抬起事件,并且加上事件代理t = e.target || window.event 兼容ie。
当点击的class名字为white 游戏结束，清除所有的计时器。
当点击的为黑色块时，并且是当前行,就让这个色块变为白色。定义的nowLstClick++ 。
nowLstClick判断是不是当前行，如果是就可以点击，否则不允许点击。
判断原理就是给每行都设置一个name属性，当前可点击的列的值等于name属性，就是当前行，可以消除黑色块，否则不允许。

   // 点击消除黑块
    removeBlack() {
        $(window).mouseup(function (e) {
            e = e || e.srcElement
            t = e.target || window.event //事件代理
            // 当点击为白色游戏结束
            if (t.className == 'white') {
                clearInterval(rowMoves)
                clearInterval(addRows)
                $('#app').hide()
                $('#gameOver').show()
            }
            if (
                //判断当点击的为黑块，并且当前为可点击状态 消除黑块
                t.className == 'black' &&
                $(t).parent().attr('name') == game.nowLstClick
            ) {
                $(t).attr('class', 'white')
                game.nowLstClick++
                // 显示分数
                $('#score').html(game.nowLstClick)
            }
        })
    },

完整js代码

$(function () {
   game.init('app')
})
var game = {
   speed: 5, //定义速度
   list: 0, //一共多少列
   nowLstClick: 0,
   init() {
       this.addRows()
       this.rowMove()
       this.removeBlack()
   },
   // 连续添加
   addRows() {
       time = (20 * 150) / game.speed
       addRows = setInterval(() => {
           // 加载4个白色，随机一个为黑色
           load = ['white', 'white', 'white', 'white']
           BlackPosition = Math.floor(Math.random() * 4)
           load[BlackPosition] = 'black'
           var str = ''
           for (var i = 0; i < load.length; i++) {
               str += ` <div class='${load[i]}' ></div>`
           }
           app.innerHTML += `<div class='row' name='${game.list}'>${str}</div>`
           game.list++
       }, time)
   },
   // 移动
   rowMove() {
       rowMoves = setInterval(function () {
           // 遍历所有行 并且移动
           $.each($('.row'), (v, i) => {
               $(i).css('top', i.offsetTop + game.speed)
               // 当超出距离就删除这一行
               if ($(i).offset().top > $('#app').height()) {
                   $(i).remove()
               }
           })
           // 遍历黑色块 当超出距离就清除计时器
           $.each($('.black'), (v, i) => {
               if ($(i).offset().top >= 458) {
                   clearInterval(rowMoves)
                   clearInterval(addRows)
                   $('#app').hide()
                   $('#gameOver').show()
               }
           })
       }, 20)
   },
   // 点击消除黑块
   removeBlack() {
       $(window).mouseup(function (e) {
           t = e.target || window.event //事件代理
           // 当点击为白色游戏结束
           if (t.className == 'white') {
               clearInterval(rowMoves)
               clearInterval(addRows)
               $('#app').hide()
               $('#gameOver').show()
           }
           if (
               //判断当点击的为黑块，并且当前为可点击状态 消除黑块
               t.className == 'black' &&
               $(t).parent().attr('name') == game.nowLstClick
           ) {
               $(t).attr('class', 'white')
               game.nowLstClick++
               // 显示分数
               $('#score').html(game.nowLstClick)
           }
       })
   },
}

总体实现非常简单，只封装了3个方法，如果对您有帮助，就请伸出您的贵手点个赞吧！！！祝您2021好运连连，桃花泛滥，天天无bug！