Web前端最全js贪吃蛇项目（附git传送门）_js贪吃蛇项目绪论，2024年最新跳槽面试太累了-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_84446919/article/details/138972633

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

Vue部分截图

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

#map {
	width: 800px;
	height: 600px;
	background-color: red;
	position: relative;/\* 相对 \*/
}

ok，如果没什么问题Google浏览器上已经可以显示出红配绿了
在这里插入图片描述
就是这么辣眼睛。food 还没解决完，如何让food 随机出现？

随机设置food位置

生成最大值到最小值之间的随机数

var Tools = {
  getRandom: function (min, max) {
    return Math.floor(Math.random() \* (max - min + 1)) +  min;
  }
}

ok刚刚我们的x和y的位置都是默认的，所以设置一下x和y但是要在div中（随机）。

考虑随机数的边界问题：实质上我们是随机坐标，随机坐标0时是可以在map上放置food的，这个比较容易思考。上边界max呢，首先map是有自己的宽度和高度的我们拿宽度先来找x（高度和y同理）在food.js中定义了food的宽度20px
在css中定义了map的宽度800px 后者比前者即为map中能横向放置多少块food 明眼人可知，可放40块
但是max可以等于40吗？答案是否定的，因为等于40时，因为我们是求的坐标，要展开food，实际上已经不属于map的范围中了。
故max=40-1=39

由此我们得到了新的x和y坐标的表示方法：

this.x=Tools.getRandom(0,map.offsetWidth/this.width-1)\*this.width;
this.y=Tools.getRandom(0,map.offsetHeight/this.height-1)\*this.height;

在这里插入图片描述
已经可以随机显示了，还有一个重要的游戏规则：吃掉食物。
所以吃掉之后要随机显示，之前就有一步删除食物的步骤

删除食物

var elements=[];//存储食物的元素

随机生成方法中：

var div = document.createElement('div');
	map.appendChild(div);
	/\* 记录到数组中 \*/
	elements.push(div);

function remove(){
	for(var i=elements.length-1;i>=0;i--){
		/\* 删除div 调用父元素的removeChild方法删除\*/
		elements[i].parentsNode.removeChild(elements[i]);
		/\* 删除数组中的数据 
 第一个参数从哪个元素开始删除
 第二个参数删除几个\*/
		elements.splice(i,1);
	}
}

自调用函数改进

首先自调用函数的目的是为了创建局部作用域，使得后续不会出现重名调用等问题

(function(){
})()

将之前写的代码放入function中即可
此处注意一个小问题
Food方法在function 的局部作用域内，所以外部调用不到

/\* window下的函数全局可访问,创建自调用函数之后,局部作用域使得外部的测试代码无法调用food方法 \*/
	window.Food=Food;

关于食物对象的面向对象基本结束

构建蛇对象

蛇对象的渲染思路与食物对象同理，需规定蛇对象的方向和身体，身体默认用数组存储，每一个元素代表蛇身体的一个蛇节。

(function(){
	var position ='absolute';
function Snake(options){
	options=options||{};
	/\* 蛇节大小和行进方向 \*/
	this.width =options.width||20;
	this.height=options.height||20;
	this.derection=options.derection||'right';
	/\* 蛇身体 \*/
	this.body=[
		{x:3,y:2,color:'red'},
		{x:2,y:2,color:'blue'},
		{x:1,y:2,color:'blue'}
	];
}	


Snake.prototype.render=function(){
	for(var i=0,len =this.body.length;i<len;i++){
		var object =this.body[i];
		var div=document.createElement('div');
		map.appendChild(div);
		/\* 设置postion的目的是脱离文档流 在上面新建一个var postion\*/
		div.style.position=position;
		/\* 设置大小 \*/
		div.style.width=this.width+'px';
		div.style.height=this.height+'px';
		/\* 设置坐标，颜色 \*/
		div.style.left=object.x\*this.width+'px';
		div.style.top=object.y\*this.height+'px';
		div.style.backgroundColor=object.color;
	}
}

window.Snake=Snake;
})()

在这里插入图片描述

启动js

之前的测试都是在js后加一段测试代码，把启动单独创建一个js来代替测试代码

(function(){
	function Game(map){
		/\* 依赖于food和snake \*/
		this.food=new Food();
		this.snake=new Snake();
		this.map=map;
		
	}
	
	Game.prototype.start=function(){
		/\* 把蛇和食物对象渲染到地图
 开始游戏的逻辑 \*/
		this.food.render(this.map);
		this.snake.render(this.map);
		
		
	}
	
	window.Game=Game;
	
})();

var map=document.getElementById('map');
var game =new Game(map);
game.start();

game.js 的作用是代替之前的测试代码，所以它首先要依赖于前两个食物和蛇的js，再按照其render方法进行渲染即可。效果与之前相同，不附图。

控制蛇的移动

Snake.prototype.move =function(){
	/\* 控制蛇的身体移动 \*/
	/\* 蛇节 \*/
	for(var i=this.body.length-1;i>0;i--){
		this.body[i].x=this.body[i-1].x;
		this.body[i].y=this.body[i-1].y;
		
	}
	/\* 蛇头 \*/
	var head =this.body[0];
	switch(this.direction){
		case'right':
		head.x+=1;
		break;
		
		case'left':
		head.x-=1;
		break;
		
		case'top':
		head.y-=1;
		break;
		
		case'bottom':
		head.y+=1;
		break;
	}
}

蛇在移动过程中，需要删除蛇移动前的蛇节。
同理food：

/\* 私有成员函数 删除参照food\*/
function remove(){
	/\* 从后往前删除 \*/
	for(var i=elements.length-1;i>=0;i--){
		/\* 删除div \*/
		elements[i].parentNode.removeChild(elements[i]);
		elements.splice(i,1);
	}
}

让蛇持续移动

 // 私有的函数 让蛇移动
   function runSnake() {
     var timerId = setInterval(function () {
       // 让蛇走一格
       // 在定时器的function中this是指向window对象的
       // this.snake


##### 框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，**生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的**，在学习的过程可以结合框架的官方文档

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

**Vue框架**

>**知识要点：**
>**1. vue-cli工程**
>**2. vue核心知识点**
>**3. vue-router**
>**4. vuex**
>**5. http请求**
>**6. UI样式**
>**7. 常用功能**
>**8. MVVM设计模式**

![](https://img-blog.csdnimg.cn/img_convert/98c0c1a2736c88d3e496671d9db8625d.webp?x-oss-process=image/format,png)


**React框架**

>**知识要点：**
>**1. 基本知识**
>**2. React 组件**
>**3. React Redux**
>**4. React 路由**

![](https://img-blog.csdnimg.cn/img_convert/6e1524460ddb414892cbaf7c32f920a7.webp?x-oss-process=image/format,png)



识要点：**
>**1. vue-cli工程**
>**2. vue核心知识点**
>**3. vue-router**
>**4. vuex**
>**5. http请求**
>**6. UI样式**
>**7. 常用功能**
>**8. MVVM设计模式**

[外链图片转存中...(img-VqOnwyKW-1715858667925)]


**React框架**

>**知识要点：**
>**1. 基本知识**
>**2. React 组件**
>**3. React Redux**
>**4. React 路由**

[外链图片转存中...(img-E2cCbePq-1715858667926)]