【js面向对象】贪吃蛇

一、HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分数：0</title>
<style>
html,body { margin:0; width:100%; height:100%; }
body{ position:relative; }
#container{ position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; overflow:hidden; 
width:780px; height:480px; border:1px solid black; font-size:0px; background:#ccc; }
span{ display:inline-block; }
.snake{ position:absolute; background-color:#000; z-index:9; }
.food{ position:absolute; background-color:#F66; border-radius:50%; z-index:10; }
</style>
<script src="js.js" ></script>
<script>
window.onload = function(){
	var thisGame = new Game('container');	
}
</script>

</head>
<body>
<div id="container"></div>
</body>

</html>

二、javascript代码

function Game(id){
	var that = this;
	this.gamePlace = document.getElementById(id);
	this.elem = 20;			//像素大小
	this.snakeElem = [];		//保存蛇元素信息
	this.food = null;		//保存食物信息
	this.direction = 'right';	//蛇行进方向
	this.score = 0;			//分数
	
	this.createSnake();		//创建蛇
	this.createFood();		//创建食物
	
	document.onkeyup = function(e){			//改变方向
		if(that.direction != 'right' && e.keyCode == 37 ){
			that.direction = 'left';	
		}else if(that.direction != 'bottom' && e.keyCode == 38){
			that.direction = 'top';
		}else if(that.direction != 'left' && e.keyCode == 39){
			that.direction = 'right';
		}else if(that.direction != 'top' && e.keyCode == 40){
			that.direction = 'bottom';	
		}
	}
	
	setInterval(function(){	    //蛇持续移动（注意this指向问题）
		that.snakeMove(); 	//蛇移动
	},500);
}

Game.prototype = {    //Game的原型已经改变。    Game.prototype = {}
	constructor: 'Game',		//需要添加constructor值。
	createSnake: function(){		
		var fragment = document.createDocumentFragment();
		for(var i=0; i<5; i++){
			var oSpan = document.createElement('span');
			oSpan.className = 'snake';
			oSpan.style.width = this.elem + 'px';	
			oSpan.style.height = this.elem + 'px';
			oSpan.style.left = i * this.elem + 'px';
			oSpan.style.top = 0;
			this.snakeElem.push(oSpan);	
			fragment.appendChild(oSpan);
		}	
		this.gamePlace.appendChild(fragment);
		this.snakeElem[this.snakeElem.length-1].style.borderRadius = '0 10px 10px 0';
	},
	createFood: function(){
		this.food = document.createElement('span');
		this.food.className = 'food';
		this.food.style.width = this.elem + 'px';	
		this.food.style.height = this.elem + 'px';
		var foodLeft, foodTop;
		do{
			foodLeft = Math.floor((this.gamePlace.offsetWidth-2)/this.elem*Math.random())*this.elem;
			foodTop = Math.floor((this.gamePlace.offsetHeight-2)/this.elem*Math.random())*this.elem;
		}while(this.isLikeSnake(foodTop,foodLeft));		//如果坐标一样，继续进行循环
		this.food.style.left = foodLeft + 'px';
		this.food.style.top = foodTop + 'px';
		this.gamePlace.appendChild(this.food);
	},
	isLikeSnake:function(foodTop,foodLeft){		//检测创建出来的食物坐标是否与蛇元素的坐标一样
		for(var i=0; i<this.snakeElem.length; i++){
			if(this.snakeElem[i].offsetTop == foodTop && this.snakeElem[i].offsetLeft == foodLeft){
				return true;	
			}
		}	
	},
	snakeMove: function(){
		var snakeHead = this.snakeElem[this.snakeElem.length-1],    //保存蛇头信息
			nowTop = snakeHead.offsetTop,
			nowLeft = snakeHead.offsetLeft;
		
		//判断方向
		if(this.direction == 'top'){		
			this.snakeElem[this.snakeElem.length-1].style.borderRadius = '10px 10px 0 0';
			nowTop -= this.elem;		
		}else if(this.direction == 'right'){
			this.snakeElem[this.snakeElem.length-1].style.borderRadius = '0 10px 10px 0';
			nowLeft += this.elem;	
		}else if(this.direction == 'bottom'){
			this.snakeElem[this.snakeElem.length-1].style.borderRadius = '0 0 10px 10px';
			nowTop += this.elem;	
		}else if(this.direction == 'left'){
			this.snakeElem[this.snakeElem.length-1].style.borderRadius = '10px 0 0 10px';
			nowLeft -= this.elem;	
		}
		
		//超出游戏画面，变向处理
		if(nowLeft >= this.gamePlace.offsetWidth-2){ nowLeft=0; }			
		if(nowLeft < 0) { nowLeft = this.gamePlace.offsetWidth-2-this.elem; }
		if(nowTop >= this.gamePlace.offsetHeight-2){ nowTop=0; console.log(nowTop);}
		if(nowTop < 0) { nowTop = this.gamePlace.offsetHeight-2-this.elem; }
		
		//迟到食物处理
		if(this.food.offsetLeft == nowLeft && this.food.offsetTop == nowTop){
			this.snakeElem[this.snakeElem.length-1].style.borderRadius = "0 0 0 0";
			this.snakeElem.push(this.food);
			this.food.className="snake";	
			this.score += 10;
			document.title = '分数：'+this.score;
			this.createFood();
			return;	
		}
		
		//判断是否碰到自己
		for(var i=0; i<this.snakeElem.length-1; i++){
			if(this.snakeElem[i].offsetLeft==nowLeft && this.snakeElem[i].offsetTop==nowTop){
				alert("游戏结束！！");
				location.reload();
			} 
		}
		
		//蛇身移动
		for(var i = 0;i<this.snakeElem.length-1;i++){     
			this.snakeElem[i].style.top = this.snakeElem[i+1].style.top;
			this.snakeElem[i].style.left = this.snakeElem[i+1].style.left;
		}
		snakeHead.style.top = nowTop +'px';    //蛇头移动
		snakeHead.style.left = nowLeft +'px';  //蛇头移动
	}
};

【js面向对象】贪吃蛇

猜你喜欢