本文实例为大家分享了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 id="start">开启游戏</div> <div 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>
还在不断完善中，希望对大家的学习有所帮助。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。