2024年Web前端最全js贪吃蛇项目（附git传送门）_js贪吃蛇项目绪论(2)，圆我大厂梦

前端面试题汇总

JavaScript

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

性能

linux

前端资料汇总

在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
       // 要获取游戏对象中的蛇属性
       that.snake.move();
       that.snake.render(that.map);

        // 2.2 当蛇遇到边界游戏结束
        // 获取蛇头的坐标
        var maxX = that.map.offsetWidth / that.snake.width;
        var maxY = that.map.offsetHeight / that.snake.height;
        var headX = that.snake.body[0].x;
        var headY = that.snake.body[0].y;
        if (headX < 0 || headX >= maxX) {
          alert('Game Over');
          clearInterval(timerId);
        }

        if (headY < 0 || headY >= maxY) {
          alert('Game Over');
          clearInterval(timerId);
        }
     }, 150);
   }

这里用到了that，在var that; that = this;// 记录游戏对象前面已经定义，用于获取this。

通过键盘控制蛇的移动方向

   // 通过键盘控制蛇移动的方向
  function bindKey() {
    // document.onkeydown = function () {};
    document.addEventListener('keydown', function (e) {
      // console.log(e.keyCode);
      // 37 - left
      // 38 - top
      // 39 - right


### 最后

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

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

> ![前端校招面试题精编解析大全](https://img-blog.csdnimg.cn/img_convert/aff58a41d2b6765216183533af0e7554.webp?x-oss-process=image/format,png)

ument.addEventListener('keydown', function (e) {
      // console.log(e.keyCode);
      // 37 - left
      // 38 - top
      // 39 - right


### 最后

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

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

> [外链图片转存中...(img-iFM4pwpT-1714829046479)]