js 简易的贪吃蛇小游戏

贪吃蛇小游戏

1.明确要实现的功能
开始游戏、分数统计、蛇移动定时器、食物随机出现
规则：
蛇头不能碰到身体和地图边框，否则游戏结束
蛇头碰到食物时蛇身增加一格，并且食物重新出现
2.分部实现功能

1. 利用原生js画出地图，食物

//画地图
function Map(){
    
    
	this.width=750;
	this.height=390;
	this.position='absolute';
	this.top=0;
	this.color='#ddd';
	this._map=null;
	this.show=function(){
    
    
		this._map=document.createElement('div');
		this._map.style.width=this.width+'px';
		this._map.style.height=this.height+'px';
		this._map.style.position=this.position;
		this._map.style.top=this.top+'px';
		this._map.style.backgroundColor=this.color;
		document.getElementsByTagName('body')[0].appendChild(this._map);
	}
}
//画食物
function Food(){
    
    
	this.width=15;
	this.height=15;
	this.position='absolute';
	this.color='#ffa500';
	this.x=0;
	this.x=0;
	this._food=null;
	this.show=function(){
    
    
		if(this._food==null){
    
    
			this._food=document.createElement('div');
			this._food.style.width=this.width+'px';
			this._food.style.height=this.height+'px';
			this._food.style.position=this.position;
			this._food.style.backgroundColor=this.color;
			map._map.appendChild(this._food);
		}
		// 随机出现食物
		this.x = Math.floor(Math.random()*50);
		this.y = Math.floor(Math.random()*26);
		this._food.style.left =this.x*15+'px';
		this._food.style.top = this.y*15 +'px';	
	}
}

2.画蛇，根据键盘所按键判断蛇的运动方向，蛇头碰到食物后蛇身+1，蛇移动时蛇头与蛇身的位置替换

a. 设置每节蛇身的长宽，规定一格为15像素，并且规定蛇的初始运动方向向右

定义蛇数组：

// 画蛇
function Snake(){
    
    
	this.width=15;
	this.height=15;
	this.position='absolute';
	this.direct='right';//规定蛇的初始运动方向向右
	this.body=[[3,2,'#66d0de',null],[2,2,'#4746bf',null],[1,2,'#4746bf',null]];//蛇的身体的数组
	this.show=function(){
    
    
		var length=this.body.length;
		for(var i=0;i<length;i++){
    
    
			if(this.body[i][3]==null){
    
    
				this.body[i][3]=document.createElement('div');
				this.body[i][3].style.width=this.width+'px';
				this.body[i][3].style.height=this.height+'px';
				this.body[i][3].style.position=this.position;
				this.body[i][3].style.backgroundColor=this.body[i][2];
				this.body[i][3].style.left=this.body[i][0]*15+'px';
				this.body[i][3].style.top=this.body[i][1]*15+'px';
				map._map.appendChild(this.body[i][3]);
			}
			this.body[i][3].style.left=this.body[i][0]*15+'px';
			this.body[i][3].style.top=this.body[i][1]*15+'px';
		}
	}
}

b. 获取按键码并判断蛇移动的方向
code = window.event.keyCode 获取按下的键盘按键Unicode值

这里用到的按键对应Unicode值，如下：

按键	Unicode
Left（左）	37
Up（上）	38
Right（右）	39
Down（下）	40

// 获取按键码
document.onkeydown = function(event){
    
    
//区别IE和非IE浏览器的不同触发事件
	var code;
	if (window.event) {
    
    
		code = window.event.keyCode;
	} else{
    
    
		code = event.keyCode;
	}
	snake.setDirect(code);//调用判断按键码的方法并传递code参数
}

这里用到switch…case…进行判断，如果Unicode值为37，则改变蛇的运动方向为向左

// 根据按键码判断蛇移动的方向
this.setDirect=function(code){
    
    
	switch(code){
    
    
		case 37:
		this.direct='left';
		break;
		case 38:
		this.direct='up';
		break;
		case 39:
		this.direct='right';
		break;
		case 40:
		this.direct='down';
		break;
	}
}

c. 蛇移动时的x，y坐标位置的变化

根据setDirect中判断蛇的移动方向，改变蛇身x,y的坐标

// 判断按键方向，移动蛇
if(this.direct=='left'){
    
    
	this.body[0][0]-=1;
}
if(this.direct=='right'){
    
    
	this.body[0][0]+=1;
}
if(this.direct=='up'){
    
    
	this.body[0][1]-=1;
}
if(this.direct=='down'){
    
    
	this.body[0][1]+=1;
}

蛇移向下一格时，原本蛇头的位置会变成第一节蛇身的位置，而现在蛇头的位置时原来蛇头位置的x或y值+1

// 获得蛇身长度
var length=this.body.length;
// 蛇移动时,交换蛇头
for(var i=length-1;i>0;i--){
    
    
	this.body[i][0]=this.body[i-1][0];
	this.body[i][1]=this.body[i-1][1];
}

d. 判断蛇头碰到食物时，蛇身+1，然后重新调用食物的方法，出现下一格随机的食物

// 蛇头碰到食物
if(this.body[0][0]==food.x&&this.body[0][1]==food.y){
    
    
	this.body.push([0,0,'4746bf',null]);//蛇身加一个
	food.show();
}

e. 判断游戏结束
蛇头碰到蛇身或四周的地图边界都会结束游戏

// 蛇碰到地图边界和自身时游戏结束
for(var j=1;j<length-1;j++){
    
    
	if((this.body[0][0]==this.body[j][0]&&this.body[0][1]==this.body[j][1])
||(this.body[0][0]>49||this.body[0][0]<0||this.body[0][1]>25||this.body[0][1]<0)){
    
    
	alert('游戏结束！您的分数为：'+grade.value+'分');
	cleartimer();
	}
}

获取当前蛇身的长度，并向input框中传递分数

// 获得蛇身长度
var length=this.body.length;
//传递分数值，蛇初始长度为3，因此在蛇的长度上-3才是真正的分数
var grade=document.getElementById("grade");
document.getElementById('grade').value=length-3;

3.定时器开始和关闭

// 关闭定时器
function cleartimer(){
    
    
	clearInterval(timer);
}
// 打开定时器
function starttimer(){
    
    
	// 定时器,蛇自己移动
	timer=setInterval('snake.move()',300);
	// 初始化分数为0
	var grade=document.getElementById("grade");
	document.getElementById('grade').value=0;
}

4.文档开始时执行调用map，food，snake方法，绘制地图，食物和蛇

// 文档加载完成后立即执行
window.onload=function(){
    
    
	map=new Map();
	map.show();
	food=new Food();
	food.show();
	snake=new Snake();
	snake.show();
}

5.html部分添加开始按钮和input分数输出框
input框需要设置为不可更改 readonly=“readonly”

<style type="text/css">
	#nav{
     
     position: relative;width:160px;height: 200px;left: 810px;}
	#play{
     
     float: left;margin-top: 30px;background-color: bisque;cursor: pointer;}
	#grade{
     
     float:right;width: 100px;cursor: pointer;}
</style>
<div id="nav">
	<span id="" style="float:left;cursor: pointer;">分数：</span>
	<input type="text" id="grade" readonly="readonly">
	<button type="button" id="play" onclick="starttimer()">开始游戏</button>
</div>

3.实现效果展示
游戏界面

当蛇碰到墙壁，提示游戏结束

4.完整代码

<script type="text/javascript">
	var map;
	var food;
	var snake;
	var timer;
	//画地图
	function Map(){
    
    
		this.width=750;
		this.height=390;
		this.position='absolute';
		this.top=0;
		this.color='#ddd';
		this._map=null;
		this.show=function(){
    
    
			this._map=document.createElement('div');
			this._map.style.width=this.width+'px';
			this._map.style.height=this.height+'px';
			this._map.style.position=this.position;
			this._map.style.top=this.top+'px';
			this._map.style.backgroundColor=this.color;
			document.getElementsByTagName('body')[0].appendChild(this._map);
		}
	}
	//画食物
	function Food(){
    
    
		this.width=15;
		this.height=15;
		this.position='absolute';
		this.color='#ffa500';
		this.x=0;
		this.x=0;
		this._food=null;
		this.show=function(){
    
    
			if(this._food==null){
    
    
				this._food=document.createElement('div');
				this._food.style.width=this.width+'px';
				this._food.style.height=this.height+'px';
				this._food.style.position=this.position;
				this._food.style.backgroundColor=this.color;
				map._map.appendChild(this._food);
			}
			// 随机出现食物
			this.x = Math.floor(Math.random()*50);
			this.y = Math.floor(Math.random()*26);
			this._food.style.left =this.x*15+'px';
			this._food.style.top = this.y*15 +'px';	
		}
	}
	// 画蛇
	function Snake(){
    
    
		this.width=15;
		this.height=15;
		this.position='absolute';
		this.direct='right';
		this.body=[[3,2,'#66d0de',null],[2,2,'#4746bf',null],[1,2,'#4746bf',null]];//蛇的身体的数组
		
		this.show=function(){
    
    
			var length=this.body.length;
			for(var i=0;i<length;i++){
    
    
				if(this.body[i][3]==null){
    
    
					this.body[i][3]=document.createElement('div');
					this.body[i][3].style.width=this.width+'px';
					this.body[i][3].style.height=this.height+'px';
					this.body[i][3].style.position=this.position;
					this.body[i][3].style.backgroundColor=this.body[i][2];
					this.body[i][3].style.left=this.body[i][0]*15+'px';
					this.body[i][3].style.top=this.body[i][1]*15+'px';
					map._map.appendChild(this.body[i][3]);
				}
				this.body[i][3].style.left=this.body[i][0]*15+'px';
				this.body[i][3].style.top=this.body[i][1]*15+'px';
			}
		}
		// 按键码判断蛇移动的方向
		this.setDirect=function(code){
    
    
			switch(code){
    
    
				case 37:
				this.direct='left';
				break;
				case 38:
				this.direct='up';
				break;
				case 39:
				this.direct='right';
				break;
				case 40:
				this.direct='down';
				break;
			}
		}
		// 蛇移动的方法
		this.move=function(){
    
    
			// 蛇头碰到食物
			if(this.body[0][0]==food.x&&this.body[0][1]==food.y){
    
    
				this.body.push([0,0,'#4746bf',null]);//蛇身加一个
				food.show();
			}
			// 获得蛇身长度
			var length=this.body.length;
			//传递分数值，蛇初始长度为3，因此在蛇的长度上-3才是真正的分数
			var grade=document.getElementById("grade");
			document.getElementById('grade').value=length-3;
			
			console.log(length);
			// 蛇移动时,交换蛇头
			for(var i=length-1;i>0;i--){
    
    
				this.body[i][0]=this.body[i-1][0];
				this.body[i][1]=this.body[i-1][1];
			}
			// 判断按键方向，移动蛇
			if(this.direct=='left'){
    
    
				this.body[0][0]-=1;
			}
			if(this.direct=='right'){
    
    
				this.body[0][0]+=1;
			}
			if(this.direct=='up'){
    
    
				this.body[0][1]-=1;
			}
			if(this.direct=='down'){
    
    
				this.body[0][1]+=1;
			}
			this.show();
			var length=this.body.length;
			// 蛇碰到地图边界和自身时游戏结束
			for(var j=1;j<length-1;j++){
    
    
				if((this.body[0][0]==this.body[j][0]&&this.body[0][1]==this.body[j][1])
			||(this.body[0][0]>49||this.body[0][0]<0||this.body[0][1]>25||this.body[0][1]<0)){
    
    
				alert('游戏结束！您的分数为：'+grade.value+'分');
				cleartimer();
				}
			}
		}
	}
	// 关闭定时器
	function cleartimer(){
    
    
		clearInterval(timer);
	}
	// 打开定时器
	function starttimer(){
    
    
		// 定时器,蛇自己移动
		timer=setInterval('snake.move()',300);
		// 初始化分数为0
		var grade=document.getElementById("grade");
		document.getElementById('grade').value=0;
	}
	// 文档加载完成后立即执行
	window.onload=function(){
    
    
		map=new Map();
		map.show();
		food=new Food();
		food.show();
		snake=new Snake();
		snake.show();
		
		var grade=document.getElementById("grade");
		document.getElementById('grade').value=0;
		
		// 获取按键码
		document.onkeydown = function(event){
    
    
			var code;
			if (window.event) {
    
    
				code = window.event.keyCode;
			} else{
    
    
				code = event.keyCode;
			}
			snake.setDirect(code);
		}
	}
</script>

<style type="text/css">
	#nav{
     
     position: relative;width:160px;height: 200px;left: 810px;}
	#play{
     
     float: left;margin-top: 30px;background-color: bisque;cursor: pointer;}
	#grade{
     
     float:right;width: 100px;cursor: pointer;}
</style>
<div id="nav">
	<span id="" style="float:left;cursor: pointer;">分数：</span>
	<input type="text" id="grade" readonly="readonly">
	<button type="button" id="play" onclick="starttimer()">开始游戏</button>
</div>