萌宠小玩家

介绍

萌宠小玩家是一款宠物养成类游戏，玩家在游戏中，可以通过给宠物换衣服、跟它玩、吃零食跟宠物进行互动交流。在萌宠小玩家中，玩家可以体验到养成宠物的乐趣，同时也可以结交新朋友，分享自己的养宠心得，是一款适合所有年龄段玩家的休闲娱乐游戏。

准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

1
2
3
4
5
6
├── css
├── effect.gif
├── images
├── index.html
└── js
    └── index.js

其中：

  • index.html 是主页面。
  • css 是存放项目样式的文件夹。
  • images 是存放项目图片的文件夹。
  • effect.gif 是项目完成后的效果图。
  • js/index.js 是需要补充代码的 js 文件。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

1
2
cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/18421/pet.zip && unzip pet.zip && rm pet.zip

在浏览器中预览 index.html 页面效果如下：

初始效果

目标

请在 js/index.js 文件中补全代码，具体需求如下：

  1. 完善 verifyName 方法，在点击穿衣服、不穿衣服、跟它玩、吃零食按钮（四个按钮均已绑定点击事件）时，如果宠物昵称输入框（id=nickname）的值不存在，则显示报错信息（id=vail_name）元素；如果该值存在，则将其赋给宠物实例（pet）的 name 属性，并隐藏报错信息（id=vail_name）元素。
  2. 如果宠物昵称存在，则点击穿衣服、不穿衣服、跟它玩、吃零食按钮（四个按钮均已绑定点击事件）均会记录不同的日志。现在需要完善 showLog 方法，实现宠物互动记录。showLog 方法的参数 record 表示要记录的互动消息。最多记录 10 条最新的互动消息，并将最新的互动消息记录在最上面。每一条日志都应添加到日志列表元素（id=list）中，DOM 结构如下：
1
2
3
4
5
6
// DOM 结构必须按照此写法
<div id="list"> 
 <!-- 最新的互动在最上面且只能记录10条 -->
 <div>第 2 次互动：你喂小蓝吃了零食，体重 +1kg</div> 
 <div>第 1 次互动：你喂小蓝吃了零食，体重 +1kg</div>
</div>

完成后效果如下：

完成效果

规定

  • 请按照给出的步骤操作，切勿修改默认提供的文件名称、文件夹路径等。
  • 满足需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动检测。

判分标准

  • 完成目标 1，得 3 分。
  • 完成目标 2，得 2 分。

总通过次数: 1 | 总提交次数: 1 | 通过率: 100%

难度: 中等 标签: 2023, 国赛, Web 前端, JavaScript, ES6

题解

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
// 获取DOM元素对象
const nickname = document.getElementById("nickname"); //宠物昵称
const addWeight = document.getElementById("addWeight"); // 吃零食按钮
const loseWeight = document.getElementById("loseWeight"); // 跟它玩按钮
const weightEle = document.getElementById("weight"); // 体重
const dress = document.getElementById("dress"); // 穿衣服按钮
const undress = document.getElementById("undress"); // 不穿衣服按钮
const list = document.getElementById("list"); // 行动记录
const vail_name = document.getElementById("vail_name"); // 无昵称提示
const clothes = document.querySelector("input[type=radio]:checked"); // 被选中的 radio
const avatar = document.querySelector(".left"); // 狮子
const love = document.getElementById("love"); // 心情指数元素
let initLove = Number(love.innerText); // 初始化心情指数数字

// 父类狮子
class Lion {
  constructor(weight) {
    this.type = "狮子";
    this.weight = weight;
  }
  // 体重增加
  addWeight() {
    return nickname.value ? ++this.weight : this.weight;
  }
  // 体重减轻
  loseWeight() {
    return nickname.value
      ? this.weight > 30
        ? --this.weight
        : (this.weight = 30)
      : this.weight;
  }
}
// 子类
class MyPet extends Lion {
  constructor(name, weight) {
    super(weight);
    this.name = name;
    this.weight = weight;
    weightEle.innerText = this.weight; // 狮子的体重
    this.logList = []; // 互动日志记录
  }
  // 验证宠物名称，如果存在则把名称赋值给当前实例 
  verifyName() {
    // TODO:  待补充代码 
    // 昵称不存在，显示报错信息
    if (!nickname.value || nickname.value.trim() === '') {
      vail_name.style.display = 'block'
    } else {
      vail_name.style.display = 'none'
      // 如果该值存在，则将其赋给宠物实例（pet）的 name 属性
      pet.name = nickname.value
    }

  }
  // 穿衣服
  dress(record) {
    if (!this.name) {
      return;
    }
    console.log(this.name);
    undress.classList.remove("active");
    avatar.classList.remove("sk1");
    this.showLog(record);
  }
  // 脱衣服
  undress(record) {
    if (!this.name) {
      return;
    }
    dress.classList.remove("active");
    avatar.classList.add("sk1");
    this.showLog(record);
  }
  // 互动吃零食或者跟他玩
  interact(record) {
    if (!this.name) {
      return;
    }
    this.showLog(record);
  }
  // 记录日志
  showLog(record) {
    // TODO:  待补充代码 
    console.log(record);
    console.log(list.childNodes);
    console.log(list.children);
    if (list.childElementCount < 10) {
      list.innerHTML = `<div>${record}</div>` + list.innerHTML
    } else {
      list.removeChild(list.lastChild)
      list.innerHTML = `<div>${record}</div>` + list.innerHTML
    }
  }
}

// 实例化一个宠物小狮子
const pet = new MyPet(nickname.value, 60);

let n = 0; // 记录是第几次互动

// 点击穿衣服
dress.onclick = function (e) {
  e.preventDefault();
  pet.verifyName();
  pet.name ? n++ : void 0;
  pet.dress(`第 ${n} 次互动：天气冷了，你给${pet.name}穿了衣服`);
};

// 点击不穿衣服
undress.onclick = function (e) {
  e.preventDefault();
  pet.verifyName();
  pet.name ? n++ : void 0;
  pet.undress(`第 ${n} 次互动：天气热了，你给${pet.name}脱了衣服`);
};

// 吃零食增加当前体重
addWeight.onclick = (e) => {
  e.preventDefault();
  weightEle.innerText = pet.addWeight();
  pet.verifyName();
  pet.name ? n++ : void 0;
  pet.interact(`第 ${n} 次互动：你喂${pet.name}吃了零食，体重 +1kg`);
};

// 跟他玩减轻当前体重
loseWeight.onclick = (e) => {
  e.preventDefault();
  pet.verifyName();
  if (pet.name) {
     n++;
     initLove = initLove + 1;
     love.innerText = initLove;
  }
  pet.interact(`第 ${n} 次互动：${pet.name}跟主人愉快的玩耍，心情指数加1`);
};