js贪吃蛇项目（附git传送门）

爱被打了一巴掌 2023-07-17 06:34 29阅读 0赞

首先要做一个js的贪吃蛇游戏我们第一步就是要用面向对象的方法来思考问题

# 面向对象 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]  
贪吃蛇游戏大家众所周知，我们来抽象一下贪吃蛇的对象。  
首先**蛇**本身可以单独看为一个对象，**食物**是随机出现在屏幕上的，不管是最原始的只出现一个**食物**还是更多拓展版的**食物**的出现一定是按照某些规则的。所以**食物**在这里也是一个对象。

首先食物对象是不与其他对象相关的，我们先来确定食物对象的js。

## 建立food.js ##

/* 食物对象需要的属性,位置x,y,大小,颜色 */
    function Food(options){ 
    	options=options||{ }; 
    	this.x=options.x||0;
    	this.y=options.y||0;
    	
    	
    	this.width=options.width||20;
    	this.height=options.height||20;
    	this.color=options.color||'green';
    }
    var position="absolute";
    /* Food的原型对象 render方法 动态创建div */
    Food.prototype.render =function(map){ 
    	/* 创建div */
    	var div = document.createElement('div');
    	map.appendChild(div);
    	/* 设置div的样式 */
    	div.style.position=position;
    	div.style.left=this.x+'px';
    	div.style.top=this.y+'px';
    	
    	div.style.width=this.width+'px';
    	div.style.height=this.height+'px';
    	div.style.backgroundColor=this.color;
    }
    
    /* test */
    var map=document.getElementById('map');
    var food=new Food();
    food.render(map);

## 完善一下index.html ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<link rel="stylesheet" href="css/style.css">
    	</head>
    	<body>
    		<div id="map"></div>
    		
    		<script src="js/food.js"></script>
    		
    		
    	</body>
    </html>

这里要注意，引入food.js要在div声明之后，否则可能会出现以下或者不限于以下的问题。

> 报错：Uncaught TypeError: Cannot read property ‘appendChild’ of undefined

这个问题出现的原因就是在js加载之前并没有找到id为map的div模块。所以要谨记把js的加载都放在div声明的后面。

## 建立一个css ##

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

ok，如果没什么问题Google浏览器上已经可以显示出红配绿了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]  
就是这么辣眼睛。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;

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

## 删除食物 ##

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;

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

## 构建蛇对象 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 3]

## 启动js ##

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

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
          // 40 - bottom
          switch (e.keyCode) { 
            case 37: 
              that.snake.direction = 'left';
              break;
            case 38:
              that.snake.direction = 'top';
              break;
            case 39:
              that.snake.direction = 'right';
              break;
            case 40:
              that.snake.direction = 'bottom';
              break;
          }
        }, false);
      }

## 吃掉食物 ##

/* 判断蛇头是否和食物坐标重合 需要food 和map 在move方法中添加两个参数，同时game也需要添加两个参数*/
    	var headX=head.x*this.width;
    	var headY=head.y*this.height;
    	if(headX === food.x &&headY === food.y){ 
    		var last =this.body[this.body.length - 1];
    		this.body.push({ 
    			x:last.x,
    			y:last.y,
    			color:last.color
    		})

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 5]

github传送门：[https://github.com/qdjiangwenhao/snake][https_github.com_qdjiangwenhao_snake]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]: /images/20230528/14c40624d6cc4da1b206321c50d3adcf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]: /images/20230528/1c1fc89f000c47db91b65041304d4ce1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 2]: /images/20230528/b35fee7bd045446889b0fb9898fc7fab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 3]: /images/20230528/1cdc189406b246e3865192790205e6bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 4]: /images/20230528/7d44ab6db342484f93e5c58b25a0d5a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 5]: /images/20230528/de24774d79224f41b01b1036b5bdd48c.png
[https_github.com_qdjiangwenhao_snake]: https://github.com/qdjiangwenhao/snake