用JavaScript写的贪吃蛇游戏（很简单，很详细）

雨点打透心脏的1/2处 2021-09-07 06:09 402阅读 0赞

## 效果 ##

![2021020511145253.gif][]

### 编写外部框架 ###

<!DOCTYPE html>
    <html>
    	<head lang="en">
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    *{
        margin: 0;
        padding: 0;
    }
    #box{
    	width:620px;
    	height:450px;
    	position:absolute;
    	margin:0 auto;
    	left:0;
    	top:20px;
    	right:0;
    	bottom:0;
    	background:gray;
    	border-radius:10px;
    }
    #snakeDiv{
    	width:600px;
    	height:400px;
    	position:absolute;
    	margin:0 auto;
    	left:0;
    	top:10px;
    	right:0;
    	bottom:0;
    }
    .bottom{
    	width:600px;
        height:30px;
    	position:absolute;
    	bottom:1px;
    	right:1px;
    }
    .bottom .button1{
    	position: absolute;
        right: 90px;
        width: 50px;
        font-size: 14px;
    }
    .bottom .button2{
    	position: absolute;
        right: 30px;
        width: 50px;
        font-size: 14px;
    }
    .bottom .span1{
    	position: absolute;
        left: 10px;
        color: white;
    }
    .bottom .span2{
    	position: absolute;
        left: 200px;
        color: white;
    }
    </style>
    	</head>
    	<body>
    		<div id='box'>
    			<div id='snakeDiv'>
    			</div>
    			<div class='bottom'>
    				<span id='score' class='span1'>分数：0</span>
    				<span id='time' class='span2'>时间：0</span>
    				<button onclick='start()' class='button1'>开始</button>
    				<button onclick='stop()' class='button2'>结束</button>
    			</div>
    		</div>
    		
    	<script type="text/javascript" src='snake.js'></script>
    	
    	</body>
    </html>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

### 添加内部画布，以及绘制地图 ###

首先创建线的构造函数Line

### 设定参数、执行绘制等相关方法 ###

此时游戏区域的格子以及绘制如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1][]

### 再来绘制蛇和食物（这里都是以圆形来做的） ###

创建Ball构造函数

//构造函数
    	function Ball(o){
    		this.x=0,//圆心X坐标
    		this.y=0,//圆心Y坐标
    		this.r=0,//半径
    		this.startAngle=0,//开始角度
    		this.endAngle=0,//结束角度
    		this.anticlockwise=false;//顺时针，逆时针方向指定
    		this.stroke=false;//是否描边
    		this.fill=false;//是否填充
    		this.scaleX=1;//缩放X比例
    		this.scaleY=1;//缩放Y比例
    		
    		this.init(o);
    	}
    	//初始化
    	Ball.prototype.init=function(o){
    		for(var key in o){
    			this[key]=o[key];
    		}
    	}
    	//绘制
    	Ball.prototype.render=function(context){
    		var ctx=context;
    		ctx.save();
    		ctx.beginPath();
    		ctx.translate(this.x,this.y);
    		ctx.scale(this.scaleX,this.scaleY);//设定缩放
    		ctx.arc(0,0,this.r,this.startAngle,this.endAngle);//画圆
    		if(this.lineWidth){//线宽
    			ctx.lineWidth=this.lineWidth;
    		}
    		if(this.fill){//是否填充
    			this.fillStyle?(ctx.fillStyle=this.fillStyle):null;
    			ctx.fill();
    		}
    		if(this.stroke){//是否描边
    			this.strokeStyle?(ctx.strokeStyle=this.strokeStyle):null;
    			ctx.stroke();
    		}	
    		ctx.restore();
    		
    		return this;
    	}

### 绘制蛇头 ###

SnakeProxy.prototype.createHead=function(){
    		var renderArr = this.renderArr;
    		var disX = this.disX;
    		var disY = this.disY;
    		var x=1,y=0;
    		var head = new Ball({
    		 	x:x*disX+disX/2,
    			y:y*disY+disY/2,
    			r:disX/2-2,
    			startAngle:0,
    			endAngle:2*Math.PI,
    			fill:true,
    			fillStyle:'#F5DC10',
    			lineWidth:1.2
    		 })
    		 renderArr.push(head);
    		 this.snakeArr.push(head);
    		 this.snakePosArr.push({x:x,y:y});
    	}

### 蛇身（先不绘制出来，先放代码） ###

SnakeProxy.prototype.createBody=function(){
    		var renderArr = this.renderArr;
    		var disX = this.disX;
    		var disY = this.disY;
    		var x=1,y=0;
    		var body = new Ball({
    		 	x:x*disX+disX/2,
    			y:y*disY+disY/2,
    			r:disX/3,
    			startAngle:0,
    			endAngle:2*Math.PI,
    			fill:true,
    			fillStyle:'#F5DC10',
    			lineWidth:1.2
    		 })
    		 renderArr.push(body);
    		 this.snakeArr.splice(1,0,body);//在头部后面添加
    	}

### 绘制蛇尾 ###

SnakeProxy.prototype.createEnd=function(){
    		var renderArr = this.renderArr;
    		var disX = this.disX;
    		var disY = this.disY;
    		
    		var x=0,y=0;
    		var end = new Ball({
    		 	x:x*disX+disX/2,
    			y:y*disY+disY/2,
    			r:disX/4,
    			startAngle:0,
    			endAngle:2*Math.PI,
    			fill:true,
    			fillStyle:'#F5DC10',
    			lineWidth:1.2
    		 })
    		 renderArr.push(end);
    		 this.snakeArr.push(end);
    		 this.snakePosArr.push({x:x,y:y});
    	}

### 绘制食物（蛋） ###

SnakeProxy.prototype.createEgg=function(){
    		var renderArr = this.renderArr;
    		var disX = this.disX;
    		var disY = this.disY;
    		
    		var x=_.getRandom(0,30),y=_.getRandom(0,20);
    		
    		var egg = new Ball({
    		 	x:x*disX+disX/2,
    			y:y*disY+disY/2,
    			r:disX/2-2,
    			startAngle:0,
    			endAngle:2*Math.PI,
    			scaleY:0.8,
    			fill:true,
    			fillStyle:'#FCF6DB',
    			lineWidth:1.2
    		 })
    		 renderArr.push(egg);
    		 this.egg=egg;
    		 this.eggPos={x:x,y:y};
    		 
    		 var that=this;
    		 egg.update=function(){//update方法，蛋被吃以后，新随机出现在地图中
    		 	var x=_.getRandom(0,30),y=_.getRandom(0,20);
    		 	this.x=x*disX+disX/2,this.y=y*disY+disY/2;
    		 	that.eggPos={x:x,y:y};
    		 }
    	}

蛋加多了一个方法，用来更新位置（当被蛇吃了后）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 2][]

### 给开始、结束按钮加入事件 ###

var snakeDiv = document.getElementById('snakeDiv');
    	var score= document.getElementById('score');
    	var time= document.getElementById('time');
    	
    	snake.init(snakeDiv,score,time);
    	
    	function start(){
    		snake.start()
    	}
    	
    	function stop(){
    		snake.stop()
    	}

SnakeProxy.prototype.start=function(){
    		if(this.timmer) return ;
    		if(this.hasEnd){//如果是结束则需要重新开始，暂停的话就继续游戏
    			this.restart();
    		}
    		this.hasEnd=false;
    		this.timmer = setInterval(this.move.bind(this),250);//开始定时任务
    	}
    		
    	SnakeProxy.prototype.stop=function(){
    		if(!this.timmer) return ;
    		clearInterval(this.timmer);//清除定时任务
    		this.timmer=null;
    	}

此时的效果如下：

![20210205104658554.gif][]

### 加入方向控制 ###

SnakeProxy.prototype.control=function(){
    		var that=this;
    		global.addEventListener('keydown',function(e){
    			switch (e.keyCode){
    				case 38:
    					if(that.snakeDir==1||that.snakeDir==2){
    						break;
    					}
    					that.snakeDir=1;//上
    					break;
    				case 40:
    					if(that.snakeDir==1||that.snakeDir==2){
    						break;
    					}
    					that.snakeDir=2;//下
    					break;
    				case 37:
    					if(that.snakeDir==3||that.snakeDir==4){
    						break;
    					}
    					that.snakeDir=3;//左
    					break;
    				case 39:
    					if(that.snakeDir==3||that.snakeDir==4){
    						break;
    					}
    					that.snakeDir=4;//右
    					break;
    			
    			}
    			console.log(that.snakeDir)
    		});
    	}

### 加入蛇的下一个坐标更新 ###

SnakeProxy.prototype.update=function(){
    		var posArr = this.snakePosArr,pos;
    		var disX=this.disX,disY=this.disY;
    		_.each(this.snakeArr,function(s,i){
    			pos = posArr[i];
    			s.x=pos.x*disX+disX/2;
    			s.y=pos.y*disY+disY/2;
    		})
    	}
    	
    	SnakeProxy.prototype.computedNext=function(obj){
    		var x =obj.x, y = obj.y;
    		switch (this.snakeDir){
    			case 1:
    				y=obj.y-1;
    				break;
    			case 2:
    				y=obj.y+1;
    				break;
    			case 3:
    				x=obj.x-1;
    				break;
    			case 4:
    				x=obj.x+1;
    				break;
    		}
    		return {x:x,y:y}
    	}

### 再加上吃食物、咬到自己、计算时间、计算分数、定时move函数就完成了 ###

SnakeProxy.prototype.eat=function(head){
    		var pos = this.eggPos;
    		if(head.x===pos.x && head.y===pos.y){//如果头部与蛋整体重合的话就吃
    			this.egg.update();//重新随机蛋的位置
    			//添加蛇的身体
    			this.createBody();
    			
    			this.calcuScore();//计算分数
    			return true;
    		}
    		return false;
    	}
    	SnakeProxy.prototype.eatSelf=function(head){
    		var snakePosArr=this.snakePosArr;
    		for(var i=1;i<snakePosArr.length;i++){
    			var s = snakePosArr[i];
    			if(head.x==s.x && head.y==s.y){
    				return true;
    			}
    		}
    		return false;
    	}
    	SnakeProxy.prototype.end=function(head,oldHead){
    		if(head.x>=this.maxX || head.x<0 || head.y>=this.maxY || head.y<0 ){//超出边界结束
    			alert('结束了')
    			return true;
    		}
    		if(this.eatSelf(oldHead)){//触碰到自己也结束
    			alert('结束了1')
    			return true;
    		}
    		
    		return false
    	}
    	
    	SnakeProxy.prototype.calcuScore=function(){
    		this.score+=100;
    		this.scoreEL.innerText='分数：'+this.score;
    	}
    	
    	SnakeProxy.prototype.calcuTime=function(){
    		if(this.moveCount%4==0){
    			this.time++;
    			this.time_flag=false;
    			this.timeEL.innerText='时间：'+this.time;
    		}
    		
    		this.moveCount++;
    	}
    	
    	SnakeProxy.prototype.move=function(){
    		this.calcuTime();
    		
    		var headPos = this.snakePosArr[0];
    		//执行吃动作
    		var eatFlag = this.eat(headPos);
    		//计算下一个坐标
    		var nextPos = this.computedNext(headPos);
    		
    		var endFlag = this.end(nextPos,headPos);
    		if(endFlag) {
    			this.stop();
    			this.hasEnd=true;
    			return ;
    		} 
    		
    		if(!eatFlag){//如果吃了食物，则不行弹出最后一个
    			this.snakePosArr.pop();
    		}
    		this.snakePosArr.unshift(nextPos);
    		this.update();
    		
    		this.render();
    	}

### 给个三连吧兄弟们！ ###

### 源码下载 ###

**方式1：[完整代码下载][Link 1]**

**方式2：关注下方公众号，回复 【116】 下载代码**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 3][]

### ★** 更多源码** ###

** [♥ 基于canvas的手风琴特效（附源码）♥][_canvas]**

**[♥ 抖音很火的华为太空人表盘（附源码）♥][Link 2]**

**[♥ 基于JavaScript页面动态验证码（附源码）♥][_JavaScript]**

**[♥ 基于JavaScript的拖动滑块拼图验证（附源码）♥][_JavaScript 1]**

**[♥ 基于JavaScript的幸运大转盘（附源码）♥][_JavaScript 2]**

**[♥ 抖音很火的罗盘时钟（附源码）♥][Link 3]**

**[♥ 基于JavaScript的俄罗斯方块小游戏（附源码）♥][_JavaScript 3]**

**[♥ 基于JavaScript的贪吃蛇游戏（附源码）♥][_JavaScript 4]**

**[♥ 基于JavaScript的拼图游戏（附源码）♥][_JavaScript 5]**

**[♥ 用JavaScript给女儿做的烟花特效（附源码）♥][_JavaScript 6]**

**[♥ 老父亲给女儿做的下雪特效，满足女儿看雪的愿望（附源码）♥][Link 4]**

**[♥ 雷达扫描特效（附源码）♥][Link 5]**

**[♥ 香港黄金配角吴孟达去世，80后程序员以轮播图来悼念达叔，达叔一路走好！（附源码）♥][_80]**

**[♥ 仿抖音刷新进度条（附源码）♥][Link 6]**

**[♥ 仿头条方形刷新进度条（附源码）♥][Link 7]**

**[♥ 仿360加速球、水波评分特效（附源码）♥][_360]**

**[♥ 基于canvas的刮刮卡（附源码）♥][_canvas 1]**

**[♥ 原生js写的左侧飞入拼图特效，你是喜欢美女单飞还是双飞（附源码）♥][_js]**

**[♥ 用js写的旋转木马，在新年献给各位刚登基的皇帝，让你的后宫转起来！程序员就是可以为所欲为！（附源码）♥][_js 1]**

**[♥ 用js写的轮播图，八位女明星，你翻谁的牌，程序员就是可以为所欲为！（附源码）♥][_js 2]**

**[♥ 原生js实现美女拼图，把美女老婆抱回家，5个美女够不够！程序员就是可以为所欲为！（附源码）♥][_js_5]**

**[♥ 用js仿探探拖拽卡片的效果、飞卡片的效果，感觉挺酷，最后有美女看哦！（附源码）♥][_js 3]**

**[♥ 老婆说程序员不懂浪漫，程序员默默拿起了键盘，这就亲手带你去看流星雨，女人真会影响拔刀的速度（附源码）♥][Link 8]**

**[♥ 学生成绩管理系统（jsp+jquery+java+mysql+tomcat）有源码，你的毕设我的心（附源码）♥][_jsp_jquery_java_mysql_tomcat]**

[2021020511145253.gif]: /images/20210724/fb7c43bc421a45e48f860c48a236fd43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/67bd8f523ff24ba5bbbcfb69d2143a51.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1]: /images/20210724/21c60f8b2f3d48d9a041e2e5f1c8cb7d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 2]: /images/20210724/d88f5269892a46eda1a29abe2a44b1c8.png
[20210205104658554.gif]: /images/20210724/90abb59bc644491aae9fd822e9704971.png
[Link 1]: https://download.csdn.net/download/dkm123456/15075959
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 3]: /images/20210724/eae03a8e713f484e8767b45de72abcd7.png
[_canvas]: https://blog.csdn.net/dkm123456/article/details/115529446
[Link 2]: https://blog.csdn.net/dkm123456/article/details/115215032
[_JavaScript]: https://blog.csdn.net/dkm123456/article/details/114990229
[_JavaScript 1]: https://blog.csdn.net/dkm123456/article/details/114821927
[_JavaScript 2]: https://blog.csdn.net/dkm123456/article/details/115457093
[Link 3]: https://blog.csdn.net/dkm123456/article/details/115219368
[_JavaScript 3]: https://blog.csdn.net/dkm123456/article/details/114103563
[_JavaScript 4]: https://blog.csdn.net/dkm123456/article/details/113680875
[_JavaScript 5]: https://blog.csdn.net/dkm123456/article/details/114695468
[_JavaScript 6]: https://blog.csdn.net/dkm123456/article/details/112850520
[Link 4]: https://blog.csdn.net/dkm123456/article/details/112204855
[Link 5]: https://blog.csdn.net/dkm123456/article/details/114312198
[_80]: https://blog.csdn.net/dkm123456/article/details/114214374
[Link 6]: https://blog.csdn.net/dkm123456/article/details/113586884
[Link 7]: https://blog.csdn.net/dkm123456/article/details/113573795
[_360]: https://blog.csdn.net/dkm123456/article/details/113189108
[_canvas 1]: https://blog.csdn.net/dkm123456/article/details/113181216
[_js]: https://blog.csdn.net/dkm123456/article/details/112171337
[_js 1]: https://blog.csdn.net/dkm123456/article/details/112059073
[_js 2]: https://blog.csdn.net/dkm123456/article/details/112043042
[_js_5]: https://blog.csdn.net/dkm123456/article/details/111991734
[_js 3]: https://blog.csdn.net/dkm123456/article/details/111724361
[Link 8]: https://blog.csdn.net/dkm123456/article/details/113180223
[_jsp_jquery_java_mysql_tomcat]: https://blog.csdn.net/dkm123456/article/details/112402668