H5小游戏【篇一】组词游戏

今天药忘吃喽~ 2022-03-07 12:50 224阅读 0赞

# H5小游戏 篇一 组词游戏 #

项目功能简介

1.  词库功能，项目文件里配有csv格式的中文常用词组词库，每次随机抽取词语进行游戏
2.  匹配消除功能，自动在词库中匹配选中词语并进行消除
3.  选中动画以及消除动画，均由svg生成爆炸动画
4.  智能提醒系统，10秒之后未作操作可提示单词
5.  过关判定
6.  bodymovin库描述动画

> 核心代码展示 [链接描述][Link 1]

[https://github.com/fanshyiis/...][Link 1]

> 获取词库，根据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;

\}

![enter image description here][]

> 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()
      }
    })

其他函数就不一一介绍了
    上个图最后

[Link 1]: https://github.com/fanshyiis/H5WordsGame
[enter image description here]: /images/20220307/e703b04be62e41d08c6160e6a409ad18.png

发表评论取消回复

表情：

评论列表（有 0 条评论，224人围观）

还没有评论，来说两句吧...

相关阅读

相关 H5 canvas实现简单的飞机大战小游戏

整体分析飞机大战游戏游戏存在就会有准备阶段（控制游戏全局属性）： 1. 定义游戏状态第一阶段：游戏欢迎状态 0 START 第

r囧r小猫/ 2023年06月24日 06:26/ 0 赞/ 4 阅读

相关 H5游戏开发：游戏引擎入门推荐

![H5æ¸¸æå¼åï¼æ¸¸æå¼æå¥é¨æ¨è][H5] 前言很多刚刚接触到游戏开发，准备大展拳脚的小鲜肉们，往往在技术选型这第一关就栽了跟头。毕竟网络上

心已赠人/ 2023年05月29日 05:22/ 0 赞/ 140 阅读

相关 Egret 开发H5小游戏

Egret Wing 代码编辑器 ResDepot 静态资源加载器项目目录主要构成：resource文件夹下的新建的游戏文件(用于存放图片，音频和

布满荆棘的人生/ 2022年12月20日 02:53/ 0 赞/ 198 阅读

相关 html5赛车小游戏,HTML5 一路狂奔 - 赛车小游戏

CSS 语言： CSSSCSS 确定 @import url(http://fonts.googleapis.com/css?family=Covered+By+You

た入场券/ 2022年10月05日 12:50/ 0 赞/ 224 阅读

相关 h5忍者小游戏源码下载

[下载地址][Link 1]一款忍者html5小游戏源码，可以当做手机端h5小游戏。在游戏中点击来改变忍者行动的路线，在游戏途中尽可能多的获得金币，要注意的是地图会随机生成，现

Myth丶恋晨/ 2022年09月09日 02:07/ 0 赞/ 197 阅读

相关 H5游戏开发：FC小蜜蜂

前言说起任天堂 FC 那是充满我们童年寒暑假的回忆，那时候没有正版红白机，玩的是几十块一台的山寨小霸王，十块一张的卡带，玩着魂斗罗、马里奥、淘金者、快打旋风、打鸭子等等

柔光的暖阳◎/ 2022年05月21日 09:55/ 0 赞/ 255 阅读

相关 h5小游戏

翻之前学习的时候练手的小项目，看到了之前写的几个小游戏，分享出来供初学者看看。效果演示 [2048小游戏][2048] [别踩白块][Link 1] [推箱子][Li

Love The Way You Lie/ 2022年03月25日 05:14/ 0 赞/ 235 阅读

相关 H5小游戏【篇一】组词游戏

H5小游戏篇一组词游戏项目功能简介 1. 词库功能，项目文件里配有csv格式的中文常用词组词库，每次随机抽取词语进行游戏 2. 匹配消除功能，自动在词库中匹配

小咪咪/ 2022年03月07日 12:52/ 0 赞/ 248 阅读

相关 H5小游戏【篇一】组词游戏

H5小游戏篇一组词游戏项目功能简介 1. 词库功能，项目文件里配有csv格式的中文常用词组词库，每次随机抽取词语进行游戏 2. 匹配消除功能，自动在词库中匹配

今天药忘吃喽~/ 2022年03月07日 12:50/ 0 赞/ 225 阅读

相关记一次游戏H5开发经验

> 快到年终的时候做了一个以游戏形式展示的h5活动页，第一次尝试使用js写小游戏，很有趣的过程，很宝贵的经验。效果图直接上个效果的gif图，游戏的一小部分效果，录出

电玩女神/ 2021年09月18日 18:48/ 0 赞/ 501 阅读