Snake Eating Analysis and Code (Detailed Edition)

Gluttonous snake analysis:
1. Construct Snake Movement map ==== PC-side game browser running program (JS)
(1) Use div to create map elements
(2) Add to body
(3) Setting the style of map elements; js implementation
(4) Call the method of map display to display browser

2. Objects that construct food===== displayed on the PC-side game browser (JS)
(1) Using div to create food elements
(2) Add to Map Elements
(3) Setting the style of food elements; ==== js implementation
(4) Call the method of food display to display in the browser div

3. Construct Snake Mobile Object===== PC-side Game Browser Running Program (JS)
(1) Create a binary array: used to construct snake body, position, color

(2) Method of creating display snake
--> Initialize Snake Section 3 (for loop to create div elements)
---> Add to Map
---> Set the snake's style (two-dimensional array data access) arr [][]
(3) Method of displaying snakes by calling snakes (by instantiating objects. Method name of displaying snakes)
display ()=====> Create a snake object
(4) Method of creating snake moving direction
---> Consider: Controlling snake's mobile keyboard in that way
---> Pass the key code to the snake's moving direction
---> Record the direction of snake movement using attributes in snake objects
(5) Method of creating Snake Movement
---> Consideration: In the process of automatic snake movement controlled by a timer, the method of global attribute recording is passed into the method.
---> Judgment: the direction of the snake
The last point is to call the snake display method to change the location of the snake (bug: repeated creation of snake head)
---> Add timer repeated calls note: the function in the timer is called using objects. Can not be directly tuned.
4. Expansion:
1. Collision to the end of your body game;
2. Collision to the end of the wall game;
3. Add the background music of the game and control the pause and play.
4. Add eyes to snakes;
5. Design the interface of the project (start the game, pause the game, record the score, select the level);

5. Code case

THML Documents:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.class_01{
				/*width: 800px;
				height: 600px;*/
				background: url(../img/Grassland.png) no-repeat;
				margin: auto;
				background-size: 100%;
			}
			#div_01{
				margin: 0;
				padding: 0;
				width: 800px;
				height: 600px;
				border: 1px solid green;
				margin:10px auto;
				position: relative;
			}
			img{
				width: 800px;
				height:600px;
			}
			#div_02{
				width: 200px;
				height:250px;
				position: absolute;
				top:80px;
				left: 690px;
			}
			input{
				display:inline-block;
				width: 200px;
				height: 50px;
				margin: 30px;
				font:bold 25px/50px "Microsoft YaHei";
				color: white;
				background-color: green;
				border-radius: 20px;
			}
		</style>
		<script src="../js/6 snake.js" type="text/javascript" charset="utf-8"></script>
	    <!--<script src="../js/6.1 snake.js" type="text/javascript" charset="utf-8"></script>
	    <script src="../js/6.2 snake.js" type="text/javascript" charset="utf-8"></script>-->
	</head>
	<body>
		<audio></audio>
		<div id="div_01"><img src="../img/home page.jpg"/></div>
		<div id="div_02">
			<input type="button" name="" id="id1" value="Start the game" />
			<input type="button" name="" id="id2" value="Simple mode" />
			<input type="button" name="" id="id3" value="Pattern" />
			<input type="button" name="" id="id4" value="Fast Mode" />
			<input type="button" name="" id="id5" value="Speed Game" />
		</div>
	</body>
</html>


 var num=0;
function Map(){
	this.width=800;
	this.height=600;
	this.background='green';
	this.div_map=null;
	this.display=function(){
		this.div_map=document.createElement('div');
		this.div_map.style.width=this.width+'px';
		this.div_map.style.height=this.height+'px';
		this.div_map.setAttribute('class','class_01');
//		this.div_map.style.background=this.background;
		this.div_map.style.margin='20px auto';
		this.div_map.style.position='relative';
		document.getElementsByTagName('body')[0].appendChild(this.div_map)
	}
}

//Button
function Anniu(){
	this.width=100;
	this.height=100;
	this.background='pink';
	this.div_anniu=null;
	this.display=function(){
		this.div_anniu=document.createElement('button');
		this.div_anniu.style.width=this.width+'px';
		this.div_anniu.style.height=this.height+'px';
		this.div_anniu.innerHTML='Pause button'
//		this.div_anniu.setAttribute('class','class_01');
		this.div_anniu.style.background=this.background;
		this.div_anniu.style.position='absolute';
		this.div_anniu.style.margin='0px -100px';
		this.div_anniu.style.font='bold 30px "Microsoft YaHei"'
		div_Map.div_map.appendChild(this.div_anniu)

	}
//	this.div_anniu.onclick=function(){
//		clearTimeout(times)
//	}
	
}

function Anniu1(){
	this.width=100;
	this.height=100;
	this.background='pink';
	this.div_anniu1=null;
	this.display=function(){
		this.div_anniu1=document.createElement('button');
		this.div_anniu1.style.width=this.width+'px';
		this.div_anniu1.style.height=this.height+'px';
		this.div_anniu1.innerHTML='Start button'
//		this.div_anniu1.setAttribute('class','class_01');
		this.div_anniu1.style.background=this.background;
		this.div_anniu1.style.position='absolute';
		this.div_anniu1.style.margin='110px -100px';
		this.div_anniu1.style.font='bold 30px "Microsoft YaHei"'
		div_Map.div_map.appendChild(this.div_anniu1)

	}
//	this.div_anniu.onclick=function(){
//		clearTimeout(times)
//	}
	
}
function Food(){
	this.width=20;
	this.height=20;
	this.background='red';
	this.div_food=null;
	this.x=0;
	this.y=0;
	this.display=function(){
		if (this.div_food==null) {//Entering for space-time only changes the position of food when touching a snake, but does not increase food.
			this.div_food=document.createElement('div');
			this.div_food.style.width=this.width+'px';
			this.div_food.style.height=this.height+'px';
			this.div_food.style.background=this.background;
	//		this.div_food.style.margin='20px auto';
			this.div_food.style.position='absolute';
			div_Map.div_map.appendChild(this.div_food)
		}
		this.x=Math.round(Math.random()*35+4);
		this.y=Math.round(Math.random()*25+4);
		this.div_food.style.left=this.x*this.width+'px';
		this.div_food.style.top=this.y*this.height+'px';
	}
}

function She(){
	this.width=20;
	this.height=20;
	this.SD=null;
	this.kong=null;
//	this.jishu=null;
	this.arr=[
	  [9,6,'black',null],
	  [8,6,'red',null],
	  [7,6,'black',null]
	]
	this.display=function(){
		for (var i=0;i<this.arr.length;i++) {
			if (this.arr[i][3]==null) {
				this.arr[i][3]=document.createElement('div');
				this.arr[i][3].style.width=this.width+'px';
				this.arr[i][3].style.height=this.height+'px';
				this.arr[i][3].style.background=this.arr[i][2];
				this.arr[i][3].style.position='absolute';
				div_Map.div_map.appendChild(this.arr[i][3]);
			}
			this.arr[i][3].style.left=this.arr[i][0]*this.width+'px';
			this.arr[i][3].style.top=this.arr[i][1]*this.height+'px';
		}
	}
	this.shedong=function(aaa){
		switch (aaa){
			case 37:
			this.kong='zuo';
			this.arr[0][3].style.transform='rotateZ(180deg)';
				break;
			case 38:
			this.kong='shang';
			this.arr[0][3].style.transform='rotateZ(-90deg)';
				break;
			case 39:
			this.kong='you';
			this.arr[0][3].style.transform='rotateZ(0deg)';
				break;
			case 40:
			this.kong='xia';
			this.arr[0][3].style.transform='rotateZ(90deg)';
				break;
			default:
				break;
		}
		//div_Yanjing.display()
	}
	this.shedong1=function(SD){
		for (var i=this.arr.length-1;i>0;i--) {
			if (this.kong!=null) {
				this.arr[i][0]=this.arr[i-1][0];
				this.arr[i][1]=this.arr[i-1][1]; 
			}
		}
		switch (this.kong){
			case 'zuo':
			this.arr[0][0]-=1;
				break;
			case 'shang':
			this.arr[0][1]-=1;
				break;
			case 'you':
			this.arr[0][0]+=1;
				break;
			case 'xia':
			this.arr[0][1]+=1;
				break;
			default:
				break;
		}
		if (this.arr[0][0]==div_Food.x&&this.arr[0][1]==div_Food.y) {
			div_Food.display();
			num++;
			div_JS.jishu.innerHTML='The first'+num+'Fraction';
//			div_JS.display(num++)
//			this.JS=function(){
//				this.jishu=document.createElement('button');s
//				this.jishu.style.width=100+'px';
//				this.jishu.style.height=100+'px';
//				this.jishu.style.background='pink';
//				this.jishu.innerHTML='num +'score'
//				div_Map.div_map.appendChild(this.jishu);
//			}
			//The last line of a snake
			//Get x, y
			var x=this.arr[this.arr.length-1][0];
			var y=this.arr[this.arr.length-1][1];
			this.arr.push([x,y,'pink',null])
		
	}
	if(this.arr[0][0]<2||this.arr[0][0]>37||this.arr[0][1]<2||this.arr[0][1]>29){
		//alert('game over');
		//return false;
		//Or in this way
		if (confirm('Whether or not to start anew')) {
			window.location.reload()
		} else{
			return false;
		} 
	}
	for (var i=1;i<this.arr.length;i++) {
		if (this.arr[0][0]==this.arr[i][0]&&this.arr[0][1]==this.arr[i][1]) {
			if (confirm('Whether or not to start anew')) {
			   window.location.reload()
		    } else{
			   return false;
		    } 
		}
	}
	div_She.display();
	times=setTimeout('div_She.shedong1()',this.SD)
	}
//	this.JS=function(){
//				this.jishu=document.createElement('button');
//				this.jishu.style.width=100+'px';
//				this.jishu.style.height=100+'px';
//				this.jishu.style.background='pink';
//				this.jishu.innerHTML='num +'score'
//				this.jishu.style.position='absolute';
//				this.jishu.style.margin='220px -100px';
//				this.jishu.style.font='bold 30px'Microsoft Yahei'
//				div_Map.div_map.appendChild(this.jishu);
//			}
}
function Js(){
	this.jishu=null;
	this.display=function(n){
		this.jishu=document.createElement('button');
		this.jishu.style.width=100+'px';
		this.jishu.style.height=100+'px';
		this.jishu.style.background='pink';
		this.jishu.innerHTML='The first'+num+'Fraction'
		this.jishu.style.position='absolute';
		this.jishu.style.margin='220px -100px';
		this.jishu.style.font='bold 30px "Microsoft YaHei"'
		div_Map.div_map.appendChild(this.jishu);
	}
}
function Yanjing(){
	this.width=10;
	this.height=10;
	this.yanjing=[
	   [1,0,'red',null],
	   [1,0,'red',null]
	]
	this.display=function(){
		for (var j=0;j<this.yanjing.length;j++) {
			this.yanjing[j][3]=document.createElement('div');
			this.yanjing[j][3].style.width=this.width+'px';
			this.yanjing[j][3].style.height=this.height+'px';
			this.yanjing[j][3].style.background=this.yanjing[j][2]
			this.yanjing[j][3].style.position='relative';
			this.yanjing[j][3].style.borderRadius='50%';
			this.yanjing[j][3].style.left=this.yanjing[j][0]*this.width+'px';
			this.yanjing[j][3].style.top=this.yanjing[j][1]*this.height+'px';
			div_She.arr[0][3].appendChild(this.yanjing[j][3]);
		}
	}
}
		window.onload=function(){
			var div_01=document.getElementById('div_01');
			var div_02=document.getElementById('div_02');
			var id1=document.getElementById('id1');
			var id2=document.getElementById('id2');
			var id3=document.getElementById('id3');
			var id4=document.getElementById('id4');
			var id5=document.getElementById('id5');
			//Button 1
			id1.onclick=function(){//Click Events
				div_01.style.display='none';
				div_02.style.display='none';
				div_Map=new Map();
				div_Map.display();
			
		//Pause button
		div_Anniu=new Anniu();
	    div_Anniu.display();
	    div_Anniu.div_anniu.onclick=function(){
		   clearTimeout(times)
		   aud.pause()
	    }
    
    //Start button
    div_Anniu1=new Anniu1();
    div_Anniu1.display();
    div_Anniu1.div_anniu1.onclick=function(){
       //div_She.display();
	   //setTimeout(times)
	   div_She.shedong1()
	   aud.play()
    }
	
	div_Food=new Food();
	div_Food.display();
	
	div_She=new She();
	div_She.display();
	div_She.shedong1();
//		div_She.times=setTimeout('div_She.shedong1()',2000)
        div_She.SD=250;
		
//		div_She.JS()
		
	//Computational
	div_JS=new Js();
	div_JS.display();
	
	div_Yanjing=new Yanjing();
	div_Yanjing.display()
	
	//Audio label < audio > </audio >
	var aud=document.createElement('audio');
	aud.src='../img/7895.mp3';
	aud.autoplay='autoplay';
	document.getElementsByTagName('body')[0].appendChild(aud);
	
	document.getElementsByTagName('body')[0].onkeydown=function(event){
		div_She.shedong(event.keyCode);
		
	}
}
//Button 2
id2.onclick=function(){//Click Events
	div_01.style.display='none';
	div_02.style.display='none';
	div_Map=new Map();
	div_Map.display();
	
	//Pause button
	div_Anniu=new Anniu();
    div_Anniu.display();
    div_Anniu.div_anniu.onclick=function(){
	   clearTimeout(times)
	   aud.pause()
    }
    
    //Start button
    div_Anniu1=new Anniu1();
    div_Anniu1.display();
    div_Anniu1.div_anniu1.onclick=function(){
       //div_She.display();
	   //setTimeout(times)
	   div_She.shedong1()
	   aud.play()
    }
	
	div_Food=new Food();
	div_Food.display();
	
	div_She=new She();
	div_She.display();
	div_She.shedong1();
	div_She.SD=200;
//	div_She.JS()
	
	//Computational
	div_JS=new Js();
	div_JS.display();
	
	div_Yanjing=new Yanjing();
	div_Yanjing.display()
	
	//Audio label < audio > </audio >
	var aud=document.createElement('audio');
	aud.src='../img/7895.mp3';
	aud.autoplay='autoplay';
	document.getElementsByTagName('body')[0].appendChild(aud);
	
	document.getElementsByTagName('body')[0].onkeydown=function(event){
		div_She.shedong(event.keyCode);
		
	}
}
   //Button 3
   id3.onclick=function(){//Click Events
		div_01.style.display='none';
		div_02.style.display='none';
		div_Map=new Map();
		div_Map.display();
	
	//Pause button
	div_Anniu=new Anniu();
    div_Anniu.display();
    div_Anniu.div_anniu.onclick=function(){
	   clearTimeout(times)
	   aud.pause()
    }
    
    //Start button
    div_Anniu1=new Anniu1();
    div_Anniu1.display();
    div_Anniu1.div_anniu1.onclick=function(){
       //div_She.display();
	   //setTimeout(times)
	   div_She.shedong1()
	   aud.play()
    }
	
	div_Food=new Food();
	div_Food.display();
	
	div_She=new She();
	div_She.display();
	div_She.shedong1();
	div_She.SD=150;
  //div_She.JS()
	
	//Computational
	div_JS=new Js();
	div_JS.display();
	
	div_Yanjing=new Yanjing();
	div_Yanjing.display()
	
	//Audio label < audio > </audio >
	var aud=document.createElement('audio');
	aud.src='../img/7895.mp3';
	aud.autoplay='autoplay';
	document.getElementsByTagName('body')[0].appendChild(aud);
	
	document.getElementsByTagName('body')[0].onkeydown=function(event){
		div_She.shedong(event.keyCode);
		
	}
}
   //Button 4
   id4.onclick=function(){//Click Events
		div_01.style.display='none';
		div_02.style.display='none';
		div_Map=new Map();
		div_Map.display();
	
	//Pause button
	div_Anniu=new Anniu();
    div_Anniu.display();
    div_Anniu.div_anniu.onclick=function(){
	   clearTimeout(times)
	   aud.pause()
    }
    
    //Start button
    div_Anniu1=new Anniu1();
    div_Anniu1.display();
    div_Anniu1.div_anniu1.onclick=function(){
       //div_She.display();
	   //setTimeout(times)
	   div_She.shedong1()
	   aud.play()
    }
	
	div_Food=new Food();
	div_Food.display();
	
	div_She=new She();
	div_She.display();
	div_She.shedong1();
	div_She.SD=100;
   //div_She.JS()
	
	//Computational
	div_JS=new Js();
	div_JS.display();
	
	div_Yanjing=new Yanjing();
	div_Yanjing.display()
	
	//Audio label < audio > </audio >
	var aud=document.createElement('audio');
	aud.src='../img/7895.mp3';
	aud.autoplay='autoplay';
	document.getElementsByTagName('body')[0].appendChild(aud);
	
	document.getElementsByTagName('body')[0].onkeydown=function(event){
		div_She.shedong(event.keyCode);
		
	}
}
//Button 5
id5.onclick=function(){//Click Events
	div_01.style.display='none';
	div_02.style.display='none';
	div_Map=new Map();
	div_Map.display();
	
	//Pause button
	div_Anniu=new Anniu();
    div_Anniu.display();
    div_Anniu.div_anniu.onclick=function(){
	   clearTimeout(times)
	   aud.pause()
    }
    
    //Start button
    div_Anniu1=new Anniu1();
    div_Anniu1.display();
    div_Anniu1.div_anniu1.onclick=function(){
       //div_She.display();
	   //setTimeout(times)
	   div_She.shedong1()
	   aud.play()
    }
	
	div_Food=new Food();
	div_Food.display();
	
	div_She=new She();
	div_She.display();
	div_She.shedong1();
	div_She.SD=50;
   //div_She.JS()
	
	//Computational
	div_JS=new Js();
	div_JS.display();
	
	div_Yanjing=new Yanjing();
	div_Yanjing.display()
	
	//Audio label < audio > </audio >
	var aud=document.createElement('audio');
	aud.src='../img/7895.mp3';
	aud.autoplay='autoplay';
	document.getElementsByTagName('body')[0].appendChild(aud);
	
	document.getElementsByTagName('body')[0].onkeydown=function(event){
		div_She.shedong(event.keyCode);
		
	}
   }
}

Tags: Javascript Mobile Attribute

Posted on Tue, 06 Aug 2019 04:07:41 -0700 by paulman888888