js小游戏-别踩白块儿

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

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

首先是css部分

然后是html部分

   

        
    
    

        
游戏结束
        

        
下次继续努力吧
    
    

        
别踩白块儿
        当前分数为0分
    

最后是js部分

js部分需要引入jq框架

添加方块

首先往对象中添加方块。
定义一个数组，用来存放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 += ` 
`
          }
          app.innerHTML += `
${str}
`
          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 += ` 
`
           }
           app.innerHTML += `
${str}
`
           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！