H5小遊戲 【篇一】 組詞遊戲

H5小遊戲 篇一 組詞遊戲

項目功能簡介

1. 詞庫功能，項目文件裏配有csv格式的中文經常使用詞組詞庫，每次隨機抽取詞語進行遊戲
2. 匹配消除功能，自動在詞庫中匹配選中詞語並進行消除
3. 選中動畫以及消除動畫，均由svg生成爆炸動畫
4. 智能提醒系統，10秒以後未做操做可提示單詞
5. 過關斷定
6. bodymovin庫描述動畫

核心代碼展現 連接描述

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

獲取詞庫，根據csv文件

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

// 回調函數
function successFunction(data) {
    var allRows = data.split(/\r?\n|\r/);
    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)
        }
    }
}

隨機抽取函數

會根據數組的長度獲取隨機數據

function getArrayItems(arr, num) {
//新建一個數組,將傳入的數組複製過來,用於運算,而不要直接操做傳入的數組;
var temp_array = new Array();
for (var index in arr) {
    temp_array.push(arr[index]);
}
//取出的數值項,保存在此數組
var return_array = new Array();
for (var i = 0; i<num; i++) {
    //判斷若是數組還有能夠取出的元素,以防下標越界
    if (temp_array.length>0) {
        //在數組中產生一個隨機索引
        var arrIndex = Math.floor(Math.random()*temp_array.length);
        //將此隨機索引的對應的數組元素值複製出來
        return_array[i] = temp_array[arrIndex];
        //而後刪掉此索引的數組元素,這時候temp_array變爲新的數組
        temp_array.splice(arrIndex, 1);
    } else {
        //數組中數據項取完後,退出循環,好比數組原本只有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: '春天裏柳樹發芽百花',
    one: null,
    two: null,
    reData: null,
    timeDuring: 0
  },
  methods: {
      // 重置函數
      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)
      },
      // 選擇函數
      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
      },
      // 進入下一關
      getNextPass () {
          this.one = false
          this.timeDuring = 0
          this.windowBg = false
          cn = cn + 2,
          this.pass++
          this.passNum = cn
          getDataBase()
          setTimeout(function () {
              font()
          }, 1000)
      },
      //初始化函數
    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()
  }
})

其餘函數就不一一介紹了
上個圖最後