html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>贪吃蛇</title> <link rel="stylesheet" type="text/css" href="css/SnakeCSS.css" /> <script type="text/javascript" src="js/Snake.js"></script> </head> <body> <div class="map"> </div> </body> </html>js
window.onload=function(){ //添加元素 creatSnake(); xcount=1600/size; ycount=800/size; creatDouDou(); creatEye(); eyePosition(); //为什么蛇一直运动·是因为有定时器在重复调用 time=setInterval("snakeMove()",100); var body=document.getElementsByTagName("body")[0]; //给body加键盘事件 body.onkeydown=function(e) { // alert(e.keyCode); if(e.keyCode==40) { direction="down"; } else if(e.keyCode==38) { direction="up"; } else if(e.keyCode==37) { direction="left"; } else if(e.keyCode==39) { direction="right"; } } } //蛇身刚开始长度是 var startLength=4; var size=20; var startLeft=600; var startTop=400; var direction="right"; //定义两个数组来进行对蛇地运动进行存储 var snakeList=new Array(); var posistionList=new Array(); var time; //创造蛇身 function creatSnake() { // var Div=document.createElement("div"); // //给添加的元素设置类标签名 // Div.setAttribute("class","snake"); // //获取的是数组的集合所以后面都要加入[] // var map=document.getElementsByClassName("map")[0]; // //添加该标签给html // map.appendChild(Div); for(var i=0;i<startLength;i++) { var snakeDiv=document.createElement("div"); snakeDiv.setAttribute("class","snake"); var map=document.getElementsByClassName("map")[0]; //依次把元素添加到末尾 snakeDiv.style.left=(startLeft-i*size)+"px"; snakeDiv.style.top=startTop+"px"; map.appendChild(snakeDiv); snakeList.push(snakeDiv); //创建一个数组每个元素用来装蛇地位置 var positionDiv=document.createElement("div"); positionDiv.style.left=snakeDiv.style.left; positionDiv.style.top=snakeDiv.style.top; //?为什么要把建立地放进去 map.appendChild(positionDiv); posistionList.push(positionDiv); if(i==0) { snakeDiv.style.background="red"; } } } function creatEye() { var head=document.getElementsByClassName("snake")[0]; //alert(head.style.backgroundColor); for(var j=0;j<2;j++) { var snakeEye=document.createElement("div"); snakeEye.setAttribute("class","eye"); head.appendChild(snakeEye); } } function eyePosition() { var eye=document.getElementsByClassName("eye"); if(direction=="left"||direction=="right") { eye[0].style.left=8+"px"; eye[0].style.top=4+"px"; eye[1].style.right=8+"px"; eye[1].style.top=12+"px"; } else if(direction=="up"||direction=="down") { eye[0].style.left=4+"px"; eye[0].style.top=8+"px"; eye[1].style.right=4+"px"; eye[1].style.top=8+"px"; } } function snakeMove() { //改的是数组中地元素为什么蛇会变 if(direction=="right") {//一般从文档中获取都是字符串 var sRight=snakeList[0].style.left; snakeList[0].style.left=(parseInt(sRight))+size+"px"; } else if(direction=="left") { var sLeft=snakeList[0].style.left; snakeList[0].style.left=(parseInt(sLeft))-size+"px"; } else if(direction=="up") { var sTop=snakeList[0].style.top; snakeList[0].style.top=(parseInt(sTop))-size+"px"; } else if(direction="down") { var sDown=snakeList[0].style.top; snakeList[0].style.top=(parseInt(sDown))+size+"px"; } for(var i=1;i<snakeList.length;i++) { snakeList[i].style.top=posistionList[i-1].style.top; snakeList[i].style.left=posistionList[i-1].style.left; } for(var i=0;i<posistionList.length;i++) { posistionList[i].style.top=snakeList[i].style.top; posistionList[i].style.left=snakeList[i].style.left; } //移动牵扯方向问题 eyePosition(); //移动牵扯游戏结束问题 if(snakeList[0].style.left==doudou.style.left&&snakeList[0].style.top==doudou.style.top) { MoveDouDou(); changeBody(); } if((parseInt(snakeList[0].style.left)<0 ||parseInt(snakeList[0].style.top)<0||parseInt(snakeList[0].style.left)>1580||parseInt(snakeList[0].style.top)>780)&&snakeList.length>0) { clearInterval(time); gameOver(); } } var doudou; function creatDouDou() {var map=document.getElementsByClassName("map")[0]; var pleft=Math.round(Math.random()*xcount)*size; var ptop=Math.round(Math.random()*ycount)*size; doudou=document.createElement("div"); doudou.setAttribute("class","doudou"); doudou.style.left=pleft+"px"; doudou.style.top=ptop+"px"; map.appendChild(doudou); } function MoveDouDou(){ var pleft=Math.round(Math.random()*xcount-1)*size; var ptop=Math.round(Math.random()*ycount-1)*size; doudou.style.left=pleft+"px"; doudou.style.top=ptop+"px"; } function changeBody() { var snakeDiv=document.createElement("div"); snakeDiv.setAttribute("class","snake"); var map=document.getElementsByClassName("map")[0]; snakeDiv.style.left=snakeList[snakeList.length-1].style.left; snakeDiv.style.top=snakeList[snakeList.length-1].style.top; map.appendChild(snakeDiv); snakeList.push(snakeDiv); var positionDiv=document.createElement("div"); positionDiv.style.left=snakeDiv.style.left; positionDiv.style.top=snakeDiv.style.top; map.appendChild(positionDiv); posistionList.push(positionDiv); } function gameOver() { window.location.reload(); //console.log(Location); // var map=document.getElementsByClassName("map")[0]; // var length=map.children.length; // //alert(length); // var snakeLength=snakeList.length; // for(var i=0;i<snakeList.length;i++) // { // //console.log("游戏结束！！！"); // for(var j=0;j<length;i++) // {if(map.children[j]!=null) // { // //console.log(map.children); // map.removeChild(map.children[j]); // //alert(map.children.length); // } // // } // for(var i=0;i<snakeLength;i++) // { // snakeList.pop(); // positionList.pop(); // } // break; // // } //restart(); } //function restart() //{ // console.log("a"); // creatSnake(); // creatEye(); // eyePosition(); // creatDouDou(); time=setInterval("snakeMove()",100); //}css
*{ margin: 0px; padding: 0px; } .map{ width: 1600px; height: 800px; border: 1px solid #000; box-sizing: border-box; background: gray; margin: 0 auto; position:relative; } .snake{ width: 20px; height: 20px; background:greenyellow; border-radius: 20px; position: absolute; } .eye{ width: 4px; height: 4px; background: black; border-radius: 4px; position:absolute; } .eye1{ width: 1px; height: 1px; background: white; border-radius: 1px; position:absolute; } .doudou{ width: 20px; height: 20px; background:gold; border-radius: 20px; position: absolute; }