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: i t e m . x ∗ t h i s . r e c t p x ; t o p : {item.x * this.rect}px; top: item.x∗this.rectpx;top:{item.y * this.rect}px;
width: t h i s . r e c t p x ; h e i g h t : {this.rect}px; height: 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)
}
}
==================================================================
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:
其实我们很难也不需要在面试过程中去完美地阐述出整套思想,这里也只是浅尝辄止,一些个人理解而已。博主也是初级小菜鸟,停留在表面而已,只求对大家能有所帮助,轻喷🤣;
我个人觉得: 这些编程范式之间,其实并不矛盾,各有各的 优劣势。
理解和学习它们的理念与优势,合理地 设计融合,将优秀的软件编程思想用于提升我们应用;
所有设计思想,最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用,开发更为高效和安全;