萌宠小玩家

作者:江月迟迟

发表于:2024-12-10

字数统计:1562 字

预计阅读6分钟

介绍

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

准备

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

txt

├── css
├── effect.gif
├── images
├── index.html
└── js
    └── index.js

其中：

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

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

bash

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

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

初始效果

目标

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

完善 verifyName 方法，在点击穿衣服、不穿衣服、跟它玩、吃零食按钮（四个按钮均已绑定点击事件）时，如果宠物昵称输入框（id=nickname）的值不存在，则显示报错信息（id=vail_name）元素；如果该值存在，则将其赋给宠物实例（pet）的 name 属性，并隐藏报错信息（id=vail_name）元素。
如果宠物昵称存在，则点击穿衣服、不穿衣服、跟它玩、吃零食按钮（四个按钮均已绑定点击事件）均会记录不同的日志。现在需要完善 showLog 方法，实现宠物互动记录。showLog 方法的参数 record 表示要记录的互动消息。最多记录 10 条最新的互动消息，并将最新的互动消息记录在最上面。每一条日志都应添加到日志列表元素（id=list）中，DOM 结构如下：

html

// 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

题解

// 获取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`);
};

萌宠小玩家 ​

介绍 ​

准备 ​

目标 ​

规定 ​

判分标准 ​

题解 ​

萌宠小玩家

介绍

准备

目标

规定

判分标准

题解