SOURCE

var body = document.getElementsByTagName("body")[0];
      var t = body.offsetHeight;
      var l = body.offsetWidth;
      console.log(t,l);
      var count = 0;//记录游戏否在运行中
      var st,sl;
      var s_timer;
      var sn = 15;
      function createSnakeHead(){
      	  st = createRandom(100,t-80,1)[0];
      	  sl = createRandom(200,l-300,1)[0];
      	  var sd = document.createElement("div");
      	  sd.className = "snake-head";
      	  sd.style = "top:"+st+"px;left:"+sl+"px;";
      	  body.appendChild(sd);
      	  
      }
      
       function createFoods(n){
       	 var fts = createRandom(20,t-20,n,6);
      	 var fls = createRandom(20,l-20,n,6);
      	 for(var i=0;i<n;i++){
      	     var fd = document.createElement("div");
      	     fd.className = "foods";
      	     fd.style = "top:"+fts[i]+"px;left:"+fls[i]+"px;";
      	     body.appendChild(fd);
      	 }
      	 
       }
       
       function createRandom(min,max,n,s){
       	  var arr = [];
       	  var _arr = [];
       	  var s = s ||1;
       	 for(var i=min;i<max;i+=s){
       		arr.push(i);
       	 }
       	 arr.sort(function(){
       		return 0.5-Math.random();
       	 });
       	 for(var j=0;j<n;j++){
       		_arr.push(arr[j]);
       	 }
       	 return _arr;
       }
      
      
      function init(n){
      	count = 0;
      	var mt= ["left","right","up","under"];
      	var index = createRandom(0,mt.length,1)[0];
      	createSnakeHead();
      	createFoods(n);
      	//console.log(index);
      	var snakeHead = document.querySelector(".snake-head");
      	snakeHead.setAttribute("data-deg",mt[index]);
      }
      init(sn);//初始化
      
      
      window.onkeydown=function(e){
      	var snakeHead = document.querySelector(".snake-head");
      	var deg = snakeHead.getAttribute("data-deg");
      	//var trun_flag; //trun_flag===0可以上下，trun_flag===1可以左右，
      	var e = e || window.event;
      	var n = e.keyCode;
        switch(n){
        	 case 37:
        	    if(deg!="right"){
        	 	   snakeHead.setAttribute("data-deg","left");
        	      }
        	 break;
        	 case 38:
        	    if(deg!="under"){
        	 	   snakeHead.setAttribute("data-deg","up");
        	      }
        	   
        	 break;
        	 case 39:
        	     if(deg!="left"){
        	 	   snakeHead.setAttribute("data-deg","right");
        	      }
        	   
        	 break;
        	 case 40:
        	    if(deg!="up"){
        	 	   snakeHead.setAttribute("data-deg","under");
        	      }
        	   
        	 break;
        }
      	
      	//console.log(n);
      	
      }
   
   
	function move(){
		       var snakeHead1 = document.querySelector(".snake-head");
		       var foods = document.querySelectorAll(".foods");  
		       var deg = snakeHead1.getAttribute("data-deg");
		       var f = eat(snakeHead1,foods);
		       addBody(f);
		       var snakeBody = document.querySelectorAll(".snake-body");
		       var sbl = snakeBody.length;
		       follow(snakeHead1,snakeBody);
      	         if(deg==="up"){
      	  	        snakeHead1.style.top = snakeHead1.offsetTop-6 + "px";
      	  	        
      	          }
      	         if(deg==="under"){
      	  	        snakeHead1.style.top = snakeHead1.offsetTop+6 + "px";
      	  	        
      	          }
      	         if(deg==="left"){
      	  	        snakeHead1.style.left = snakeHead1.offsetLeft-6 + "px";
      	  	        
      	          }
      	         if(deg==="right"){
      	  	        snakeHead1.style.left = snakeHead1.offsetLeft+6 + "px";
      	  	        
      	          }
      	         if(snakeHead1.offsetTop<=0||snakeHead1.offsetTop>=t-6||snakeHead1.offsetLeft<=0||snakeHead1.offsetLeft>=l-6){
      	  	            clearInterval(s_timer);
      	  	            alert("GAME OVER点击“确定”后点击鼠标左键重新开始");
      	  	         	clear(snakeHead1);
      	  	         	clear(foods);
      	  	         	clear(snakeBody);
      	  	            init(sn);
      	  	       
      	  	           
      	           }
      	         if(foods.length===0){
      	  	            clearInterval(s_timer);
      	  	            alert("VICTORY点击“确定”后点击鼠标左键重新开始");
      	  	         	clear(snakeHead1);
      	  	         	//clear(foods);
      	  	         	clear(snakeBody);
      	  	            init(sn+=5);
      	  	            
      	           }
      	        
	}
   
   
   
   
       function eat(snakeHead,foods){
       	   var isEat = false; 
    	   var len = foods.length;
    	   var eat_st = snakeHead.offsetTop;
    	   var eat_sl = snakeHead.offsetLeft;
    	   for(var i=0;i<len;i++){
    	   	   if(Math.abs(eat_st-foods[i].offsetTop)<6&&Math.abs(eat_sl-foods[i].offsetLeft)<6){
    	   	   	  clear(foods[i]);
    	   	   	  isEat = true;
    	   	   	 
    	   	   }
    	   }
    	   
    	  return isEat;
       }
       
       function addBody(f){
       	   	 if(f){
       	   	 	 var sbody = document.createElement("div");
       	              sbody.className = "snake-body";
       	   	 	   body.appendChild(sbody);
       	   	 }
       }
       
      function follow(shead,sbody){
      	var sb_len = sbody.length;
      	 if(sb_len>0){
      	     var i = sb_len-1;
      	 	 while(i>0){
      	 	 	sbody[i].style = "top:"+ sbody[i-1].offsetTop +"px;left:"+ sbody[i-1].offsetLeft +"px;";
      	 	 	i--;
      	 	 }
      	 	  sbody[0].style="top:"+ shead.offsetTop +"px;left:"+ shead.offsetLeft +"px;";
      	 }
      	 return false;
      }
       
       
       
    
      document.onclick=function(){
      	        	if(count===0){
      	        		s_timer = setInterval(move,100.2548-sn+10);
      	        		count++;
      	        	}
      	        document.getElementById("descr").style.display = "none";
      	        	
      	        }
   
     	

      	     
     function clear(ele){
     	 var len = ele.length;
     	 if(len===undefined){
     		  	 ele.parentNode.removeChild(ele);
     		 }else{
     		     for(var i=0;i<len;i++){
     		     ele[i].parentNode.removeChild(ele[i]);
     	     }
     	  }
     	}	 
     	  

 <div id="descr">点击鼠标左键开始游戏!!! 用方向键↑ ↓ ← →控制运动方向!!!</div>

*{margin:0;padding:0}
	  	html,body{width:100%;height:100%}
	  	.snake-head,.foods{
	  		position:absolute;
	  		width:10px;
	  		height:10px;
	  		
	  	}
	  	.snake-head{
	  		animation:blink .8s infinite;
	  		background:#09FF77;
	  		
	  	}
	  	@keyframes blink{
	  		0%{
	  			box-shadow: 0 0 1px 2px #09FF77;
	  		}
	  		50%{
	  			box-shadow: 0 0 1px 2px #09FF7745;
	  		}
	  		100%{
	  			box-shadow: 0 0 0 0 #09FF77;
	  		}
	  	}
	  	.foods{
	  		background:#000;
	  	}
	  	.snake-body{
	  		position:absolute;
	  		width:10px;
	  		height:10px;
	  		background: #f00;
	  	}
	  	.outer{
	  		position:absolute;
	  		top:0;
	  		left:0;
	  		width:100%;
	  		height:100%;
	  	 }	
	  	#descr{
	  		text-align: center;
	  		color:#f00;
	  		font-size:28px;
	  	}