H5 小游戏 篇一 组词游戏
项目功能简介
词库功能，项目文件里配有 csv 格式的中文常用词组词库，每次随机抽取词语进行游戏
匹配消除功能，自动在词库中匹配选中词语并进行消除
选中动画以及消除动画，均由 svg 生成爆炸动画
智能提醒系统，10 秒之后未作操作可提示单词
过关判定
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()
}
})
其他函数就不一一介绍了
上个图最后