<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> * { margin: 0; padding: 0; } #container { margin: 50px; border:1px solid #ccc; border-bottom: none; border-right: none; position: relative; } ul { list-style: none; } ul li { border:1px solid #ccc; border-top: none; border-left: none; float: left; } #container > div { float: right; } #person > div { background-color: #00ff00; position: absolute; left: 0px; top: 0px; } .food { position: absolute; left: 0px; top: 0px; background: blue; } /*.personBody{ opacity:0.5; }*/ </style> </head> <body> <div id="container"> <ul id="uls"></ul> <button id="btn">开始游戏</button> <div id="box">积分：0</div> <div id="person"></div> </div> <script type="text/javascript" > var container = $id("container"), // 定时器 timer = null, food = null, index=0; uls = $id("uls"), btn = $id("btn"), person=$id("person"), box=$id("box"), personDiv=$tagName(person,"div"), // 获取li节点 lis=$tagName(uls,"li"), // size即是宽高,小正方形宽是10，高是10，水平有10个小正方形，竖直有10个小正方形 // 这里数值是20，其实是21，因为边框有1像素 // 创建对象 datas = {size:20,x:10,y:10}, // 速度200，键值39 perDate = {speed:200,code:39}; // 初始化游戏 function init(){ creatMap(); } // 创建地图 function creatMap(){ container.style.width = (datas.size +1 ) * datas.x + "px"; for (var i = 0; i < datas.x * datas.y; i++) { var oDiv = document.createElement("li"); oDiv.style.width = oDiv.style.height = datas.size + "" + "px"; uls.appendChild(oDiv); // 给li加索引 oDiv.index=i; } start(); } // 点击开始游戏 function start(){ btn.onclick = function(){ creatPerson(); movePerson(); bindPerson(); creatFood(); } } function movePerson() { timer = setInterval(function(){ if(isOut() || isSelf()){ alert("game over"); clearInterval(timer); } if(collapse(personDiv[0],food)){ // 用appendchild()进行剪切粘贴 food.removeAttribute("class"); person.appendChild(food); creatFood(); number(); } 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(perDate.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; } },perDate.speed) } function bindPerson(){ document.onkeydown = function(e){ var e = e || window.event; switch(e.keyCode){ case 37: perDate.code = 37; break; case 38: perDate.code = 38; break; case 39: perDate.code = 39; break; case 40: perDate.code = 40; break; } } } function collapse(elements1,elements2){ var l1 = elements1.offsetLeft; var r1 = elements1.offsetLeft+elements1.offsetWidth; var t1 = elements1.offsetTop; var b1 = elements1.offsetTop+elements1.offsetHeight; var l2 = elements2.offsetLeft; var r2 = elements2.offsetLeft+elements2.offsetWidth; var t2 = elements2.offsetTop; var b2 = elements2.offsetTop+elements2.offsetHeight; if(r1<=l2 || l1>=r2 || t1>=b2 || b1<=t2){ return false; }else{ return true; } } // 改变积分 function number(){ index+=10; box.innerHTML="积分:"+index; } // 是否出界 function isOut(){ for (var i = 0; i < lis.length; i++) { if(collapse(lis[i],personDiv[0])){ return false; } } return turn; } // 是否撞到自己 function isSelf(){ for (var i = 1; i < personDiv.length; i++) { if(collapse(personDiv[i],personDiv[0])){ return true; } } return false; } // 创建食物 function creatFood(){ var hrr=[]; for (var i = 0; i < lis.length; i++) { if(isFilter(lis[i])){ hrr.push(lis[i]); } } function isFilter(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要定义为全局变量 food = document.createElement("div"); food.className="food"; food.style.width=food.style.height=datas.size+1+"px"; food.style.left=hrr[random].offsetLeft+"px"; food.style.top=hrr[random].offsetTop+"px"; container.appendChild(food); } // 创建人物，点击开始游戏，人物即出来 function creatPerson(){ var oPerson = document.createElement("div"); oPerson.style.width = oPerson.style.height = datas.size +1 + "px"; oPerson.index=0; person.appendChild(oPerson); } // 获取id的方法 function $id(id){ return document.getElementById(id) } // 获取集合元素的方法 function $tagName(parend,child) { return parend.getElementsByTagName(child); } init(); </script> </body> </html>
最后显示界面
