The examples in this article share with you the demo of the JS Snake game, which is completed purely by JS and CSS for your reference. The specific content is as follows
<!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: 'bold'; 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: 'bold'; 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">Stop the game</div><div style="top:180px" id="start">Start the game</div><div style="top:380px" id="gameWay">Game status: </div><div id="score" >Score: <p></p></div><script type="text/javascript" >//Add status 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; //Save the snake's head var fruit=null; //Save the fruit var dir=null; //Save the direction of the snake var body=new Array(); //Save the added part of the snake's body var bodyNum=0; //Record how many bodies are created//Randomly create head and fruit into the content function createType(type){ if(type==1){ //Create random number 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){ //Create a random number 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); } }//Call the created prop method createType(1);createType(2);//Snake head movement function var direction=new Array; //Save the direction of each newly created Body//Conversion number var numss=0;//Automatic sliding event 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("Exceed the boundary! Please replay"); } // if(head==null){ // if(head.style.top<0||head.style.top>500||head.style.left<0||head.style.left>500){ // alert("Exceed the boundary! Please replay"); // } 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; } } } //Convert direction//If the event after the fruit is successfully eaten 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"; //Record scoreNum=scoreNum+1; document.getElementsByTagName('p')[0].innerText=""; document.getElementsByTagName('p')[0].innerText=scoreNum; //Create body part bodyAdd(head.style.top,head.style.left,head.value); } //Control the body to follow the head movement part// When you have a body, you must dynamically change the body's value 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; } } }}//create button time document.onkeydown=function(){ var code=event.keyCode; switch (code){ //up case 38: head.value='1'; break; //down case 40: head.value='2'; break; //left case 37: head.value='3'; break; //Case 39 to the right: head.value='4'; break; console.log(head.value); }}//Body increase event function bodyAdd(top,left,dir){ if(dir!=""){ dir=dir; } else{ dir=head.value; } //Create body for the first time 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{ //Create 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);}// exceed the boundary, reset the information event function initialize(){ //Reset the fruit 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"; //Record score document.getElementsByTagName('p')[0].innerText=""; //Reset gluttonous snake}var incident; incident=setInterval(move,200);//Add operations// var btn=document.getElementById('btn');// btn.onclick=function(){// clearInterval(incident);// }//</script> </body></html>It is still being improved, and I hope it will be helpful to everyone's learning.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.