2020-10-13 用JavaScript做的贪吃蛇小游戏_js贪吃蛇 2020-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44864468/article/details/109058174
用JavaScript做的贪吃蛇小游戏

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
				
			}
			#main{
				margin: 100px;
			}
			.btn{
				width: 100px;
				height: 40px;
				
			}
			.aaa{
				position: relative;
				top: 40px;
				border: solid 1px darkred;
				background-color: #fafafa;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<button type="button" class="btn" id="begin">开始游戏</button>
			<button type="button" class="btn" id="pause">暂停游戏</button>
			<span class="gtitle">第一关 分数：<span id="fs">0</span></span>
		</div>
	</body>
	
	<script type="text/javascript">
		var tase=0;
		console.time(tase);
		var fs =document.getElementById('fs');
		var main = document.getElementById('main');
		var showcanvas = true; //是否开启画布格子
		function Map(atom,xnum,ynum){
			this.atom = atom;  //原子大小宽和高一样 10
			this.xnum = xnum;  //横向原子数量
			this.ynum = ynum;  //纵向原子数量
			this.canvas = null;
			//创建画布方法
			this.create = function(){
				this.canvas = document.createElement('div');
				this.canvas.style.cssText="position: relative;top: 40px;border: solid 2px darkred;background: black"
				this.canvas.style.width = this.atom * this.xnum +'px'; //画布的宽
				this.canvas.style.height = this.atom * this.ynum +'px'; //画布的高
				main.appendChild(this.canvas);
			
				if(showcanvas){
					for(var y=0;y<ynum;y++){
						for(var x=0;x<xnum;x++){
							var a =document.createElement('div');
							a.style.cssText='border: 1px solid yellow;';
							a.style.width = this.atom +'px';
							a.style.height = this.atom +'px';
							a.style.background='#61ffb8';
							this.canvas.appendChild(a);
							a.style.position='absolute';
							a.style.left=x*this.atom+'px'
							a.style.top =y*this.ynum+'px'
						}
					}
				}
			}
		}
	
		// 食物
		function Food(map){
			this.width = map.atom;
			this.height = map.atom;
			//随机颜色
			this.bgcolor="rgb("+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+")";
			// this.bgcolor='pink'
			this.x = Math.floor(Math.random()*map.xnum);
			this.y = Math.floor(Math.random()*map.ynum);
			this.flag = document.createElement('div');
			this.flag.style.width = this.width +'px';
			this.flag.style.height = this.height +'px';
			
			this.flag.style.backgroundColor = this.bgcolor;
			this.flag.borderRadius='50%';
			this.flag.style.position='absolute';
			this.flag.style.left = this.x * this.width +'px';
			this.flag.style.top = this.y * this.height +'px';
			map.canvas.appendChild(this.flag);
		}
		
		function Snake(map){
			//设置宽，高
			this.width = map.atom;
			this.height = map.atom;
			//默走的方向
			this.direction = "right";
			this.body=[
				{x:2,y:0}, //蛇头 1
				{x:1,y:0}, //蛇身 2
				{x:0,y:0}, //蛇尾 3
			];
			//显示蛇
			this.display = function(){
				for(var i=0;i<this.body.length;i++){
					if(this.body[i].x !=null){ //当吃到食物时x=null,不能新建,不然会在0，0处理新建一个
					var s =document.createElement('div');
					//将节点保存到一个状态变量中
					this.body[i].flag = s;
					
					//设置蛇的样式；
					s.style.width = this.width +'px';
					s.style.height = this.height +'px';
					// s.style.backgroundColor="rgb("+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+")";
					s.style.backgroundColor='pink'
					//设置位置
					s.style.position = 'absolute'
					s.style.left = this.body[i].x *this.width +'px';
					s.style.top =this.body[i].y *this.height +'px'
					map.canvas.appendChild(s)
				}
				}
			}
			//蛇运动
			this.run = function(event){
				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;
				}
			
				//根据方向梳理蛇头
				switch(this.direction){
					case "left":
					this.body[0].x -=1;
					break;
					case "right":
					this.body[0].x +=1;
					break;
					case "up":
					this.body[0].y -=1;
					break;
					case "down":
					this.body[0].y +=1;
					break;
				}
				
				//判断蛇头吃到食物
				if(this.body[0].x == food.x && this.body[0].y == food.y){
					//蛇加一节，根据最后节点定
					this.body.push({x:null,y:null,flag:null});
					map.canvas.removeChild(food.flag);
					//查看长度
					fs.innerHTML = this.body.length-3;
					food = new Food(map)
				}
				
				//判断是否出界
				if(this.body[0].x<0 || this.body[0].x>map.xnum-1 || this.body[0].y<0 || this.body[0].y>map.ynum-1 ){
					clearInterval(timer);
					alert('游戏失败');
					//重新开始游戏
					restart(map,snake)
					return false;
				}
				
				//判断是否和自己重和
				for(var i=4;i<this.body.length;i++){
					if(this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y){
						clearInterval(timer);
						alert('游戏失败');
						//重新开始游戏
						restart(map,snake)
						return false;
					}
				}
				
				
				for(var i=0; i<this.body.length;i++){
					if(this.body[i].flag !=null) {  //
					
						map.canvas.removeChild(this.body[i].flag)
					}
				}
				this.display();
			}
		}
		
		//重新开始游戏
		function restart(map,snake){
			for(var i=0;i<snake.body.length;i++){
				map.canvas.removeChild(snake.body[i].flag);
			}
			snake.body =[
				{x:2,y:0}, //蛇头 1
				{x:1,y:0}, //蛇身 2
				{x:0,y:0}, //蛇尾 3
			];
			snake.direction = 'right';
			snake.display();
			map.canvas.removeChild(food.flag);
			food = new Food(map); 
			fs.innerHTML=0;
		}
		
		
		
		
		
		//地图
		var map = new Map(20,40,20);
	    //画布
		map.create();
		//食物
		var food = new Food(map);
		//蛇
		var snake = new Snake(map);
		snake.display();
		
		
		
		//给body加方向事件
		window.onkeydown = function(e){
			var event = e || window.event;
			switch(event.keyCode){
				case 38:
					if(snake.direction !="down"){
					snake.direction = "up";
					}
				break;
				case 40:
					if(snake.direction !="up"){
					snake.direction = "down";
					}
				break;
				case 37:
					if(snake.direction !="right"){
					snake.direction = "left";
					}
				break;
				case 39:
					if(snake.direction !="left"){
						snake.direction = "right";
					}
				break;
			}
		}
		
		var timer //变量提升
		var shudu=180;		
		document.getElementById('begin').onclick = function (){
			clearInterval(timer);
			timer = setInterval(function(){
			snake.run()
			},shudu)
		}
		document.getElementById('pause').onclick = function (){
			clearInterval(timer);
		}		
		console.timeEnd(tase)
	</script>
</html>