-
Notifications
You must be signed in to change notification settings - Fork 0
/
memory.html
315 lines (304 loc) · 11.7 KB
/
memory.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>注意力游戏</title>
<style>
* { margin: 0; padding: 0; }
li,ul { list-style: none; }
.wrap {
width: 724px;
height: 362px;
margin: 50px auto;
box-sizing: border-box;
}
.wrap h3 {
text-align: center;
line-height: 48px;
}
#main {
width: 100%;
height: 100%;
display: flex;
flex-flow: row;
box-sizing: border-box;
}
.main {
flex: 0 0 50%;
display: flex;
flex-flow: wrap;
box-sizing: border-box;
}
.box {
background-color: #fff;
border: 1px solid #ddd;
box-sizing: border-box;
}
.box p {
width: 70px;
line-height: 71px;
text-align: center;
}
.control {
width: 100%;
margin-top: 20px;
display: flex;
flex-flow: row;
justify-content: space-between;
}
.right {
background-color: #066;
color: #fff;
}
.top {
flex: 0 0 50%;
padding: 0 15px;
overflow: scroll;
}
.top li {
display: flex;
flex-flow: row;
justify-content: space-around;
border-bottom: 1px solid #ddd;
margin-bottom: 8px;
}
.top li span {
display: block;
flex: 1;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
<h3>15秒注意力大考验</h3>
<div id="main">
<div class="main">
<box v-for="(item, index) in items" :key="index" :num = "item" :times = "times" :rest = "rest" :add-times.sync = 'times' :time-count.sync = 'timeCount'></box>
<div class="control">
<button @click="startGame">开始游戏</button>
<!-- <button @click="stopGame">停止游戏</button> -->
<p>用时：{{time}} 秒</p>
</div>
</div>
<div class="top">
<h3>注意力排行榜</h3>
<ul>
<li>
<span>排名</span>
<span>姓名</span>
<span>成绩</span>
</li>
<li v-for="(player, k) in players" :key="k">
<span>{{ k+1 }}</span>
<span>{{ player.name }}</span>
<span>{{ player.score }} 秒</span>
</li>
</ul>
</div>
</div>
</div>
<template id="box">
<li class="box" @click="clickBox()" :class="{right: isRight}" :data-id=num.id>
<p>{{num.val}}</p>
</li>
</template>
<template>
<div></div>
</template>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script type="module">
Vue.prototype.$ajax = axios;
// 方格组件
Vue.component('box', {
template: '#box',
props: ['num', 'times', 'rest'],
data() {
return {
isRight: false,
isNum: 0
}
},
methods: {
/*
** @desc: clickBox 点击方块的函数，点击正确的方块并计数，通过正确点击次数与方块数字相比较，是否按顺序点击方块，如果是，add-times加1次，并更改方块样式。如果所有方块都点完，则更改time-count的值。同时判断是否开始游戏，如果没有开始游戏则跳出提示
** @method: vm.$emit(event, newval)
** @param:
** @return:
** @key: this.$emit 子组件更新父组件的方法，通过在父组件中绑定子组件:add-times.sync='times'
*/
clickBox: function() {
let t = this.times + 1
if(this.num.val == this.times && this.rest == true) {
this.isRight = true;
this.$emit('update:add-times', t)
if(t == 26){
this.$emit('update:time-count', true)
}
}else if(this.rest == false) {
alert('请开始游戏');
}
}
},
watch: {
/*
** @desc: rest 监听rest变量的值，来判断游戏是否重新开始，重置方块所有的样式
** @method:
** @param:
** @return:
*/
'rest': function(newnum) {
this.isRight = false
}
}
})
var v = new Vue({
el: '#main',
data: {
items: [],
times: 1, // 正确点击次数
rest: false, // 重置标识
time: 0, // 计时
timeSend: null,
timeCount: false, // 方块点完标识
players: JSON.parse(localStorage.getItem('list'))
},
// TODO 应当增加一个载入网页时，导入成绩的方法
created: function() {
// 创建方格
this.buildBox();
// 开始计时
// this.totalTime();
},
watch: {
/*
** @desc: timeCount 监听方块是不是点完25块
** @method: clearInterval(intervalID) 取消设置的计数任务
** @param:
** @return:
*/
'timeCount': function(res) {
if(res){
clearInterval(this.timeSend)
if(this.time > 20){
alert("一共花费：" + this.time + "秒!你的记忆力相当于一头猪！")
}else if(this.time > 15 && this.time <= 20){
alert("一共花费：" + this.time + "秒!你的记忆力也就比一头猪强！")
}else if(this.time > 13 && this.time <= 15) {
alert("一共花费：" + this.time + "秒!你的记忆力处于普通人范围！")
}else if(this.time > 10 && this.time <= 13) {
alert("一共花费：" + this.time + "秒!很棒，你的记忆力比一般人强！")
}else if(this.time < 10) {
alert("一共花费：" + this.time + "秒!卧槽，你还是人么！")
}
this.timeCount = false
let name = prompt('输入您的姓名', '')
this.upload(name, this.time)
}
}
},
methods: {
/*
** @desc: buildBox 创建25块方格
** @method: Math.floor(number) 向下取整 Math.random() 返回0-1之间包含0，不包含1的浮点数 isRepeat(data, array) 判断二维数组中是否有data的重复数据
** @param:
** @return: {Array} arr 返回方格集合
*/
buildBox: function() {
let arr = new Array();
let i = 0
while ( i < 25 ) {
let data = Math.floor(Math.random()*25 + 1)
if (this.isRepeat(data, arr)) {
arr[i] = {
val: data,
id: i
}
i++
}
}
this.items = arr;
},
/*
** @desc: startGame 重新开始游戏；首先清空计时时间，然后随机重新生成数字排序，重置时间、正确点击数，并重新开始计时
** @method: clearInterval(intervalID) 取消计时任务 totalTime() 计时函数
** @param:
** @key: 通过改变rest的值来重置方格的背景样式
*/
startGame: function() {
clearInterval(this.timeSend)
let arr = new Array();
let i = 0
while ( i < 25 ) {
let data = Math.floor(Math.random()*25 + 1)
if (this.isRepeat(data, arr)) {
arr[i] = {
val: data,
id: i
}
i++
}
}
this.items = arr;
this.rest = !this.rest
this.times = 1
this.time = 0
this.totalTime();
},
stopGame: function() {
clearInterval(this.timeSend)
},
/*
** @desc: isRepeat 检测元素是否在数组中存在,如果存在返回false，如果不存在,返回true
** @param: element 要检测的元素，arr 元素所在的数组
** @method:
** @return: {bool} true or false
*/
isRepeat: function(element, arr) {
for (let j = 0; j < arr.length; j++) {
if (arr[j]['val'] === element) {
return false;
}
}
return true;
},
/*
** @desc: totalTime 计时函数
** @method: setInterval(code, millisec) code 调用代码或要执行的代码串 millisec 周期性执行或调用code之间的时间间隔，以毫秒计
** @param:
** @return: this.time
*/
totalTime: function(){
this.timeSend = setInterval(() => {
this.time++
}, 1000)
},
/*
** @desc: upload 上传名字和成绩
** @method:
** @param: {string} name 名字, {number} seconds 成绩
** @return:
** @key: 这里用到了VUE的AJAX，需要引入AXIOS，在头部首先全局定义了$ajax = axios
*/
upload: function(name, seconds) {
let params = new URLSearchParams()
let that = this;
params.append('name', name)
params.append('seconds', seconds)
this.$ajax({
method: 'post',
url: 'top.php',
data: params
}).then( (res) => {
that.players = res.data
localStorage.setItem('list', JSON.stringify(res.data));
})
}
}
})
</script>
</body>
</html>