小兔子找胡萝卜

介绍

本题需要实现一款小兔子找胡萝卜的小游戏。在遥远的兔子王国，有一只小灰兔已经长大了，需要独自去寻找食物。点击“开始游戏”后，在输入框中输入移动步数，点击移动按钮，小灰兔可以在指定形状的草坪上跳动一步或者两步，草坪里藏着炸弹和胡萝卜。如果小灰兔踩到炸弹，本次觅食行动失败；如果小灰兔踩到胡萝卜，本次觅食行动获胜。

准备

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

1
2
3
4
5
6
7
8
9
10
11
├── css
│   └── style.css
├── images
│   ├── bomb.png
│   ├── carrot.png
│   └── rabbit.png
├── js
│   ├── index.js
│   └── jquery-3.6.0.min.js
├── effect.gif
└── index.html

其中：

  • css/style.css 是样式文件。
  • images 是图片文件夹。
  • js/index.js 是实现游戏功能的 js 文件。
  • js/jquery-3.6.0.min.js 是 jQuery 文件。
  • effect.gif 是最终实现的效果动图。
  • index.html 是主页面。

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

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

在浏览器中预览 index.html 页面，点击开始游戏按钮没有任何反应，效果如下：

未实现效果的游戏界面

目标

请完善 js/index.js 文件。

完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

具体说明如下：

  • 点击开始游戏的按钮后，移动按钮显示，开始游戏按钮隐藏，在右侧输入框中输入步数后，点击移动按钮，小兔子可以在草坪上向前移动。
  • 输入框中只能输入 1 或者 2，输入其他数字，点击移动按钮后，小兔子不会移动，并且在按钮下方（.result 元素中）会显示一句话：“输入的步数不正确，请重新输入。”。
  • 点击移动按钮后，输入框中的值不会被清空。
  • 如果小兔子踩到第 13 块草坪上的炸弹，移动按钮隐藏，重置按钮显示，并且在重置按钮的下方（.result 元素中）会显示一句话：“哎呀！兔子踩到炸弹了，游戏结束！”。
  • 如果小兔子踩到第 24 块草坪上的胡萝卜，移动按钮隐藏，重置按钮显示，并且在重置按钮的下方（.result 元素中）会显示一句话：“小兔子吃到胡萝卜啦，游戏获胜！”。
  • 点击重置按钮小兔子回到游戏的初始化状态，并且输入框中的值和按钮下方的提示文字都会被清空。

规定

  • 请勿修改 js/index.js 文件外的任何内容。
  • 请严格按照上述要求来完成代码，按钮下方显示的文本内容，与具体说明里的内容保持一致，不要自定义，以免造成无法判题通过。
  • 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。

判分标准

  • 本题完全实现题目目标得满分，否则得 0 分。

总通过次数: 598 | 总提交次数: 636 | 通过率: 94%

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

题解

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
const startBtn = document.getElementById('start')
const moveBtn = document.getElementById('move')
const resetBtn = document.getElementById('reset')
const input = document.getElementById('input')
const resultP = document.getElementsByClassName('result')[0]
const lawns = document.getElementsByClassName('lawn')
let count = 0

// TODO：游戏开始
function start() {
  startBtn.style.display = 'none'
  moveBtn.style.display = 'block'
}
// TODO：重置游戏
function reset() {
    lawns[count].classList.remove('active')
    lawns[0].classList.add('active')
    count = 0
    resultP.innerText = ''
    startBtn.style.display = 'block'
    moveBtn.style.display = 'none'
    resetBtn.style.display = 'none'
    input.value = ''
}
// TODO：移动
function move() {
  const val = parseInt(input.value)
  console.log(input.value);
  if (val !== 1 && val !== 2) {
    resultP.innerText = '输入的步数不正确，请重新输入。'
  } else {
    resultP.innerText = ''
    lawns[count].classList.remove('active')
    lawns[count + val].classList.add('active')
    count+val <=23 ? count += val : count = 23
    if (count === 12) {
        moveBtn.style.display = 'none'
        resetBtn.style.display = 'block'
        resultP.innerText = '哎呀！兔子踩到炸弹了，游戏结束！'
    }
    if (count === 23) {
        moveBtn.style.display = 'none'
        resetBtn.style.display = 'block'
        resultP.innerText = '小兔子吃到胡萝卜啦，游戏获胜！'
    }
  }
}