本文實例為大家分享了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>還在不斷完善中，希望對大家的學習有所幫助。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。