JS--原生js写的简易贪吃蛇

原生js写的简易贪吃蛇
github: https://github.com/hhwy-omh/js_procedure
还有待完善的地方，请自行修改。

附注释

• 全局变量（写在最前）

	/*
		全局变量
	*/
	
	//地图
	var map;
	//食物
	var food;
	//蛇
	var snake;
	//开始按钮
	var start;
	//数量
	var dates;
	//计时
	var min;
	//开始按钮的状态，1为开始，2为暂停
	var rpqn = 1;

---

• 地图

	//地图
	function Map(){
		this.width = 800;
		this.height = 400;
		this.top = 50;
		this.left = 350;
		this.color = "#ccc";
		this.position = "absolute";
		this._map = null;

		this.show = function(){
			this._map = document.createElement('div');
			this._map.style.height = this.height+'px';
			this._map.style.width = this.width+'px';
			this._map.style.top = this.top+'px';
			this._map.style.left = this.left+'px';
			this._map.style.backgroundColor = this.color;
			this._map.style.position = this.position;
			document.getElementsByTagName("body")[0].appendChild(this._map);
		}

	}

---

• 食物

	//食物
	function Food(){
		this.width = 20;
		this.height = 20;
		this.border_redius = 10;
		this.color = 'green';
		this.position = 'absolute';
		this.x = 0;
		this.y = 0;
		this._food = null;
		this.show = function() {
			//	判断食物是否创建
			if(this._food == null){
			this._food = document.createElement('div');
			this._food.style.height = this.height+'px';
			this._food.style.width = this.width+'px';
			this._food.style.borderRadius=this.border_redius+'px';
			this._food.style.backgroundColor = this.color;
			this._food.style.position = this.position;

			map._map.appendChild(this._food);
			}
			//	创建完成的食物，渲染位置
			this.x = Math.floor(Math.random()*40);
			this.y = Math.floor(Math.random()*20);
			this._food.style.left = this.x*20+'px';
			this._food.style.top = this.y*20+'px';
		}
	}

---

• 蛇

	//蛇
	function Snake(){
		this.width = 20;
		this.height = 20;
		this.direct = 'right';
		this.directs = 37;
		this.nubmers = 0;
		this.position = 'absolute';
		this.body = [[2,1,'red',null],[1,1,'blue',null],[0,1,'blue',null]];
		this.nubmer = document.getElementById("nubmers");

		this.show = function() {
			//	蛇长度
			var length = this.body.length;
			//	渲染蛇身
			for(var i=0;i0;i--) {
				this.body[i][0] = this.body[i-1][0];
				this.body[i][1] = this.body[i-1][1];
			}
			//	更新蛇身方向
			if(this.direct == 'right'){
				this.body[0][0] +=1;
			}
			if(this.direct == 'left'){
				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();
			//	撞墙判断
			if(this.body[0][0] < 0 || this.body[0][0] > 39 || this.body[0][1] < 0 || this.body[0][1] > 19){
				alert("撞墙了");
				clearInterval(start);
				history.go(0);
			}
			//	吃到自己判断
			for(var x=1;x

---

• 计时

	//计时
	function Min(){
		// 分和秒
		this.times = [0,0];
		//每秒要加+1的数
		this.nubmers = 0;
		this.ms = function(){
			//	秒数到60，分钟+1
			if(this.times[1]>58){
				this.times[0]+=1;
				this.nubmers=0;
			}
			this.nubmers += 1;
			this.times[1]='0'+this.nubmers;
			if(this.times[1]>9){
				this.times[1]=this.nubmers;
			}
			this.dates = document.getElementById("dates");
			//	重新渲染时间
			this.dates.innerHTML = "0"+this.times[0]+" : "+this.times[1];
			if(this.times[0]>9){
			this.dates.innerHTML = this.times[0]+" : "+this.times[1];
			}
	}
	}

---

• 开始按钮及重新开始按钮

	//开始
	function Start(){
		this.spans = document.getElementById("Start");
		//	点击后开始按键变为暂停，反之开始。
		if(rpqn == 1){
			start = setInterval('snake.move()',200);
			dates = setInterval('min.ms()',1000);
			rpqn = 2;
			this.spans.innerHTML="暂停";
		}else{
			clearInterval(start);
			clearInterval(dates);
			rpqn = 1;
			this.spans.innerHTML="开始";
		}
	}

	//重新开始
	function Restart(){
		clearInterval(start);
		history.go(0);
	}

---

页面加载后执行

	//页面加载后，执行
	window.onload = function() {
		//	地图
		map = new Map();
		map.show();
		//	食物
		food = new Food();
		food.show();
		//	蛇
		snake = new Snake();
		snake.show();
		//	时间
		min = new Min();
		//	键盘事件
		document.onkeydown = function() {
			var code;
			if(window.event) {
				code = window.event.keyCode;
			}else{
				code = event.keyCode;
			}
			//	将值传给蛇的方法
			snake.setDirect(code);
		}
	}

---