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/);
border-radius: 10px;
background-size: 100%;
position: absolute;
height: 48px;
width: 48px;
}
.fruit{
/*background-color: #49DF85;*/
background-image: url(./img/);
background-size: 100%;
position: absolute;
height: 48px;
width: 48px;
}
.score{
font-family: 'Boldbody';
left:600px;
position: absolute;
height: 50px;
width: 200px;
background-color: #212121;
color: #FFF;
}
.newbody{
position: absolute;
width: 48px;
height: 48px;
background-image: url(./img/);
background-size: 100%;
}
.btn{
font-family: 'Boldbody';
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 class="content" >
</div>
<div class="btn" >Stop the game</div>
<div class="btn" style="top:180px" >Start the game</div>
<div class="btn" style="top:380px" >Game Status：</div>
<div class="score" >Fraction：<p></p></div>
<script type="text/javascript" >
//Add statusvar stop=('stop');
var start=("start");
var gameWay=('gameWay');
=function(){
='2';
incident=setInterval(move,200);
}
=function(){
clearInterval(incident);
}
//
var content=("content");
for(var i=0;i<100;i++){
var div=("div");
="colo";
(div);
}
var scoreId=("score");
var scoreNum=0;
var scoreCon=("p");
// var scoreText=(scoreNum);
// (scoreText);
(scoreCon);
var head=null; //Save the snake headvar fruit=null; //Save the fruitvar dir=null; //Save the direction of the snakevar body=new Array(); //Save the added parts of the snake's bodyvar bodyNum=0; //Record how many bodies are created//Randomly create head and fruit into content
function createType(type){
if(type==1){
//Create random number var row = parseInt(() * 6 +2);
var col = parseInt(() * 6 +2);
head=("div");
="head";
=row*50+"px";
=col*50+"px";
(head);
// =;
// =;
}
if(type==2){
//Create random number var row = parseInt(() * 6 +2);
var col = parseInt(() * 6 +2);
fruit=("div");
="fruit";
="50";
="50";
="#EA2000";
=row*50+"px";
=col*50+"px";
(fruit);
}
}
//Calling the created prop methodcreateType(1);
createType(2);
//Snake head movement functionvar direction=new Array; //Save the direction of each new Body//Conversion numbervar numss=0;
//Automatic sliding eventfunction move(){
if(!=""){
switch(){
case '1':
=-50+"px";
break;
case '2':
=+50+"px";
break;
case '3':
=-50+"px";
break;
case '4':
=+50+"px";
break;
}
}
();
if(>500){
alert("Out of the boundaries! Please regain");
}
// if(head==null){
// if(<0||>500||<0||>500){
// alert("Exceed the boundary! Please replay"); // }
if(!=0){
for(var i=-1;i>=0;i--){
if(i==0){
body[0].value=;
}else{
body[i].value=body[i-1].value;
}
}
}
//Convert direction
// Event after successful eating of the fruit if(==&&==){
var row = parseInt(() * 6 +2);
var col = parseInt(() * 6 +2);
=row*50+"px";
=col*50+"px";
//Record score scoreNum=scoreNum+1;
('p')[0].innerText="";
('p')[0].innerText=scoreNum;
//Create body part bodyAdd(,,);
}
//Control body to follow head movement part
// When you have a body, you should dynamically change the value of the body if(>0){
var body01=('body01');
=+"px";
=+"px";
switch(){
case '1':
=+50+"px";
=+"px";
break;
case '2':
=-50+"px";
=+"px";
break;
case '3':
=+50+"px";
=+"px";
break;
case '4':
=-50+"px";
=+"px";
break;
}
}
if(>1){
body[bodyNum-1].value=body[bodyNum-2].value;
for(var i=1;i<;i++){
var nu=i+1;
var bodyId=('body0'+nu);
var body_Id=('body0'+i);
=body_Id.offsetTop+"px";
=body_Id.offsetLeft+"px";
switch(body[bodyNum-(-i)].value){
case '1':
=body_Id.offsetTop+50+"px";
=body_Id.offsetLeft+"px";
break;
case '2':
=body_Id.offsetTop-50+"px";
=body_Id.offsetLeft+"px";
break;
case '3':
=body_Id.offsetLeft+50+"px";
=body_Id.offsetTop+"px";
break;
case '4':
=body_Id.offsetLeft-50+"px";
=body_Id.offsetTop+"px";
break;
}
}
}
}
//Build time=function(){
var code=;
switch (code){
//up case 38:
='1';
break;
//down case 40:
='2';
break;
//left case 37:
='3';
break;
//To the right case 39:
='4';
break;
();
}
}
//The physical increase eventfunction bodyAdd(top,left,dir){
if(dir!=""){
dir=dir;
}
else{
dir=;
}
// Create body for the first time if(bodyNum==0){
var newbody=('div');
="newbody";
="body01";
switch (dir){
case '1':
=-50+'px';
=+"px";
break;
case '2':
=+50+'px';
=+"px";
break;
case '3':
=-50+'px';
=+"px";
break;
case '4':
=+50+'px';
=+"px";
break;
}
(newbody);
bodyNum=bodyNum+1;
(newbody);
}else{
//Second and multiple creations var newbody=('div');
="newbody";
="body0"+(+1);
switch (dir){
case '1':
=body[-1].offsetTop-50+'px';
=body[-1].offsetLeft+"px";
break;
case '2':
=body[-1].offsetTop+50+'px';
=body[-1].offsetLeft+"px";
break;
case '3':
=body[-1].offsetLeft-50+'px';
=body[-1].offsetTop+"px";
break;
case '4':
=body[-1].offsetLeft+50+'px';
=body[-1].offsetTop+"px";
break;
}
(newbody);
bodyNum=bodyNum+1;
(newbody);
}
// (content);
}
//Exceed the boundary, reset the information eventfunction initialize(){
//Reset the fruit var row = parseInt(() * 6 +2);
var col = parseInt(() * 6 +2);
=row*50+"px";
=col*50+"px";
//Record score ('p')[0].innerText="";
//Reset the gluttonous snake
}
var incident;
incident=setInterval(move,200);
//Additional operations// var btn=('btn');
// =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 study and I hope everyone will support me more.