H5小游戏 篇一 组词游戏

项目功能简介

词库功能，项目文件里配有csv格式的中文常用词组词库，每次随机抽取词语进行游戏

匹配消除功能，自动在词库中匹配选中词语并进行消除

选中动画以及消除动画，均由svg生成爆炸动画

智能提醒系统，10秒之后未作操作可提示单词

过关判定

## 核心代码展示链接描述

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

//判断如果数组还有可以取出的元素,以防下标越界

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

}

})

其他函数就不一一介绍了

上个图最后