本文实例为大家分享了js贪吃蛇小游戏demo，纯js和css完成，供大家参考，具体内容如下
<!doctype html><html><meta charset="utf-8"> <head><style>*{ margin: 0; padding:0;} .content{ position: absolute; width: 500px; height: 500px; background-color: #212121; } .colo{ width: 48px; height: 48px; background-color: #E6E6E6; border: 1px solid #466F85; float: left; } .head{ /*background-color: #49DF85;*/ background-image: url(./img/22.jpg); border-radius: 10px; background-size: 100%; position: absolute; height: 48px; width: 48px; } .fruit{ /*background-color: #49DF85;*/ background-image: url(./img/fruit.jpg); background-size: 100%; position: absolute; height: 48px; width: 48px; } .score{ font-family: '黑体'; left:600px; position: absolute; height: 50px; width: 200px; background-color: #212121; color: #FFF; } .newbody{ position: absolute; width: 48px; height: 48px; background-image: url(./img/33.jpg); background-size: 100%; } .btn{ font-family: '黑体'; left:600px; top: 100px; position: absolute; height: 50px; width: 100px; background-color: #1193FF; color: #FFF; text-align: center; line-height: 50px; font-size: 20px; cursor: pointer; border-radius: 15px; }</style></head><body><div id="content"></div><div id="stop">停止游戏</div><div style="top:180px" id="start">开启游戏</div><div style="top:380px" id="gameWay">游戏状态：</div><div id="score" >分数：<p></p></div><script type="text/javascript" >//添加状态var stop=document.getElementById('stop');var start=document.getElementById("start");var gameWay=document.getElementById('gameWay');start.onclick=function(){ head.value='2'; incident=setInterval(move,200);}stop.onclick=function(){ clearInterval(incident);}//var content=document.getElementById("content"); for(var i=0;i<100;i++){ var div=document.createElement("div"); div.className="colo"; content.appendChild(div); }var scoreId=document.getElementById("score");var scoreNum=0;var scoreCon=document.createElement("p");// var scoreText=document.createTextNode(scoreNum);// scoreCon.appendChild(scoreText);scoreId.appendChild(scoreCon);var head=null; //保存蛇头var fruit=null; //保存果实var dir=null; //保存蛇的方向var body=new Array(); //保存蛇身体增加的部分var bodyNum=0; //记录创建了多少个body//随机创建head和fruit到content里面function createType(type){ if(type==1){ //创建随机数 var row = parseInt(Math.random() * 6 +2); var col = parseInt(Math.random() * 6 +2); head=document.createElement("div"); head.className="head"; head.style.top=row*50+"px"; head.style.left=col*50+"px"; content.appendChild(head); // head.style.top=; // head.style.left=; } if(type==2){ //创建随机数 var row = parseInt(Math.random() * 6 +2); var col = parseInt(Math.random() * 6 +2); fruit=document.createElement("div"); fruit.className="fruit"; fruit.style.width="50"; fruit.style.height="50"; fruit.style.backgroundColor="#EA2000"; fruit.style.top=row*50+"px"; fruit.style.left=col*50+"px"; content.appendChild(fruit); } }//调用创建的道具方法createType(1);createType(2);//蛇头移动函数var direction=new Array; //存每个新建Body的方向//转换数var numss=0;//自动滑动事件function move(){ if(head.value!=""){ switch(head.value){ case '1': head.style.top=head.offsetTop-50+"px"; break; case '2': head.style.top=head.offsetTop+50+"px"; break; case '3': head.style.left=head.offsetLeft-50+"px"; break; case '4': head.style.left=head.offsetLeft+50+"px"; break; } } console.log(head.offsetTop); if(head.offsetTop>500){ alert("超出边界！请重新游戏"); } // if(head==null){ // if(head.style.top<0||head.style.top>500||head.style.left<0||head.style.left>500){ // alert("超出边界！请重新游戏"); // } if(body.length!=0){ for(var i=body.length-1;i>=0;i--){ if(i==0){ body[0].value=head.value; }else{ body[i].value=body[i-1].value; } } } //转换方向 //如果成功吃掉果实后事件 if(head.style.top==fruit.style.top&&head.style.left==fruit.style.left){ var row = parseInt(Math.random() * 6 +2); var col = parseInt(Math.random() * 6 +2); fruit.style.top=row*50+"px"; fruit.style.left=col*50+"px"; //记录分数 scoreNum=scoreNum+1; document.getElementsByTagName('p')[0].innerText=""; document.getElementsByTagName('p')[0].innerText=scoreNum; //创建body部分 bodyAdd(head.style.top,head.style.left,head.value); } //控制body跟随head运动部分 //有身体的时候要动态改变body的值 if(body.length>0){ var body01=document.getElementById('body01'); body01.style.top=head.offsetTop+"px"; body01.style.left=head.offsetLeft+"px"; switch(head.value){ case '1': body01.style.top=head.offsetTop+50+"px"; body01.style.left=head.offsetLeft+"px"; break; case '2': body01.style.top=head.offsetTop-50+"px"; body01.style.left=head.offsetLeft+"px"; break; case '3': body01.style.left=head.offsetLeft+50+"px"; body01.style.top=head.offsetTop+"px"; break; case '4': body01.style.left=head.offsetLeft-50+"px"; body01.style.top=head.offsetTop+"px"; break; } } if(body.length>1){ body[bodyNum-1].value=body[bodyNum-2].value; for(var i=1;i<body.length;i++){ var nu=i+1; var bodyId=document.getElementById('body0'+nu); var body_Id=document.getElementById('body0'+i); bodyId.style.top=body_Id.offsetTop+"px"; bodyId.style.left=body_Id.offsetLeft+"px"; switch(body[bodyNum-(body.length-i)].value){ case '1': bodyId.style.top=body_Id.offsetTop+50+"px"; bodyId.style.left=body_Id.offsetLeft+"px"; break; case '2': bodyId.style.top=body_Id.offsetTop-50+"px"; bodyId.style.left=body_Id.offsetLeft+"px"; break; case '3': bodyId.style.left=body_Id.offsetLeft+50+"px"; bodyId.style.top=body_Id.offsetTop+"px"; break; case '4': bodyId.style.left=body_Id.offsetLeft-50+"px"; bodyId.style.top=body_Id.offsetTop+"px"; break; } } }}//创建按钮时间document.onkeydown=function(){ var code=event.keyCode; switch (code){ //向上 case 38: head.value='1'; break; //向下 case 40: head.value='2'; break; //向左 case 37: head.value='3'; break; //向右 case 39: head.value='4'; break; console.log(head.value); }}//身体增加事件function bodyAdd(top,left,dir){ if(dir!=""){ dir=dir; } else{ dir=head.value; } //首次创建body if(bodyNum==0){ var newbody=document.createElement('div'); newbody.className="newbody"; newbody.id="body01"; switch (dir){ case '1': newbody.style.top=head.offsetTop-50+'px'; newbody.style.left=head.offsetLeft+"px"; break; case '2': newbody.style.top=head.offsetTop+50+'px'; newbody.style.left=head.offsetLeft+"px"; break; case '3': newbody.style.left=head.offsetLeft-50+'px'; newbody.style.top=head.offsetTop+"px"; break; case '4': newbody.style.left=head.offsetLeft+50+'px'; newbody.style.top=head.offsetTop+"px"; break; } content.appendChild(newbody); bodyNum=bodyNum+1; body.push(newbody); }else{ //第二次及多次创建 var newbody=document.createElement('div'); newbody.className="newbody"; newbody.id="body0"+(body.length+1); switch (dir){ case '1': newbody.style.top=body[body.length-1].offsetTop-50+'px'; newbody.style.left=body[body.length-1].offsetLeft+"px"; break; case '2': newbody.style.top=body[body.length-1].offsetTop+50+'px'; newbody.style.left=body[body.length-1].offsetLeft+"px"; break; case '3': newbody.style.left=body[body.length-1].offsetLeft-50+'px'; newbody.style.top=body[body.length-1].offsetTop+"px"; break; case '4': newbody.style.left=body[body.length-1].offsetLeft+50+'px'; newbody.style.top=body[body.length-1].offsetTop+"px"; break; } content.appendChild(newbody); bodyNum=bodyNum+1; body.push(newbody); } // body.push(content);}//超出边界，重置信息事件function initialize(){ //重置果实 var row = parseInt(Math.random() * 6 +2); var col = parseInt(Math.random() * 6 +2); fruit.style.top=row*50+"px"; fruit.style.left=col*50+"px"; //记录分数 document.getElementsByTagName('p')[0].innerText=""; //重置贪食蛇}var incident;incident=setInterval(move,200);//附加操作// var btn=document.getElementById('btn');// btn.onclick=function(){// clearInterval(incident);// }//</script> </body></html> 还在不断完善中，希望对大家的学习有所帮助。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。