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) { ...@@ -31,3 +31,12 @@ export function rememberSourceDetailAPI(data) {
data: 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 @@ ...@@ -6,7 +6,7 @@
<div v-for="(item, index) in configList" :key="index" :index="index" :item="item"> <div v-for="(item, index) in configList" :key="index" :index="index" :item="item">
<div <div
class="item" class="item"
:class="{active: (currentLevel === item.level)}" :class="{active: (currentInfo.level === item.level)}"
@click="changLevel(item)" @click="changLevel(item)"
>{{item.level_name}}</div> >{{item.level_name}}</div>
</div> </div>
...@@ -17,34 +17,34 @@ ...@@ -17,34 +17,34 @@
<div class="title">心有灵犀</div> <div class="title">心有灵犀</div>
<div class="box"> <div class="box">
<div class="time">{{count_time}}s</div> <div class="time">{{count_time}}s</div>
<div class="tab">{{tabList[tab_index]}}</div> <div class="tab">{{tabList[tab_index].value || ''}}</div>
<div class="btn" v-if="tab_index != this.tabList.length-1"> <div class="btn">
<el-button class="btn-ignore" @click="ignore">跳过</el-button> <el-button class="btn-ignore" @click="ignore">跳过</el-button>
<el-button type="primary" class="btn-start" @click="next">下一题</el-button> <el-button type="primary" class="btn-start" @click="next">下一题</el-button>
</div> </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> <el-button type="primary" class="btn-end" @click="end">结束本局</el-button>
</div> </div> -->
</div> </div>
</div> </div>
<div class="container" v-if="gameState === 'end'"> <div class="container" v-if="gameState === 'end'">
<div class="title">心有灵犀</div> <div class="title">心有灵犀</div>
<div class="data-list"> <div class="data-list">
<div class="data-item"> <div class="data-item">
答题数量： 正确数量：
<span>{{1}}</span> <span>{{result_info.correct_num}}</span>
</div> </div>
<div class="data-item"> <div class="data-item">
正确数量： 错误数量：
<span>{{1}}</span> <span>{{result_info.error_num}}</span>
</div> </div>
<div class="data-item"> <div class="data-item">
正确率： 正确率：
<span>{{0}}%</span> <span>{{(result_info.correct_num / tabList.length) * 100}}%</span>
</div> </div>
<div class="data-item"> <div class="data-item">
用时： 用时：
<span>{{0}}s</span> <span>{{result_info.time}}s</span>
</div> </div>
</div> </div>
<div class="btn"> <div class="btn">
...@@ -59,11 +59,16 @@ ...@@ -59,11 +59,16 @@
import BaseCasePage from "../../framework/core/baseCasePage"; import BaseCasePage from "../../framework/core/baseCasePage";
import CaseUtil from "../../framework/service/base/caseUtil"; import CaseUtil from "../../framework/service/base/caseUtil";
import { guessWordListAPI } from "@/api/recreation";
export default new BaseCasePage({ export default new BaseCasePage({
data() { data() {
return { return {
gameState: "not", gameState: "not",
currentLevel: 1, currentInfo: {
level: 1,
limit_remember_time: 300
},
configList: [ configList: [
{ {
level: 1, level: 1,
...@@ -76,36 +81,55 @@ export default new BaseCasePage({ ...@@ -76,36 +81,55 @@ export default new BaseCasePage({
limit_remember_time: 600 limit_remember_time: 600
} }
], ],
tabList: ["五湖四海", "天南地北", "称心如意", "得心应手", "无懈可击"], tabList: [],
result_info: {
error_num: 0,
correct_num: 0,
time: 0
},
tab_index: 0, tab_index: 0,
count_time: 10, count_time: 300,
timer: null timer: null
}; };
}, },
methods: { methods: {
clearTimer(){ getList() {
guessWordListAPI().then(res => {
if (res.error == 0 && res.data) {
this.tabList = res.data;
} else {
this.tabList = [];
}
});
},
clearData() {
clearInterval(this.timer); clearInterval(this.timer);
this.timer = null; this.timer = null;
this.count_time = 0; this.count_time = 300;
},
gameOver() {
this.$message({
type: "error",
content: "游戏结束!",
cb: () => {
this.end();
}
});
}, },
runCount() { runCount() {
this.timer = setInterval(() => { this.timer = setInterval(() => {
this.result_info.time++;
console.log(this.count_time) if (this.count_time > 0 && this.gameState === "progress") {
if ((this.count_time > 0 && this.gameState === 'progress' )) {
this.count_time = this.count_time - 1; this.count_time = this.count_time - 1;
} else if(this.$route.name === 'heart'){ } else if (
this.clearTimer(); this.$route.name === "heart" &&
this.$message({ this.gameState === "progress"
type: "error", ) {
content: "游戏结束!", this.clearData();
cb:()=>{ this.gameOver();
this.updateGameState("end");
}
});
return; return;
}else { } else {
this.clearTimer(); this.clearData();
} }
}, 1000); }, 1000);
}, },
...@@ -116,7 +140,8 @@ export default new BaseCasePage({ ...@@ -116,7 +140,8 @@ export default new BaseCasePage({
}); });
}, },
changLevel(item) { 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; this.count_time = item.limit_remember_time;
}, },
updateGameState(state) { updateGameState(state) {
...@@ -124,42 +149,49 @@ export default new BaseCasePage({ ...@@ -124,42 +149,49 @@ export default new BaseCasePage({
}, },
updateTabIndex() { updateTabIndex() {
if (this.tab_index >= this.tabList.length - 1) { if (this.tab_index >= this.tabList.length - 1) {
this.$message({ this.gameOver();
type: "error",
content: "到底啦!"
});
return; return;
} }
this.tab_index++; this.tab_index++;
}, },
start(){ start() {
this.updateGameState('progress'); this.tab_index = 0;
this.result_info = {
error_num: 0,
correct_num: 0,
time: 0
};
this.updateGameState("progress");
this.runCount(); this.runCount();
}, },
next() { next() {
this.result_info.correct_num += 1;
this.updateTabIndex(); this.updateTabIndex();
}, },
ignore() { ignore() {
this.result_info.error_num += 1;
this.updateTabIndex(); this.updateTabIndex();
}, },
end() { end() {
this.updateGameState("end"); this.updateGameState("end");
this.clearData();
}, },
backHome() { backHome() {
this.jump("/"); this.jump("/");
}, },
again() { again() {
this.jump("/activeBrain/heart"); this.updateGameState('not');
this.clearData();
} }
}, },
mounted() { mounted() {
console.log('mounted--------------------') this.getList();
}, },
beforeDestroy(){ beforeDestroy() {
console.log('beforeDestroy--------------------') console.log("beforeDestroy--------------------");
}, },
destroyed(){ destroyed() {
console.log('destroyed--------------------') console.log("destroyed--------------------");
} }
}); });
</script> </script>
......
src/views/pidRemember/myTrain.vue
...@@ -162,6 +162,7 @@ ...@@ -162,6 +162,7 @@
height: 80px; height: 80px;
border-radius: 40px; border-radius: 40px;
font-size: 32px; font-size: 32px;
margin: 20px 0 80px;
} }
.tab-area { .tab-area {
...@@ -203,7 +204,7 @@ ...@@ -203,7 +204,7 @@
} }
.write-area > .item { .write-area > .item {
width: 45%; width:50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
...@@ -217,7 +218,8 @@ ...@@ -217,7 +218,8 @@
.write-area > .item .input { .write-area > .item .input {
border: 0; border: 0;
outline: none; outline: none;
/*font-size: 36px;*/ font-size: 36px;
width: 242px;
border-bottom: 1px solid rgb(58, 58, 58); border-bottom: 1px solid rgb(58, 58, 58);
} }
</style> </style>
src/views/pidRemember/sysTrain.vue
...@@ -2,17 +2,40 @@ ...@@ -2,17 +2,40 @@
<div class="content"> <div class="content">
<div class="title"> <div class="title">
{{ {{
!startState ? '请记住图中地点桩位置及其顺序' : '请依次点击复位图中的地点桩' gameState==='not' ? '请记住图中地点桩位置及其顺序' : '请依次点击复位图中的地点桩'
}} }}
<div v-if="startState">结束训练</div> <div v-if="gameState === 'progress'" @click="gameOVer">结束训练</div>
</div> </div>
<div class="box"> <div class="box" @click="handleClick">
<img class="img" @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>
<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 :class="item.hit && 'active'" v-for="(item,index) in tabList" :key="index">{{item.value}}</div>
</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> </div>
</template> </template>
...@@ -25,6 +48,20 @@ export default new BaseCasePage({ ...@@ -25,6 +48,20 @@ export default new BaseCasePage({
data() { data() {
return { return {
level: 0, 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: [ tabList: [
{ value: 1, hit: false }, { value: 1, hit: false },
{ value: 2, hit: false }, { value: 2, hit: false },
...@@ -37,21 +74,64 @@ export default new BaseCasePage({ ...@@ -37,21 +74,64 @@ export default new BaseCasePage({
{ value: 9, hit: false }, { value: 9, hit: false },
{ value: 10, hit: false } { value: 10, hit: false }
], ],
startState: false fillList: [],
gameState: "not"
}; };
}, },
methods: { 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) { handleClick(e) {
if(!this.startState)return; if (this.gameState === "not") return;
let top = e.clientY + "px";
let left = e.clientX + "px";
let box = document.querySelector('.box');
let dot = document.createElement('p');
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};`; 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); box.appendChild(dot);
}, },
changLevel(level) { changLevel(level) {
...@@ -59,8 +139,12 @@ export default new BaseCasePage({ ...@@ -59,8 +139,12 @@ export default new BaseCasePage({
this.level = level; this.level = level;
} }
}, },
updateGameState(state) {
this.gameState = state;
},
start() { start() {
this.startState = true; this.fillList = [];
this.updateGameState("progress");
} }
}, },
mounted() {} mounted() {}
...@@ -71,12 +155,32 @@ export default new BaseCasePage({ ...@@ -71,12 +155,32 @@ export default new BaseCasePage({
.content { .content {
padding-top: 80px; 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 { .dot {
width:20px; width: 60px;
height: 20px; height: 60px;
background: red; line-height: 50px;
border-radius: 50%; text-align: center;
position: absolute; border: 6px solid #db3b21;
border-radius: 50%;
position: absolute;
color: #fff;
font-size: 24px;
} }
.title { .title {
...@@ -91,16 +195,19 @@ export default new BaseCasePage({ ...@@ -91,16 +195,19 @@ export default new BaseCasePage({
.title > div { .title > div {
color: rgb(238, 147, 147); color: rgb(238, 147, 147);
} }
.box >p{ .box {
width:20px; position: relative;
height: 20px; }
background: red; .box > p {
border-radius: 50%; width: 20px;
position: absolute; height: 20px;
background: red;
border-radius: 50%;
position: absolute;
} }
.box .img { .box .img {
width: 100%; width: 100%;
height: 580px; height: 500px;
background: #666; background: #666;
} }
.start { .start {
...@@ -135,4 +242,22 @@ export default new BaseCasePage({ ...@@ -135,4 +242,22 @@ export default new BaseCasePage({
background: rgba(244, 172, 185); background: rgba(244, 172, 185);
border: 0; 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> </style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!