摘要：小游戲篇一組詞游戲項目功能簡介詞庫功能，項目文件里配有格式的中文常用詞組詞庫，每次隨機(jī)抽取詞語進(jìn)行游戲匹配消除功能，自動在詞庫中匹配選中詞語并進(jìn)行消除選中動畫以及消除動畫，均由生成爆炸動畫智能提醒系統(tǒng)，秒之后未作操作可提示單詞過關(guān)判定庫描述

項目功能簡介

詞庫功能，項目文件里配有csv格式的中文常用詞組詞庫，每次隨機(jī)抽取詞語進(jìn)行游戲

匹配消除功能，自動在詞庫中匹配選中詞語并進(jìn)行消除

選中動畫以及消除動畫，均由svg生成爆炸動畫

智能提醒系統(tǒng)，10秒之后未作操作可提示單詞

過關(guān)判定

bodymovin庫描述動畫

核心代碼展示鏈接描述

https://github.com/fanshyiis/...

獲取詞庫，根據(jù)csv文件

$.ajax({
    url: "./js/ck2.csv",
    dataType: "text"
}).done(successFunction);

// 回調(diào)函數(shù)
function successFunction(data) {
    var allRows = data.split(/
?
|
/);
    for (var singleRow = 1; singleRow < allRows.length; singleRow++) {
        if (allRows[singleRow].length === 2) {
          var m = {
              a: allRows[singleRow][0],
              b: allRows[singleRow][2]
          }
          dataBase.push(m)
        }
    }
}

隨機(jī)抽取函數(shù)
會根據(jù)數(shù)組的長度獲取隨機(jī)數(shù)據(jù)

function getArrayItems(arr, num) {
//新建一個數(shù)組,將傳入的數(shù)組復(fù)制過來,用于運(yùn)算,而不要直接操作傳入的數(shù)組;
var temp_array = new Array();
for (var index in arr) {
    temp_array.push(arr[index]);
}
//取出的數(shù)值項,保存在此數(shù)組
var return_array = new Array();
for (var i = 0; i0) {
        //在數(shù)組中產(chǎn)生一個隨機(jī)索引
        var arrIndex = Math.floor(Math.random()*temp_array.length);
        //將此隨機(jī)索引的對應(yīng)的數(shù)組元素值復(fù)制出來
        return_array[i] = temp_array[arrIndex];
        //然后刪掉此索引的數(shù)組元素,這時候temp_array變?yōu)樾碌臄?shù)組
        temp_array.splice(arrIndex, 1);
    } else {
        //數(shù)組中數(shù)據(jù)項取完后,退出循環(huán),比如數(shù)組本來只有10項,但要求取出20項.
        break;
    }
}
return return_array;

}

svg動畫渲染插件

  function clear(id) {
  document.getElementById(id).innerHTML = ""
    console.log(id,"-----------------")
      bodymovin.loadAnimation({
container: document.getElementById(id), // 渲染動畫的 dom 元素
renderer: "svg",
loop: false,
autoplay: true,
path: "./js/data.json"
  })
  }

var vue = new Vue({
  el: "#vue",
  data: {
      windowBg: false,
      restart: false,
      passNum: cn,
      pass: 1,
    grid: 9,
    allText: null,
    gridList: [],
    text: "春天里柳樹發(fā)芽百花",
    one: null,
    two: null,
    reData: null,
    timeDuring: 0
  },
  methods: {
      // 重置函數(shù)
      reStart () {
          this.restart = true
          setTimeout(function () {
            vue.restart = false
          }, 800)
          this.playAudio("restart")
          this.passNum = cn
          this.gridList = JSON.parse(JSON.stringify(this.reData))
      },
      playAudio (val) {
          var x = document.getElementById(val)
          x.load()
          x.play()
      },
      setTime () {
          this.timeDuring++
          if (this.timeDuring === 10) {
              this.tip()
          }
          console.log(this.timeDuring)
        setTimeout(function () {
            vue.setTime()
        }, 1000)
      },
      tip () {
          let a = ""
          console.log(choose)
          this.gridList.map(val => {
              if (!val.r && val.f) {
                a = a + val.f
              }
          })
          let b = null
          choose.map(val => {
              if (a.indexOf(val.a) !== -1 && a.indexOf(val.b) !== -1) {
                  b = val.a
              }
          })
          if (!b) {
              this.getNextPass()
          }
          if (this.one) {
              this.choose(this.one, "t")
          }
          this.gridList.map(val => {
              if (!val.r && val.f === b) {
                this.one = null
                this.choose(val, "t")
              }
          })
          console.log(a)
      },
      // 選擇函數(shù)
      choose (item, type) {
          if (type !== "t") {
          this.timeDuring = 0
          }
          if (!item.f) {
              return false
          }
          if (this.one && item.x === this.one.x && item.y === this.one.y) {
              this.playAudio("touchCard")
            item.choose = !item.choose
            this.one = null
              return false
          } else {
              this.playAudio("touchCard")
              item.choose = !item.choose
              if (this.one) {
                  this.two = item
                  // font()
                  // 模擬消除
                  // 加上timeout效果更好
                  var _this = this
                  setTimeout(function () {
                      _this.clearText()
                  }, 300)
              } else {
                  this.one = item
                  // font()
              }
          }
      },
      // 消除邏輯
      clearText () {
          var r = false
          dataBase.map(val =>{
              if (val.a === this.one.f && val.b === this.two.f) {
                  r = true
              }
          })
          if (!r) {
              this.gridList.map(val => {
                  if (val.x === this.two.x && val
                      .y === this.two.y) {
                      val.choose = false
                      this.playAudio("error")
                  }
                  if (val.x === this.one.x && val
                      .y === this.one.y) {
                      val.choose = false
                  }
              })
              this.two = false
              this.one = false
              return false
          }
          this.gridList.map(val => {
              if (val.x === this.one.x && val
                  .y === this.one.y) {
                  clear(val.x + "" + val.y)
                  setTimeout(function () {
                      val.f = ""
                  }, 200)
                  val.r = true
              }
              if (val.x === this.two.x && val
                  .y === this.two.y) {
                  clear(val.x + "" + val.y)
                  setTimeout(function () {
                          val.f = ""
                      }, 200)
                  val.r = true
                  this.playAudio("success")
              }
          })
          this.passNum--
          console.log(this.passNum)
          if (this.passNum === 0) {
              this.playAudio("next")
              this.windowBg = true
          }
          // this.sound_error = true
          this.one = null
          this.two = null
      },
      // 進(jìn)入下一關(guān)
      getNextPass () {
          this.one = false
          this.timeDuring = 0
          this.windowBg = false
          cn = cn + 2,
          this.pass++
          this.passNum = cn
          getDataBase()
          setTimeout(function () {
              font()
          }, 1000)
      },
      //初始化函數(shù)
    start () {
      this.gridList = []
      for (var i = 0; i < this.grid; i++) {
          for (var j = 0; j < this.grid; j++) {
         this.gridList.push({
              x: i,
              y: j,
              f: "",
              choose: false,
              r: false,
              m: false
         })
        }
      }
      var l = []
      choose.map(val => {
          l.push(val.a)
          l.push(val.b)
      })
      $("#bggg").click()
      // this.playAudio("bgm")
      console.log(l)
      this.allText = l
      var c = getArrayItems(this.gridList, cn * 2)
      console.log(c)
      c.map((val, index) => {
          val.f = l[index]
      })
      this.reData = JSON.parse(JSON.stringify(this.gridList))
    }
  },
  created () {
      getDataBase()
      this.setTime()
  }
})

其他函數(shù)就不一一介紹了
上個圖最后