1、创建地图 （10x10,宽度20格子）
2、创造人物（蛇头，设置初始位置，绝对位置【0,0】，开始游戏游戏后方向，速度）
3、创造食物（随机坐标，上一个结束后创建下一个，不能生成在蛇身体位置，可以格子和蛇身加唯一index）
4、移动人物（蛇头，监测键盘keycode 37、38、39、40，相应位置改变）
5、碰撞食物（事件判断，食物加入到蛇头后面，跟随移动，积分增加）
6、游戏结束判断（1、超出边框【可以检测蛇头头部位置或和所有格子碰撞检测】 2、撞击自身）
拓展：
1、控制游戏难度，改变定时器时间，改变speed
2、排行榜，企业应用，游戏结束弹出表单，可以填写信息到排行榜。
<html> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <style type="text/css"> *{margin:0; padding: 0;} ul{ list-style: none;} #container{ border: 1px solid #ccc; border-bottom: none; border-right: none; position: relative; } #container > div{ float: right;} #uls{} #uls li{ border: 1px solid #ccc; border-top: none; border-left: none; float: left; } #person > div{ background: #0f0; position: absolute; left: 0px; top: 0px; font-size: 10px; } .food{ position: absolute; left: 0; top:0; background: #f00; } .personBody{ //蛇身颜色稍淡 opacity: 0.5; } </style> </head> <body> <div id='container'> <ul id='uls'> </ul> <button id='btn'>开始游戏</button> <div id='num'>积分:0</div> <div id='person'> </div> </div> <script type="text/javascript"> var container = $id('container'), uls = $id('uls'), btn = $id('btn'), timer = null, food = null, point = $id('num'), index = 0, person = $id('person'), personDiv = $tagName(person,'div'), lis = $tagName(uls,'li'), perData = {speed:200,code:39}, datas = {size:20,x:10,y:10}; //size是元素宽高，xy横纵数量 function init(){ //初始化游戏 createMap(); } function createMap(){ //创建地图 container.style.width = container.style.height = (datas.size+1)*datas.x; for(i=0;i<datas.x*datas.y;i++){ var k = document.createElement('li'); k.style.width = k.style.height = datas.size; k.index = i; uls.appendChild(k); } start(); } function start(){ //点击开始游戏 btn.onclick = function(){ createPerson(); movePerson(); bindPerson(); createFood(); } } function num(){ //增加积分 index+=10; point.innerHTML = "积分:"+index; } function createFood(){ //创建食物 var hrr = []; for(var i=0;i<lis.length;i++){ if(is_Filter(lis[i])){ hrr.push(lis[i]); } } function is_Filter(li){ //格子和蛇位置重合位置不可以生成食物 for(var i=0;i<personDiv.length;i++){ if(li.index == personDiv[i].index){ return false; } } return true; } var random = Math.floor(Math.random()*(hrr.length-1)); food = document.createElement('div'); food.style.width = food.style.height = datas.size+1+'px'; food.className = 'food'; food.style.left = hrr[random].offsetLeft+'px'; food.style.top = hrr[random].offsetTop+'px'; container.appendChild(food); } function createPerson(){ //创造人物 var p = document.createElement('div'); p.style.width = p.style.height = datas.size+1+'px'; p.index = 0; person.appendChild(p); } // 是否撞到边界 function isOut(){ for(var i=0;i<lis.length;i++){ if(col(lis[i],personDiv[0])){ //有碰撞，返回false return false; } } return true; } // 是否撞到自身撞到自身和出边界 function isSelf(){ for(var i=1;i<personDiv.length;i++){ if(col(personDiv[0],personDiv[i])){ return true; } } return false; } //定时器人移动 function movePerson(){ timer = setInterval(function(){ //判断是否 if(isOut() || isSelf()){ alert('游戏结束'); clearInterval(timer); } //判断是否撞到目标 if(col(personDiv[0],food)){ food.className = 'personBody'; person.appendChild(food); createFood(); num(); } for(var i=personDiv.length-1;i>0;i--){ personDiv[i].style.left = personDiv[i-1].offsetLeft+"px"; personDiv[i].style.top = personDiv[i-1].offsetTop+"px"; personDiv[i].index = personDiv[i-1].index; } switch(perData.code){ case 37: personDiv[0].style.left = personDiv[0].offsetLeft-(datas.size+1)+'px'; personDiv[0].index-=1; break; case 38: personDiv[0].style.top = personDiv[0].offsetTop-(datas.size+1)+'px'; personDiv[0].index-=datas.x; break; case 39: personDiv[0].style.left = personDiv[0].offsetLeft+(datas.size+1)+'px'; personDiv[0].index+=1; break; case 40: personDiv[0].style.top = personDiv[0].offsetTop+(datas.size+1)+'px'; personDiv[0].index+=datas.x; break; } },perData.speed); } //监测鼠标点击 function bindPerson(){ document.onkeydown = function(e){ var e = window.event || e; switch(e.keyCode){ case 37: perData.code = 37; break; case 38: perData.code = 38; break; case 39: perData.code = 39; break; case 40: perData.code = 40; break; } } } function $id(id){ return document.getElementById(id); } function $tagName(parent,child){ return parent.getElementsByTagName(child); } //检测碰撞函数 function col(el1,el2){ //el1 蛇 //el2 新点 var f1 = el1.offsetLeft+el1.offsetWidth; var f2 = el1.offsetLeft; var f3 = el1.offsetTop+el1.offsetHeight; var f4 = el1.offsetTop; var s1 = el2.offsetLeft; var s2 = el2.offsetLeft+el2.offsetWidth; var s3 = el2.offsetTop; var s4 = el2.offsetTop+el2.offsetHeight; if(f1<=s1 || f2>=s2 || f3<=s3 || f4>=s4){ //仅有的四种没有撞击状态 return false; }else{ return true; } } init(); </script> </body> </html>