javascript implements a simple snake game
- 2020-05-24 05:10:54
- OfStack
javascript to achieve a simple snake game, the function is very simple, the code is also very practical, there is no more nonsense, friends reference notes.
<html>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8'>
<title> snake </title>
<script type="text/javascript">
var map; // The map
var snake; // The snake
var food; // food
var timer; // The timer
var initSpeed=200; // Initial timer time interval (milliseconds) , Indirectly represents the snake's moving speed
var nowSpeed=initSpeed; // The speed at which the snake moves during the game
var grade=0; // integral
var flag=1; // level
// The map class
function Map(){
this.width=800;
this.height=400;
this.position='absolute';
this.color='#EEEEEE';
this._map=null;
// Generate a map
this.show=function(){
this._map=document.createElement('div');
this._map.style.width=this.width+'px';
this._map.style.height=this.height+'px';
this._map.style.position=this.position;
this._map.style.backgroundColor=this.color;
document.getElementsByTagName('body')[0].appendChild(this._map);
}
}
// Food class
function Food(){
this.width=20;
this.height=20;
this.position='absolute';
this.color='#00FF00';
this.x=0;
this.y=0;
this._food;
// Produce food
this.show=function(){
this._food=document.createElement('div');
this._food.style.width=this.width+'px';
this._food.style.height=this.height+'px';
this._food.style.position=this.position;
this._food.style.backgroundColor=this.color;
this.x=Math.floor(Math.random()*map.width/this.width);
this.y=Math.floor(Math.random()*map.height/this.width);
this._food.style.left=this.x*this.width;
this._food.style.top=this.y*this.height;
map._map.appendChild(this._food);
}
}
// snakes
function Snake(){
this.width=20;
this.height=20;
this.position='absolute';
this.direct=null;// Direction of movement
// The initial snake-body.
this.body=new Array(
[3,2,'red',null],// The snake
[2,2,'blue',null],
[1,2,'blue',null]
);
// Generate snake-body.
this.show=function(){
for(var i=0;i<this.body.length;i++){
if(this.body[i][3]==null){
this.body[i][3]=document.createElement('div');
this.body[i][3].style.width=this.width;
this.body[i][3].style.height=this.height;
this.body[i][3].style.position=this.position;
this.body[i][3].style.backgroundColor=this.body[i][2];
map._map.appendChild(this.body[i][3]);
}
this.body[i][3].style.left=this.body[i][0]*this.width+'px';
this.body[i][3].style.top=this.body[i][1]*this.height+'px';
}
}
// Control snake movement
this.move=function(){
var length=this.body.length-1;
for(var i=length;i>0;i--){
this.body[i][0]=this.body[i-1][0];
this.body[i][1]=this.body[i-1][1];
}
switch(this.direct){
case 'right':
this.body[0][0]=this.body[0][0]+1;
break;
case 'left':
this.body[0][0]=this.body[0][0]-1;
break;
case 'up':
this.body[0][1]=this.body[0][1]-1;
break;
case 'down':
this.body[0][1]=this.body[0][1]+1;
break;
}
this.condition();
this.show();
}
// Timer, start the game when called
this.speed=function(){
timer=setInterval('snake.move()',initSpeed);
}
// Conditional processing
this.condition=function(){
// Eat food
if(this.body[0][0]==food.x&&this.body[0][1]==food.y){
grade++;
this.body[[this.body.length]]=[0,0,'blue',null];
map._map.removeChild(food._food)
food.show();
}
// Judge if you hit a wall
if(this.body[0][0]<0||this.body[0][0]>=map.width/this.width||this.body[0][1]<0||this.body[0][1]>=map.height/this.height){
alert('game over');
clearInterval(timer);
return ;
}
// Judge if you hit yourself
for(var i=1;i<this.body.length;i++){
if(this.body[0][0]==this.body[i][0]&&this.body[0][1]==this.body[i][1]){
alert('game over');
clearInterval(timer);
return ;
}
}
// Speed up processing, integration per once 2 Points, speed up 1 times
if(grade/2==flag){
clearInterval(timer);
flag++;
nowSpeed=initSpeed/flag;
timer=setInterval('snake.move()',nowSpeed);
}
document.title=' snake integral '+grade+' Speed rating '+initSpeed/nowSpeed;
}
}
document.onkeydown=function(event){
// Press any key to start the game
if(snake.direct===null){
snake.direct='right';
snake.speed();
}
// Control the direction, W S D A Represent the Left right up and down
switch(window.event?window.event.keyCode:event.keyCode){// Browser-compatible processing
case 87 :
snake.direct=snake.body[0][0]==snake.body[1][0]?snake.direct:'up';// Avoid reverse movement that triggers death bug
break;
case 83 :
snake.direct=snake.body[0][0]==snake.body[1][0]?snake.direct:'down';
break;
case 68 :
snake.direct=snake.body[0][1]==snake.body[1][1]?snake.direct:'right';
break;
case 65 :
snake.direct=snake.body[0][1]==snake.body[1][1]?snake.direct:'left';
break;
}
}
// Auto-loading game
window.onload=function(){
map=new Map();
map.show();
food=new Food();
food.show();
snake=new Snake();
snake.show();
}
</script>
</head>
<body>
</body>
</html>
That's all for this article, I hope you enjoy it.