贪吃蛇——面向对象版(1)

game.start();

}

}

地图类

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

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);
总结:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

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

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；