我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
功能介绍
这是一间四室两厅两卫一厨的住宅，是掘金镇有名的学区房，小明一家住在这里，今天，小明的四个幼儿园同学来找小明玩，他们商量一番，决定玩躲猫猫。
即游戏人物：小明👨🎨、小绿👩🌾、小白👩🍳、小紫🤦♀️、小蓝🙆♂️
首先，你需要选择一个人物，双击人物即确认选择，人物选好后开始游戏。
第一局游戏由你来找人。
你蒙住自己的双眼，你需要问三声“藏好了么？”，才能开始找人。
他们可能躲在房间的各个角落，请在15s内把他们找出来吧！
代码块
代码说明
- users变量：保存五个游戏人物：小明👨🎨、小绿👩🌾、小白👩🍳、小紫🤦♀️、小蓝🙆♂️
- name 名字
- icon 头像
- id 唯一id
- step变量：整个游戏进行到哪一步由它来控制
- 0 选择人物阶段
- 1 需要询问第一声“藏好了么？”
- 2 需要询问第两声“藏好了么？”
- 3 需要询问第三声“藏好了么？”
- 4 开始寻找
- 5 找到一个
- 6 找到两个
- 7 找到三个
- 8 找到四个，游戏结束
- 双击人物确定选择代码：
<div
class="user_li"
v-for="(user, index) in users"
:key="index"
@dblclick="dblclickUser(user)"
v-show="step === 0 || user.id === youId"
>
<div class="user_icon">{{ user.icon }}</div>
<div class="user_name">{{ user.name }}</div>
</div>
dblclickUser(user, index) {
if (this.step === 0) {
this.youId = user.id;
this.youName = user.name;
this.step = 1;
let users = [...this.users];
users.splice(index, 1);
this.otherUsers = users;
}
},
- 询问的时候给游戏界面一个全黑的按钮，按钮代码：
<button
class="ask_btn"
v-show="step === 1 || step === 2 || step === 3"
@click="clickAskBtn"
>
<div>你是{{ youName }}，点击询问</div>
<div>藏好了么？（{{ step - 1 }}）</div>
<div>询问三次可开始找人</div>
</button>
clickAskBtn() {
this.step++;
},
按钮界面：
- 询问三次之后会提示【开始找人！】，然后是15s倒计时，15s后还没找到所有人即游戏失败，代码如下：
clickAskBtn() {
this.step++;
if (this.step === 3) {
this.maskShow = true;
this.maskText = "开始找人！";
setTimeout(() => {
this.maskShow = false;
this.othreHidden();
this.timer = setInterval(() => {
this.timeInterval--;
if (this.timeInterval === 0) {
clearInterval(this.timer);
this.maskShow = true
this.maskText = '时间到了，游戏结束！很遗憾，你没有找到所有人。'
}
}, 1000);
}, 1200);
}
},
失败界面：
- 游戏开始后，你需要转换你所在的房间，找能藏人的地方，点击你认为能藏人的地方，就可查看，如果有人躲在那里会提示【找到了某某！】，若是没人则提示其他信息，在60s内找到所有人即游戏胜利。
places变量：保存了所有可点击的地方
- roomId 房间id
- room 房间名字
- place 地点名字
- msg 没人提示
- can 能否躲藏
游戏开始其他人随机躲藏，只会躲在能躲藏的地方，代码如下：
othreHidden() {
let count = 0;
let nums = [0, 1, 2, 3, 4, 5, 6];
nums.sort(() => (Math.random() > 0.5 ? -1 : 1));
// 打乱顺序，以防都藏在前面的房间里
nums.forEach((num) => {
let el = this.places[num];
el.list.forEach((li) => {
if (li.can) {
if (Math.random() > 0.5 && count < 4) {
li.name =
(li.name ? li.name + "，" : "") + this.otherUsers[count].name;
count++;
}
}
});
});
// 如果count<3，说明还有人没藏好，直接被你找到了！
if (count < 3) {
let name = "";
for (let i = 3; i >= count; i--) {
name = (name ? name + "，" : "") + this.otherUsers[i].name;
}
this.maskShow = true;
this.maskText = name + "还没有躲好，直接被你找到了！";
setTimeout(() => {
this.maskShow = false;
}, 1000);
}
},
写在最后
以上就是所有了。
