更多面试题
**《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: 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);
}
//开始游戏
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)]