Skip to content

yangchao / brains-h5

Go to a project
Commit de67e660 by yuhac
Options

update

1 parent ae2cf950
Inline Side-by-side
Showing with 242 additions and 73 deletions
src/api/recreation.js
......@@ -31,3 +31,12 @@ export function rememberSourceDetailAPI(data) {
data: data,
})
}
//
export function guessWordListAPI(data) {
return request({
url: 'brain/guessWord/list',
data: data,
})
}
\ No newline at end of file
src/views/activeBrain/heart.vue
......@@ -6,7 +6,7 @@
<div v-for="(item, index) in configList" :key="index" :index="index" :item="item">
<div
class="item"
:class="{active: (currentLevel === item.level)}"
:class="{active: (currentInfo.level === item.level)}"
@click="changLevel(item)"
>{{item.level_name}}</div>
</div>
......@@ -17,34 +17,34 @@
<div class="title">心有灵犀</div>
<div class="box">
<div class="time">{{count_time}}s</div>
<div class="tab">{{tabList[tab_index]}}</div>
<div class="btn" v-if="tab_index != this.tabList.length-1">
<div class="tab">{{tabList[tab_index].value || ''}}</div>
<div class="btn">
<el-button class="btn-ignore" @click="ignore">跳过</el-button>
<el-button type="primary" class="btn-start" @click="next">下一题</el-button>
</div>
<div class="btn" v-if="tab_index == this.tabList.length-1">
<!-- <div class="btn" v-if="tab_index == this.tabList.length-1">
<el-button type="primary" class="btn-end" @click="end">结束本局</el-button>
</div>
</div> -->
</div>
</div>
<div class="container" v-if="gameState === 'end'">
<div class="title">心有灵犀</div>
<div class="data-list">
<div class="data-item">
答题数量：
<span>{{1}}</span>
正确数量：
<span>{{result_info.correct_num}}</span>
</div>
<div class="data-item">
正确数量：
<span>{{1}}</span>
错误数量：
<span>{{result_info.error_num}}</span>
</div>
<div class="data-item">
正确率：
<span>{{0}}%</span>
<span>{{(result_info.correct_num / tabList.length) * 100}}%</span>
</div>
<div class="data-item">
用时：
<span>{{0}}s</span>
<span>{{result_info.time}}s</span>
</div>
</div>
<div class="btn">
......@@ -59,11 +59,16 @@
import BaseCasePage from "../../framework/core/baseCasePage";
import CaseUtil from "../../framework/service/base/caseUtil";
import { guessWordListAPI } from "@/api/recreation";
export default new BaseCasePage({
data() {
return {
gameState: "not",
currentLevel: 1,
currentInfo: {
level: 1,
limit_remember_time: 300
},
configList: [
{
level: 1,
......@@ -76,36 +81,55 @@ export default new BaseCasePage({
limit_remember_time: 600
}
],
tabList: ["五湖四海", "天南地北", "称心如意", "得心应手", "无懈可击"],
tabList: [],
result_info: {
error_num: 0,
correct_num: 0,
time: 0
},
tab_index: 0,
count_time: 10,
count_time: 300,
timer: null
};
},
methods: {
clearTimer(){
getList() {
guessWordListAPI().then(res => {
if (res.error == 0 && res.data) {
this.tabList = res.data;
} else {
this.tabList = [];
}
});
},
clearData() {
clearInterval(this.timer);
this.timer = null;
this.count_time = 0;
this.timer = null;
this.count_time = 300;
},
gameOver() {
this.$message({
type: "error",
content: "游戏结束!",
cb: () => {
this.end();
}
});
},
runCount() {
this.timer = setInterval(() => {
console.log(this.count_time)
if ((this.count_time > 0 && this.gameState === 'progress' )) {
this.result_info.time++;
if (this.count_time > 0 && this.gameState === "progress") {
this.count_time = this.count_time - 1;
} else if(this.$route.name === 'heart'){
this.clearTimer();
this.$message({
type: "error",
content: "游戏结束!",
cb:()=>{
this.updateGameState("end");
}
});
} else if (
this.$route.name === "heart" &&
this.gameState === "progress"
) {
this.clearData();
this.gameOver();
return;
}else {
this.clearTimer();
} else {
this.clearData();
}
}, 1000);
},
......@@ -116,7 +140,8 @@ export default new BaseCasePage({
});
},
changLevel(item) {
this.currentLevel = item.level;
this.currentInfo.level = item.level;
this.currentInfo.limit_remember_time = item.limit_remember_time;
this.count_time = item.limit_remember_time;
},
updateGameState(state) {
......@@ -124,42 +149,49 @@ export default new BaseCasePage({
},
updateTabIndex() {
if (this.tab_index >= this.tabList.length - 1) {
this.$message({
type: "error",
content: "到底啦!"
});
this.gameOver();
return;
}
this.tab_index++;
},
start(){
this.updateGameState('progress');
start() {
this.tab_index = 0;
this.result_info = {
error_num: 0,
correct_num: 0,
time: 0
};
this.updateGameState("progress");
this.runCount();
},
next() {
this.result_info.correct_num += 1;
this.updateTabIndex();
},
ignore() {
this.result_info.error_num += 1;
this.updateTabIndex();
},
end() {
this.updateGameState("end");
this.clearData();
},
backHome() {
this.jump("/");
},
again() {
this.jump("/activeBrain/heart");
this.updateGameState('not');
this.clearData();
}
},
mounted() {
console.log('mounted--------------------')
this.getList();
},
beforeDestroy(){
console.log('beforeDestroy--------------------')
beforeDestroy() {
console.log("beforeDestroy--------------------");
},
destroyed(){
console.log('destroyed--------------------')
destroyed() {
console.log("destroyed--------------------");
}
});
</script>
......
src/views/pidRemember/myTrain.vue
......@@ -162,6 +162,7 @@
height: 80px;
border-radius: 40px;
font-size: 32px;
margin: 20px 0 80px;
}
.tab-area {
......@@ -203,7 +204,7 @@
}
.write-area > .item {
width: 45%;
width:50%;
display: flex;
align-items: center;
justify-content: center;
......@@ -217,7 +218,8 @@
.write-area > .item .input {
border: 0;
outline: none;
/*font-size: 36px;*/
font-size: 36px;
width: 242px;
border-bottom: 1px solid rgb(58, 58, 58);
}
</style>
src/views/pidRemember/sysTrain.vue
......@@ -2,17 +2,40 @@
<div class="content">
<div class="title">
{{
!startState ? '请记住图中地点桩位置及其顺序' : '请依次点击复位图中的地点桩'
gameState==='not' ? '请记住图中地点桩位置及其顺序' : '请依次点击复位图中的地点桩'
}}
<div v-if="startState">结束训练</div>
<div v-if="gameState === 'progress'" @click="gameOVer">结束训练</div>
</div>
<div class="box">
<img class="img" @click="handleClick" />
<div class="box" @click="handleClick">
<div class="dot-area" v-if="gameState === 'not' || gameState === 'end'">
<div
class="dot"
v-for="(item,index) in dotList"
:key="index"
:style="{left:item.x+'px',top:item.y+'px'}"
>{{item.label}}</div>
</div>
<img class="img" src="http://static.ledouya.com/20200224/141319_1582524951911.jpg" />
</div>
<div class="tab-area" v-if="startState">
<div class="tab-area" v-if="gameState === 'progress'">
<div :class="item.hit && 'active'" v-for="(item,index) in tabList" :key="index">{{item.value}}</div>
</div>
<el-button v-if="!startState" type="primary" class="start" @click="start">记忆完成</el-button>
<el-button v-if="gameState === 'not'" type="primary" class="start" @click="start">记忆完成</el-button>
<div class="container" v-if="gameState === 'end'">
<div class="data-list">
<div class="data-item">
勾选数量：
<span>{{fillList.length}}</span>
</div>
<div class="data-item">
正确数量：
<span>{{correct_num}}</span>
</div>
</div>
<div class="btn">
<el-button type="primary" class="btn-ignore" @click="backHome">返回首页</el-button>
</div>
</div>
</div>
</template>
......@@ -25,6 +48,20 @@ export default new BaseCasePage({
data() {
return {
level: 0,
dotList: [
{ x: 24, y: 180, label: 1 },
{ x: 110, y: 120, label: 2 },
{ x: 122, y: 64, label: 3 },
{ x: 162, y: 24, label: 4 },
{ x: 230, y: 180, label: 5 },
{ x: 292, y: 104, label: 6 },
{ x: 300, y: 40, label: 7 },
{ x: 180, y: 140, label: 8 },
{ x: 240, y: 60, label: 9 },
{ x: 20, y: 20, label: 10 }
],
correct_num: 0,//正确数量
offset_num:10,//偏移值6个像素
tabList: [
{ value: 1, hit: false },
{ value: 2, hit: false },
......@@ -37,21 +74,64 @@ export default new BaseCasePage({
{ value: 9, hit: false },
{ value: 10, hit: false }
],
startState: false
fillList: [],
gameState: "not"
};
},
methods: {
backHome() {
this.$router.push("/");
},
result() {
this.fillList.map((num, index) => {
let dot = this.dotList[index];
if (dot) {
console.log('x:--',dot.x- this.offset_num,num.x,dot.x+ this.offset_num,'正确坐标：'+dot.x)
console.log('y:--',dot.y- this.offset_num,num.y,dot.y+ this.offset_num,'正确坐标：'+dot.y)
if ((dot.x - this.offset_num < num.x && num.x < dot.x + this.offset_num) && (dot.y - this.offset_num < num.y && num.y < dot.y + this.offset_num)) {
this.correct_num +=1;
} else {
console.log("not--");
}
}
});
},
gameOVer() {
this.$message({
type: "error",
content: "游戏结束",
cb: () => {
this.result();
let childList = document.querySelectorAll(".circle");
for (var i = 0, len = childList.length; i < len; i++) {
document.querySelector(".box").removeChild(childList[i]);
}
this.updateGameState("end");
}
});
},
handleClick(e) {
if(!this.startState)return;
let top = e.clientY + "px";
let left = e.clientX + "px";
let box = document.querySelector('.box');
let dot = document.createElement('p');
if (this.gameState === "not") return;
if (this.fillList.length === 10) {
this.gameOVer();
return;
}
this.fillList.push({
x: e.offsetX,
y: e.offsetY,
label: this.fillList.length + 1
});
this.tabList[this.fillList.length - 1].hit = true;
console.log(e)
let top = e.offsetY + "px";
let left = e.offsetX + "px";
let box = document.querySelector(".box");
let dot = document.createElement("p");
let styleStr = `width:30px;height:30px;border: 2px solid red;border-radius: 50%;position: absolute;left:${left};top:${top};`;
dot.classList.add('dot')
dot.classList.add("circle");
dot.style.cssText =styleStr;
dot.style.cssText = styleStr;
box.appendChild(dot);
},
changLevel(level) {
......@@ -59,8 +139,12 @@ export default new BaseCasePage({
this.level = level;
}
},
updateGameState(state) {
this.gameState = state;
},
start() {
this.startState = true;
this.fillList = [];
this.updateGameState("progress");
}
},
mounted() {}
......@@ -71,12 +155,32 @@ export default new BaseCasePage({
.content {
padding-top: 80px;
}
.data-list {
margin-bottom: 60px;
display: flex;
justify-content: space-around;
}
.data-item {
text-align: center;
margin-top: 30px;
font-size: 26px;
color: #333;
}
.data-item span {
color: #1f72ff;
}
.dot {
width:20px;
height: 20px;
background: red;
border-radius: 50%;
position: absolute;
width: 60px;
height: 60px;
line-height: 50px;
text-align: center;
border: 6px solid #db3b21;
border-radius: 50%;
position: absolute;
color: #fff;
font-size: 24px;
}
.title {
......@@ -91,16 +195,19 @@ export default new BaseCasePage({
.title > div {
color: rgb(238, 147, 147);
}
.box >p{
width:20px;
height: 20px;
background: red;
border-radius: 50%;
position: absolute;
.box {
position: relative;
}
.box > p {
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
position: absolute;
}
.box .img {
width: 100%;
height: 580px;
height: 500px;
background: #666;
}
.start {
......@@ -135,4 +242,22 @@ export default new BaseCasePage({
background: rgba(244, 172, 185);
border: 0;
}
.dot-area {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
.btn {
display: flex;
align-items: center;
justify-content: center;
}
.btn-ignore {
width: 300px;
height: 80px;
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!