每日一题：贪吃蛇

介绍

贪吃蛇作为一款经典休闲益智类游戏，通过控制蛇头方向吃蛋，从而使得蛇变得越来越长。在 90 年代拥有一部可以玩贪吃蛇的手机可以玩上一整天，如今可玩的游戏越来越多，但是当时玩一天的快乐再也找不回了。

准备

本题已经内置了初始代码，打开实验环境，目录结构如下：

1
2
3
4
├── css
├── index.html
└── js
    └── index.js

其中:

  • css 是存放项目样式的文件夹。
  • index.html 是主页面。
  • js/index.js 是需要补充代码的 js 文件。

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

1
2
cd /home/project
file="snake" && wget "https://labfile.oss.aliyuncs.com/courses/19791/${file}.zip" && unzip "${file}.zip" && rm "${file}.zip"

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：

初始效果

目标

找到 index.js 文件中的 nextStep 函数,完成函数中的 TODO 部分：

  1. 根据当前蛇的移动方向（this.direction）以及蛇身块的大小（this.size），计算新的蛇头位置，更新蛇身坐标数组 （this.snakeBody），即可实现蛇的正确移动。蛇的移动和增加蛇的长度代码已提供。

蛇身坐标示例如下：

1
[{ left: 2, top: 0 }, { left: 1, top: 0 }, { left: 0, top: 0 }]`

蛇的身体是由多个坐标点组成的，每个坐标点包含了 left 和 top 属性，分别表示在游戏界面中的水平和垂直位置，第一个坐标表示当前蛇头的位置。

完成后，效果如下：

完成效果

规定

  • 请勿修改已经提供的代码，以免造成判题无法通过。
  • 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
  • 满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分

判分标准

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

总通过次数: 279 | 总提交次数: 330 | 通过率: 84.5%

难度: 困难 标签: 2023, 省模拟赛, 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
// 移动蛇的头部
nextStep() {
  // TODO：待补充代码  
  const newHead = {
    top: this.snakeBody[0].top,
    left: this.snakeBody[0].left
  }
  switch (this.direction) {
    case 'right':
        newHead.left += this.size
        break;
    case 'left':
        newHead.left -= this.size
        break;
    case 'up':
        newHead.top -= this.size
        break;
    case 'down':
        newHead.top += this.size
        break;
  
    default:
        break;
  }
  this.snakeBody.unshift(newHead)
  this.snakeBody.pop()
}