代码改变世界

js贪吃蛇，面向对象

2012-03-08 20:26  尔  阅读(249)  评论(0)    收藏  举报

最近比较忙，花在js上的时间很少了，最近要多看看java和数据结构了，毕设也要开始做了，抽空写了上回未完成的js版的贪吃蛇，现在在写思路比较顺畅了，很快就写出了，程序本身并不重要，写这样的小程序可以加深对js作用域，闭包，对象，等等基本概念的理解，这个程序比较差的一点是完全不用生成一个Food对象，这样慢慢js中的对象会很多，但这样写是为了可以创建出不同种类的食物（双倍分数食物，闪烁食物），当然，现在没时间了，也就没再写下去。

下一步可以学习下canvas，有时间，将其改成canvas版

ie，ff，chorme均可玩


放上截图


a<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
    table{
	    margin : 0 auto;
	    padding : 0;
			
	}
	td{
	    background : #FFC;	
		width : 9px;
		height : 9px;
	}
	#score{
	    position : absolute;
		margin : 0 auto;
	    top : 100px;
	}
	#score0{
	    color : 'red';
	}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body onload = "Frame.init()">
<div id="score">您的分数<div id="score0"></div></div>
<div id="frame"></div>
</body>
<script type="text/javascript"/>
	//屏蔽游览器的事件差异的工具函数
	//单例
	EventUtil = {  
        addHandler : function(element, type, handler) {  
            if(element.addEventListener) {  
                element.addEventListener(type, handler, false);  
            }else if(element.attachEvent) {  
                element.attachEvent("on" + type, handler)  
            }else {  
                element["on" + type] = handler;  
            }  
        },  
        removeHandler : function(element, type, handler){  
            if(element.removeEventListener) {  
                element.removeEventListener(type, handler, false);  
            }else if(element.detachEvent) {  
                element.detachEvent("on" + type,handler);  
            }else {  
                element["on" + type]=null;  
             }  
        },  
        getEvent : function(event) {  
            return event ? event : window.event;  
        },  
        getTarget:function(event) {  
            return event.target || event.srcElement;  
        } 
    }
	//棋盘对象，
	//单例，状态不需改变
	Frame = {
	      init : function() {
		    //表格模拟的二维数组的行数和列数
			var rows = 40;
			var cols = 60;
			
			var table = document.createElement('table');
			for(var i = 0; i < rows; i++) {
			    var tr = table.insertRow(i);
				for(var j = 0; j<cols; j++) {
				    var td = tr.insertCell(j);
				}
			}
			//table.border = '1px' ;
			var div = document.getElementById('frame');
			div.appendChild(table);
			Snake.table = table;
			FoodFactory.table = table;
			var food = FoodFactory.factory();
			food.show();
			food = null;
			EventUtil.addHandler(document, 'keydown', function(e){
			    e = EventUtil.getEvent(e);
				Snake.setDir(e.keyCode);
			});
		}
	}
	//蛇对象
	//单例
    Snake = {
	    //分数
		score : 0,
		//蛇的身体,'重绘'的依据
		//初始时长度为三
		body : [
			       {x:4, y:4}
			    ],
		//蛇头方向
		//蛇身设置的依据
		direction : 'right',
		//根据蛇头设置方向
		//此函数绑定为监听,注意this指向的是谁
		timer : null,
		setDir : function(code) {
			switch(code) {
			    case 37 : {
				    if(Snake.direction == 'right')
					    break;
					Snake.direction = 'left';
					break;
				}
				case 38 : {
				    if(Snake.direction == 'bottom')
					    break;
					Snake.direction = 'top';
					break;
				}
				case 39 : {
				    if(Snake.direction == 'left')
					    break;
					Snake.direction = 'right';
					break;
				}
				case 40 : {
				    if(Snake.direction == 'top')
					    break;
					Snake.direction = 'bottom';
					break;
				}
			}
		},
 		//移动
		move : function() {
		    Snake.timer = setInterval(function() {
			    Snake.step();     
			}, 300);
		},
		step : function() {
		    var msg = this.check();
			var state = msg.state;
			var _x = msg.x;
		    var _y = msg.y;
			if(state == 'fail') {
			    alert('笨蛋，你输了');
				clearInterval(this.timer);
				return;
			}else if(state == 'move') {
				//先进行擦除操作
				this.earse();
				//头出尾进
				this.body.pop();
				this.body.unshift({x:_x, y:_y});
				this.draw();
			 }else if(state == 'eat') {
			    this.earse();
				this.body.unshift({x:_x, y:_y})


				//把此点与身体融为一色
				this.table.rows[_x].cells[_y].style.baackground = 'black';
				this.draw();
			    //再产生一个食物
				var food = FoodFactory.factory();
				food.show();
				food = null;
			    this.setScore();
			}
		},
		//碰撞检测
		check : function() {
		    //检测的状态有3种，fail,eat,move
			var state = 'fail';
			//找出下一步
			var point = this.nextStep();         
		    //_x _y为下一步的蛇头坐标，预先进行检测
			var _x = point.x;
			var _y = point.y;
            
			//越界处理
			if(_x < 0 || _y < 0 || _x >= 60 || _y >= 40) {
				return {state:state, x:_x, y:_y};
			}
			//碰到自己失败
			for(var i = 0; i<this.body.length; i++ ) {
			    if(_x == this.body[i].x && _y == this.body[i].y) {
					return {state:state, x:_x, y:_y};
				}
			}
			//可行点
			if(this.table.rows[_y].cells[_x].style.backgroundColor == ''){
			    state = 'move';
				return {state:state, x:_x, y:_y};
			//都不满足没有返回时，必然就是有食物的点了
			}else {
			    state = 'eat';
				return {state:state, x:_x, y:_y};
			}
		},
		//根据蛇头方向，算出下一步蛇头的坐标
		nextStep : function() {
			//蛇头的当前坐标
			var x = this.body[0].x;
			var y = this.body[0].y;
			if(this.direction == 'right') {
				++x;
				return {x:x, y:y};
			}
			if(this.direction == 'left') {
			    --x;
			    return {x:x, y:y};
			}
			if(this.direction == 'bottom') {
			    ++y;
			    return {x:x, y:y};
			}
			if(this.direction == 'top') {
			    --y;
			    return {x:x, y:y};
			}
		
		},
		draw : function() {
		    for(var i = 0; i < this.body.length; i++) {
			    var x = this.body[i].x;
				var y = this.body[i].y;
			    this.table.rows[y].cells[x].style.backgroundColor = 'black';
			}
		},
		earse : function() {
		    for(var i = 0; i < this.body.length; i++) {
			    var x = this.body[i].x;
				var y = this.body[i].y;
				this.table.rows[y].cells[x].style.backgroundColor = '';
			}
		},
		setScore : function() {
		    document.getElementById('score0').innerHTML = (this.body.length - 1) * 10;
		}
	}
	
	function Food(x, y){
	    this.x = x;
		this.y = y;
	}
	Food.prototype.show = function(){
	    FoodFactory.table.rows[this.x].cells[this.y].style.backgroundColor = 'green'; 
	}
	FoodFactory = {
	    factory : function() {
			return new Food(Math.floor(Math.random() * 60), Math.floor(Math.random() * 40));
		}
	}
	Snake.move();
</script>
</html>