SOURCE

	//声明画布
		var canvas=document.getElementById("canvas");
		var ctx=canvas.getContext("2d");
		//声明空数组来保存蛇的长度
		var snakeBody=[];
		var snakeMove;//蛇移动
		//蛇默认方向
		var speedX=20;
		var speedY=0;
		//食物
		var newFood;
		//得分
		var goal;
		//随机数
		function ran(min,max){
			return parseInt(Math.random()*(max-min+1)+min);
		}
		//随机颜色
		function col(){
			var r=ran(0,255);
			var g=ran(0,255);
			var b=ran(0,255);
			return "rgb("+r+","+g+","+b+")";
		}
		//创建蛇
		function Snake(x,y,color){
			this.x=x;
			this.y=y;
			this.width=20;
			this.height=20;
			this.color=color;
		}
		Snake.prototype.drawSnake=function(ctx){
			ctx.beginPath();
			ctx.fillStyle=this.color;
			ctx.fillRect(this.x,this.y,this.width,this.height);
			ctx.closePath();
		}
		//初始化蛇
		function initSnake(){
			for(var j=0;j<3;j++){
				var init=new Snake(100-j*20,100,"lightseagreen");
				init.drawSnake(ctx);
				snakeBody.push(init);
			}
		}
		//蛇移动
		function snakeM(){
			snakeMove=setInterval(function(){
				ctx.clearRect(snakeBody[snakeBody.length-1].x,snakeBody[snakeBody.length-1].y,20,20);//清除数组中最后一项的矩形区域
				var init=new Snake(snakeBody[0].x+speedX,snakeBody[0].y+speedY,"lightseagreen");//向前添加矩形
				init.drawSnake(ctx);
				snakeBody.unshift(init);//想数组中前面添加新的对象
				snakeBody.pop();//删除最后一个对象
				//同时执行三个检测碰撞函数
				HitCheck();
				foodHitCheck();
				selfHitCheck()
			},150)
		}
		//结束函数
		function theEnd(){
			ctx.clearRect(0,0,canvas.width,canvas.height);
			clearInterval(snakeMove);
			start.style.display="block";
			end.style.display="block";
			endc.style.display="block";
			endn.style.display="block";
			ipt.style.display="block";
			ipt.value=null;
			score.style.display="none";
			endc.innerHTML="Score："+goal;
			endn.innerHTML=_name;
			start.innerHTML="Restart";
			creatScore();
		}
		//碰壁检测
		function HitCheck(){
			if(snakeBody[0].x<0||snakeBody[0].x==canvas.width||snakeBody[0].y<0||snakeBody[0].y==canvas.height){
				theEnd();
			}
		}
		//碰自己检测
		function selfHitCheck(){
			for(var i=1;i<snakeBody.length;i++){
				if(snakeBody.length>=3){
					//如果头部碰到身体的除了头部的任何一项
					if(snakeBody[0].x==snakeBody[i].x&&snakeBody[0].y==snakeBody[i].y){
						theEnd();
					}
				}
			}
		}
		//按键
		function Change(ev){
			var evKeyCode = ev.keyCode;
			switch(evKeyCode){
				case 37:
					if(speedX<=0){speedX=-20;speedY=0;}
					break;
				case 38:
					if(speedY<=0){speedX=0;speedY=-20;}
					break;
				case 39:
					if(speedX>=0){speedX=20;speedY=0;}
					break;
				case 40:
					if(speedY>=0){speedX=0;speedY=20;}
					break;
			}
		}
		document.onkeydown = function(event){
			var ev = event || window.event;
			Change(ev);
		}
		//创建食物
		function Creatfood(x,y){
			this.x=x;
			this.y=y;
			this.height=20;
			this.width=20;
			this.drawfood=function(){
				ctx.beginPath();
				ctx.fillStyle="palevioletred";
				ctx.fillRect(this.x,this.y,20,20);
				ctx.closePath();
			}
		}
//		var newFood=new Creatfood(ran(1,29)*20,ran(1,29)*20);
//		newFood.drawfood();
		//吃食物
		function foodHitCheck(){
			if(newFood.x==snakeBody[0].x&&newFood.y==snakeBody[0].y){
				newFood=new Creatfood(ran(1,29)*20,ran(1,29)*20);
				newFood.drawfood();
				//判断食物是否在身上生成
				for(var i=1;i<snakeBody.length;i++){
					if(newFood.x==snakeBody[i].x&&newFood.y==snakeBody[i].y){
						newFood=new Creatfood(ran(1,29)*20,ran(1,29)*20);
						newFood.drawfood();
					}
				}
				var init=new Snake(snakeBody[0].x+speedX,snakeBody[0].y+speedY,"lightgreen");
//				init.drawSnake(ctx);
				snakeBody.push(init);
				goal++;
				score.innerHTML="Score："+goal;
			}
		}
		//其他界面
		var start=document.getElementById("start");
		var title=document.getElementById("title");
		var end=document.getElementById("end");
		var score=document.getElementById("score");
		var ipt=document.getElementById("ipt");
		var _name;
		start.onclick=function(){
			start.style.display="none";
			title.style.display="none";
			end.style.display="none";
			endc.style.display="none";
			endn.style.display="none";
			ipt.style.display="none";
			score.style.display="block";
			score.innerHTML="Score：0";
			if(ipt.value){
				_name=ipt.value;
			}else{
				_name="player";
			}
			
			snakeBody=[];
			speedX=20;
			speedY=0;
			goal=0;
			initSnake();
			snakeM();
			var nx=ran(1,29)*20
			var ny=ran(1,29)*20
			if(ny==100&&(nx==100||nx==80||nx==60)){
				newFood=new Creatfood(nx,ny);
				newFood.drawfood();
			}
			newFood=new Creatfood(nx,ny);
			newFood.drawfood();
		}
		//游戏记录
		var names=document.getElementById("names");
		function creatScore(){
			var li=document.createElement("li");
			li.innerHTML="<span class='na'>"+_name+"：</span><span class='sc'>"+goal+"</span>"
			names.appendChild(li);
		}

<canvas id="canvas" width="600" height="600"></canvas>
		<div id="title">Retro Snaker</div>
		<div id="end">Game Over</div>
		<div id="endn"></div>
		<div id="endc"></div>
		<input type="text"  id="ipt" placeholder="Enter your name..."/>
		<div id="start">Start</div>
		<div id="score"></div>
		<div id="box">
			<ul id="names">
				<li style="border-bottom: 1px solid lightseagreen;font-size: 30px;">Scoreboard</li>
				<!--<span class='na'>player</span><span class='sc'>100</span>-->
			</ul>
		</div>
		<div id="exp">
			<span>This project is no used local storage or cookies,if you want to play with your friends,please do not refresh the website.</span>
		</div>

*{
				margin: 0;
				padding: 0;
			}
			body{
				background: #666666;
			}
			canvas{
				border: 10px solid lightseagreen;
				display: block;
				margin: 50px auto 0;
			}
			li{	
				list-style: none;
			}
			#start{
				width: 100px;
				height: 55px;
				line-height: 55px;
				text-align: center;
				color: white;
				background: lightseagreen;
				border-radius: 15px;
				cursor: pointer;
				position: absolute;
				left: 50%;
				top: 540px;
				margin-left: -50px;
				margin-top: -22.5px;
			}
			#title{
				width: 600px;
				height: 100px;
				line-height: 100px;
				text-align: center;
				position: absolute;
				left: 50%;
				margin-left: -300px;
				top: 230px;
				font-size: 80px;
				color: lightseagreen;
			}
			#end{
				width: 600px;
				height: 100px;
				line-height: 100px;
				text-align: center;
				position: absolute;
				left: 50%;
				margin-left: -300px;
				top: 25%;
				font-size: 80px;
				color: lightseagreen;
				display: none;
			}
			#endc{
				width: 600px;
				height: 100px;
				line-height: 100px;
				text-align: center;
				position: absolute;
				left: 50%;
				margin-left: -300px;
				top: 40%;
				font-size: 80px;
				color: lightseagreen;
				display: none;
			}
			#endn{
				width: 600px;
				height: 100px;
				line-height: 100px;
				text-align: center;
				position: absolute;
				left: 50%;
				margin-left: -300px;
				top: 100px;
				font-size: 80px;
				color: lightseagreen;
				/*display: none;*/
			}
			#score{
				width: 600px;
				height: 100px;
				line-height: 100px;
				text-align: center;
				position: absolute;
				left: 50%;
				margin-left: -300px;
				top: 85%;
				font-size: 50px;
				color: lightseagreen;
				display: none;
			}
			#ipt{
				height: 100px;
				width: 500px;
				line-height: 100px;
				font-size: 50px;
				outline: none;
				background: #666;
				border: 0;
				border-bottom: 5px solid lightseagreen;
				display: block;
				position: absolute;	
				color: lightseagreen;
				left: 49%;
				margin-left: -250px;
				top: 370px;
				padding: 0 20px;
			}
			#box{
				width: 200px;
				position: absolute;	
				color: lightseagreen;
				left: 30%;
				margin-left: -250px;
				top: 7%;
			}
			#box li{
				text-align: center;
				font-size: 20px;
				overflow: hidden;
			}
			p{
				font-size: 20px;
			}
			.na{
				/*width: 50px;*/
				display: block;
				text-align: left;
				float: left;
			}
			.sc{
				width: 50px;
				display: block;
				text-align: left;
				float: right;
			}
			#exp{
				width: 455px;
				/*background: palegreen;*/
				position: absolute;
				left:84%;
				margin-left: -250px;
				top: 10%;
				color: lightseagreen;
				font-size: 20px;
			}
			@media only screen and (max-width: 1690px) {
				#exp{display: none;}
			}
			@media only screen and (max-width: 1320px) {
				#box{display: none;}
			}