前端开发贪吃蛇游戏从设计到流畅运行_前端开发简历贪吃蛇项目介绍

最新推荐文章于 2024-05-15 02:21:18 发布

2401_84433570

最新推荐文章于 2024-05-15 02:21:18 发布

阅读量34

点赞数 25

分类专栏：程序员文章标签：游戏

本文链接：https://blog.csdn.net/2401_84433570/article/details/138381163

版权

程序员专栏收录该内容

176 篇文章 1 订阅

订阅专栏

	<script src="js/food.js"></script>
	
	
</body>


这里要注意，引入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浏览器上已经可以显示出红配绿了  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200203032135611.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70)  
 就是这么辣眼睛。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;


![在这里插入图片描述](https://img-blog.csdnimg.cn/20200203034430638.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70)  
 已经可以随机显示了，还有一个重要的游戏规则：吃掉食物。  
 所以吃掉之后要随机显示，之前就有一步删除食物的步骤


### 删除食物

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;


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


### 构建蛇对象


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

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;
})()


![在这里插入图片描述](https://img-blog.csdnimg.cn/20200204030812505.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70)


### 启动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;
}