用JavaScript寫的貪吃蛇游戲（很簡單，很詳細）-有解無憂

效果

撰寫外部框架

<!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>

效果：

添加內部畫布，以及繪制地圖

首先創建線的建構式Line

function Line(ctx,o){
		this.x=0,//x坐標
		this.y=0,//y坐標
		this.startX=0,//開始點x位置
		this.startY=0, //開始點y位置
		this.endX=0,//結束點x位置
		this.endY=0;//結束點y位置
		this.thin=false;//設定變細系數
		this.ctx=ctx;
		
		this.init(o);
	}
	Line.prototype.init=function(o){
		for(var key in o){
			this[key]=o[key];
		}
	}
	Line.prototype.render=function(){
		innerRender(this);
		
		function innerRender(obj){
			var ctx=obj.ctx;
			ctx.save()
			ctx.beginPath();
			ctx.translate(obj.x,obj.y);
			if(obj.thin){
				ctx.translate(0.5,0.5);
			}
			if(obj.lineWidth){//設定線寬
				ctx.lineWidth=obj.lineWidth;
			}
			if(obj.strokeStyle){
				ctx.strokeStyle=obj.strokeStyle;
			}
			//劃線
		  	ctx.moveTo(obj.startX, obj.startY);
		  	ctx.lineTo(obj.endX, obj.endY);
		  	ctx.stroke();
		  	ctx.restore();
		}
	  	
	  	return this;
	}

設定引數、執行繪制等相關方法

function SnakeProxy(el){
		this.renderArr=[];//待渲染物件存盤陣列
		this.snakeDir=4;//蛇行走方向
		this.snakeArr=[];//用來存蛇頭、蛇身、蛇尾的陣列
		this.snakePosArr=[];//存蛇頭、蛇身、蛇尾分別對應的位置
		this.score=0;//分數
		this.time=0;//時間
		this.moveCount=1;//計時控制器
	}
	
	SnakeProxy.prototype.init=function(el,score,time){
		if(!el) return ;
		this.el=el;
		this.scoreEL=score;
		this.timeEL=time;
		var canvas = document.createElement('canvas');//創建畫布
		canvas.style.cssText="background:darkgrey;border:1px solid grey;border-radius:10px;";//設定樣式
		var W = canvas.width = 600; //設定寬度
		var H = canvas.height = 400;//設定高度
		
		el.appendChild(canvas);//添加到指定的dom物件中
		
		this.ctx = canvas.getContext('2d');
		this.canvas=canvas;
		this.w=W;
		this.h=H;
		
		this.disX=20;//每個格子的x方向大小
		this.disY=20;//每個格子的y方向大小
		this.maxX=30;//x方向格子總數
		this.maxY=20;//y方向格子總數
		this.draw();//繪制
	}
	
	SnakeProxy.prototype.createMap=function(){
		var renderArr = this.renderArr;
		var disX = this.disX;
		var disY = this.disY;
		var maxX=this.maxX;
		var maxY=this.maxY;
		var rectW = this.w;
		var rectH = this.h;
		var rect=null;
		var color;
		
		for(var i=1;i<maxY;i++){//20行
			var line = new Line(this.ctx,{
				x:0,
				y:0,
			 	startX:0,
			 	startY:i*disY,
			 	endX:this.w,
			 	endY:i*disY,
			 	thin:true,
			 	strokeStyle:'white',
			 	lineWidth:0.2
			})
			renderArr.push(line);
		}
		
		for(var i=1;i<maxX;i++){//30列
			var line = new Line(this.ctx,{
				x:0,
				y:0,
			 	startX:i*disX,
			 	startY:0,
			 	endX:i*disX,
			 	endY:this.h,
			 	thin:true,
			 	strokeStyle:'white',
			 	lineWidth:0.2
			})
			renderArr.push(line);
		}
	}
	
	SnakeProxy.prototype.draw=function(){
		this.createMap();//繪制地圖

		this.render();//渲染
	}

此時游戲區域的格子以及繪制如下：

再來繪制蛇和食物（這里都是以圓形來做的）

創建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};
		 }
	}

蛋加多了一個方法，用來更新位置（當被蛇吃了后）

給開始、結束按鈕加入事件

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

此時的效果如下：

加入方向控制

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

資源下載，不需要積分的

給個三連吧兄弟們！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/257214.html

標籤：其他

上一篇：白光模塊？彩光模塊？

下一篇：WC2021 菊蒻yxy的題解