H5 games a group of words game
Introduction to Project Functions
- Thesaurus function, the project file is equipped with csv format Chinese commonly used phrase thesaurus, each randomly selected words for the game
- The matching elimination function automatically matches the selected words in the word bank and eliminates them.
- Both the selected animation and the eliminated animation are generated by svg
- Intelligent reminder system, words can be prompted after 10 seconds without operation
- Pass judgment
- 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;}
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