H5 games [article 1] word games

  javascript

H5 games a group of words game

Introduction to Project Functions

  1. Thesaurus function, the project file is equipped with csv format Chinese commonly used phrase thesaurus, each randomly selected words for the game
  2. The matching elimination function automatically matches the selected words in the word bank and eliminates them.
  3. Both the selected animation and the eliminated animation are generated by svg
  4. Intelligent reminder system, words can be prompted after 10 seconds without operation
  5. Pass judgment
  6. Bodymovin library description animation

Core code presentationLink description

https://github.com/fanshyiis/ …

Acquiring a thesaurus, and according to a csv file

$.ajax({
 url: './js/ck2.csv',
 dataType: 'text'
 }).done(successFunction);
 
 //callback function
 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)
 }
 }
 }

Random decimation function

Random data is obtained based on the length of the array

function getArrayItems(arr, num) {
 //Create a new array and copy the passed-in array for operation instead of directly operating the passed-in array.
 var temp_array = new Array();
 for (var index in arr) {
 temp_array.push(arr[index]);
 }
 //The retrieved value items are stored in this array
 var return_array = new Array();
 for (var i = 0;   i<num;  i++) {
 //Judge if there are elements in the array that can be fetched to prevent subscripts from crossing the line.
 if (temp_array.length>0) {
 //Generate a random index in the array
 var arrIndex = Math.floor(Math.random()*temp_array.length);
 //Copy the corresponding array element value of this random index
 return_array[i] = temp_array[arrIndex];
 //Then delete the array elements of this index, and temp_array becomes the new array
 temp_array.splice(arrIndex, 1);
 } else {
 //After the data items in the array are fetched, exit the loop. For example, the array has only 10 items, but 20 items are required to be fetched.
 break;
 }
 }
 return return_array;

}

enter image description here

Svg animation rendering plug-in

function clear(id) {
 document.getElementById(id).innerHTML = ''
 console.log(id,'-----------------')
 bodymovin.loadAnimation({
 Getelementbyid (id),//dom element for rendering animation
 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()
  }
})
Other functions will not be introduced one by one.
 At the end of the previous figure