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()
}
})其他函数就不逐一引见了
上个图末了
