Jsは貪食蛇と書いています

5819 ワード

Javascriptを使って蛇を食べるゲームを作って、
1.カスタムマップの幅の高さ、蛇の初期速度
2.食べ物がランダムに出現する
3.蛇のスタイル属性
4.蛇遊びを貪欲に食べる(食べ物を食べて、境界にぶつかり、食べ物を食べたら加速し、点数を計算する)



	
	Document
	


	

	
		var kuang = parseInt(prompt("       "));
		var gao = parseInt(prompt("       "));
		var sudu = parseInt(prompt("       (    )"));
	//    
		function Map(){
			//  	
			this.width = kuang;
			this.height = gao;
			this.backgroundColor = 'gray';
			this.ditu = null;
			//  
			if (!Map.prototype.show) {
				Map.prototype.show = function(){
					//  div
					var div = document.createElement('div');
					//    
					div.style.width = this.width + 'px';
					div.style.height = this.height + 'px';
					div.style.backgroundColor = this.backgroundColor;
					//     
					document.body.appendChild(div);
					//   div            
					this.ditu = div;
				}
			}
		}
		var map = new Map();
		map.show();
	//    
		function Food(map){
		//  
			this.width = 20;
			this.height = 20;
			this.backgroundColor = 'yellow';
			this.x = 0;
			this.y = 0;
			this.position = 'absolute';
			this.borderRadius = '50%';
			this.shiwu = null;
		//  
			if(!Food.prototype.show){
				Food.prototype.show = function(){
			//  ,  ,  
				if(!this.shiwu){
					//  div
					var div = document.createElement('div');
					div.style.width = this.width + 'px';
					div.style.height = this.height + 'px';
					div.style.backgroundColor = this.backgroundColor;
					div.style.borderRadius = this.borderRadius;
	
					div.style.position = this.position;
					//     
					map.ditu.appendChild(div);
					this.shiwu = div;
				}
			//  
				// /    = 0~30    *    /   (   20)
				this.x = Math.floor(Math.random() * (map.width / this.width));
				this.y = Math.floor(Math.random() * (map.height / this.height));
				//    ,      
				this.shiwu.style.left = this.x * this.width + 'px';
				this.shiwu.style.top = this.y * this.height + 'px';
				}
			}
		}

		//  
		var food = new Food(map);
		food.show();
	//   
		function Snake(){
		//  
			this.width = 20;
			this.height = 20;
			this.position = 'absolute';
			this.direction = 'right';
			this.borderRadius = '50%';
			//        
			this.canChange = false;
			//  
			//[[x, y,   , div]]
			
			this.body = [[5, 5, 'red', null], [4, 5, 'blue', null], [3, 5, 'blue', null]];
			//  
			//  ,  ,  
			if(!Snake.prototype.show){
				Snake.prototype.show = function(){
					//      div
					for (var i = 0; i < this.body.length; i++) {
						//    ,       
						if (!this.body[i][3]) {
						//    
							var div =document.createElement('div');
							div.style.width = this.width + 'px';
							div.style.height = this.height + 'px';
							div.style.position = this.position;
							//  
							map.ditu.appendChild(div);
							this.body[i][3] = div;
						}
						//    
							this.body[i][3].style.backgroundColor = this.body[i][2];
							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';
							this.body[i][3].style.borderRadius = '5px';
							this.body[0][3].style.borderRadius = this.borderRadius;
					}
					//    ,      
					this.canChange = true;
				}
			//  
			//             
				Snake.prototype.move = function(){
				//  ,      
					for (var i = this.body.length - 1; i > 0; i--) {
						//x = x-1 y = y-1 
						this.body[i][0] = this.body[i-1][0];
						this.body[i][1] = this.body[i-1][1];
					}
				//      
					if (this.direction == 'right') {
						//x + 1
						this.body[0][0] += 1;
					}else if(this.direction == 'left') {
						//x - 1
						this.body[0][0] -= 1;
					}else if(this.direction == 'up') {
						//y - 1
						this.body[0][1] -= 1;
					}else if(this.direction == 'down') {
						//y + 1
						this.body[0][1] += 1;
					}
			//    
				if (this.body[0][0] < 0 || this.body[0][0] > (map.width / this.width) - 1 || this.body[0][1] < 0 || this.body[0][1] > (map.height / this.height) - 1)  {
					//    
					clearInterval(timer);
					alert('    ');
					return;
				}
				//              
					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]) {
							//  ,  
							clearInterval(timer);
							alert('    ');
							return;
						}
					}
				//    
				this.show();
				//                     
				if (this.body[0][0] == food.x && this.body[0][1] == food.y) {
					//  
					var score = document.getElementById('fen');
					 var sc = parseInt(score.value)+1;
                    score.value = sc;
					//   this.body    
					this.body[this.body.length] = [0, 0, 'blue', null];
					//    
					food.show();
					//    ,  
					if(t>150){
						t -= 10;
						setTimer();
					}
				}				
				}

			}
		}
		//   
		var snake = new Snake;
		snake.show();
	//    
		window.onkeyup = function(e){
			var evt = e || window.event;
			if (!snake.canChange) {
				return;
			}
			//  37   38   39   40
			if (e.keyCode == 37 && snake.direction != 'right') {
				snake.direction = 'left'
			}else if(e.keyCode == 38 && snake.direction != 'down') {
				snake.direction = 'up'
			}else if(e.keyCode == 39 && snake.direction != 'left') {
				snake.direction = 'right'
			}else if(e.keyCode == 40 && snake.direction != 'up') {
				snake.direction = 'down'
			}
			snake.canChange =false;
		};	
	//        
		var t = sudu;
		var timer;
		function setTimer(){
			//   
			clearInterval(timer);
			//    
			timer = setInterval(function(){
				snake.move();
			}, t);
		}
		setTimer();