2024年前端最全贪吃蛇——面向对象版，看这篇足矣了

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

export default class Map {

constructor(el, rect = 10) {

this.el = el;

this.rect = rect;

this.data = [];

//行列数 = 总宽高 / 行列的大小

this.rows = Math.ceil(Map.getStyle(el, “height”) / rect);

this.cells = Math.ceil(Map.getStyle(el, “width”) / rect);

//总宽高 = 行列数 * 行列的大小

Map.setStyle(el, “height”, this.rows * rect);

Map.setStyle(el, “width”, this.cells * rect);

}

//获取到宽高

static getStyle(el, attr) {

return parseFloat(getComputedStyle(el)[attr])

}

//根据行列的大小重新赋值总宽高

static setStyle(el, attr, val) {

el.style[attr] = val + “px”;

}

//设置数据

setData(newData) {

this.data = this.data.concat(newData);

}

//清除数据

clearData() {

this.data.length = 0;

}

//判断指定位置，是否包含数据

include({ x, y }) {

return this.data.some(item => (item.x == x && item.y == y))

}

//通过数据渲染页面

render() {

this.el.innerHTML = this.data.map(item => {

return `<span style="position:absolute; left:$item.x\ast this.rectpx;top:${item.y * this.rect}px;

width:$this.rectpx;height:${this.rect}px; background:${item.color};">`

}).join(“”);

}

}

食物类

=============================================================

export default class Food {

constructor(cells, rows, colors = [“yellow”, “orange”, “blue”, “pink”]) {

this.cells = cells;

this.rows = rows;

this.data = null;

this.colors = colors;

this.create();

}

//创建食物

create() {

let x = Math.floor(Math.random() * this.cells);

let y = Math.floor(Math.random() * this.rows);

let color = this.colors[parseInt(Math.random() * this.colors.length)];

this.data = { x, y, color };

}

}

蛇类

============================================================

export default class Snake {

constructor() { //先传入地图类和食物类，继承里边的方法

this.data = [

{ x: 6, y: 4, color: “red” },

{ x: 6, y: 3, color: “blue” },

{ x: 6, y: 2, color: “blue” },

{ x: 6, y: 1, color: “blue” }

];

this.direction = “right”; //默认的方向

this.lastData = {};

}

//移动

move() {

let i = this.data.length - 1; //声明一个变量，是他的值为this.data这个数组的长度

//存储蛇尾巴的位置与颜色

this.lastData = {

x: this.data[i].x,

y: this.data[i].y,

color: this.data[i].color

}

//让后边每一格走到前一格的位置上

for (i; i > 0; i–) {

this.data[i].x = this.data[i - 1].x;

this.data[i].y = this.data[i - 1].y;

}

//根据方向，移动蛇头

switch (this.direction) {

case “left”:

this.data[0].x–;

break;

case “right”:

this.data[0].x++;

break;

case “top”:

this.data[0].y–;

break;

case “bottom”:

this.data[0].y++;

break;

}

}

//安全判断

changeDir(dir) {

//当方向是左或者右时

if (this.direction === “left” || this.direction === “right”) {

//且 传入的方向为左或者右

if (dir === “left” || dir === “right”) {

//不能修改方向

return false;

}

}

//当方向是上或者下时

if (this.direction === “top” || this.direction === “bottom”) {

//且 传入的方向为上或者下

if (dir === “top” || dir === “bottom”) {

//不能修改方向

return false;

}

}

//经过安全判断后，把新方向赋值给当前方向

this.direction = dir;

return true;

}

//吃到食物后，蛇应该变大一格

eatFood() {

this.data.push(this.lastData)

}

}

Evnet事件池

==================================================================

export default class Event {

events = {};

on(eventName, fn) {

if (!this.events[eventName]) {

this.events[eventName] = [];

}

if (!this.events[eventName].includes(fn)) {

this.events[eventName].push(fn);

}

}

off(eventName, fn) {

if (!this.events[eventName]) {

return

}

this.events[eventName] = this.events[eventName].filter(item => item != fn);

}

dispatch(eventName, …arg) {

if (!this.events[eventName]) {

return;

}

this.events[eventName].forEach(item => {

item.call(this, …arg)

});

}

}

游戏类

=============================================================

import Map from “./map.js”;

import Event from “./event.js”;

import Snake from “./snake.js”;

import Food from “./food.js”;

export default class Game extends Event {

constructor(el, rect) {

super();

this.map = new Map(el, rect);

this.food = new Food(this.map.cells, this.map.rows);

this.snake = new Snake(this.map);

this.map.setData(this.snake.data);

this.createFood();

this.render(); //绘制初始化地图

this.timer = null; //定时器

this.interval = 200; //定时器时间设置为一个变量，可以改变速率

this.keyDown = this.keyDown.bind(this); //保存this

this.grade = 0; //保存分数

this.control(); //调用控制器（可以没有）

}

//将食物渲染到地图中

createFood() {

this.food.create();

if (this.map.include(this.food.data)) {

this.createFood();

}

this.map.setData(this.food.data);

}

//开始游戏

start() {

this.move();//调用移动

}

//暂停游戏

stop() {

clearInterval(this.timer);//清除定时器，已达到暂停的效果

}

//给地图渲染数据

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

etData(this.food.data);

}

//开始游戏

start() {

this.move();//调用移动

}

//暂停游戏

stop() {

clearInterval(this.timer);//清除定时器，已达到暂停的效果

}

//给地图渲染数据

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-TzMANRys-1715004011619)]

[外链图片转存中…(img-Q58OFsZj-1715004011619)]

[外链图片转存中…(img-cBM1VWsO-1715004011620)]

[外链图片转存中…(img-FQvmKgbk-1715004011621)]