javascript练练手[贪食蛇]

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset:utf-8"/>
<title></title>
<style>

</style>
<script type='text/javascript'>


var $ = function($){
    return typeof $ == 'object' ? $ : document.getElementById($);
}
var $apply = function(o,t){
    if(t && typeof o == 'object'){
        for(var i in t){
            o[i] = t[i];
        }
    }
    return o;
}
var $addEvent = function(dom,ev,fn,scope,tf){
    if(window.attachEvent){
        dom.attachEvent('on'+ev,function(){fn.call(scope||dom)})
    }
    if(window.addEventListener){
        dom.addEventListener(ev,function(event){fn.call(scope||dom,event)},tf)
    }
}
var $removeEvent = function(dom,ev,fn,scope,tf){
    if(window.detachEvent){
        dom.detachEvent('on'+ev,function(){fn.call(scope||dom)})
    }
    if(window.removeEventListener){
        dom.removeEventListener(ev,fn,tf)
    }
}
var greedSnake = function(config){
    this.__construct.call(this,config);
}
greedSnake.prototype = {
    __construct : function(config){
        $apply(this,config);
        this.drawScreen();
        this.foods = [];
        for(var i = 0;i<this.foodAmount;i++)
            this.drawFood();
        this.drawStartSnake();

        this.moveRelate = {
            'down'    : 'up'
            ,'up'    : 'down'
            ,'left'    : 'right'
            ,'right': 'left'    
        };
        this.score  = 0;
        this.eatSum = 1;
        this.status = 'On';
    }
   ,drawScreen : function(){
        var tbl = document.createElement('table');
        var tbody = document.createElement('tbody');
        tbl.appendChild(tbody);
        tbl.style.width            = this.width;
        tbl.style.height        = this.height;

        for(var i=0;i<this.rows;i++){
            var tr = document.createElement('tr');
            for(var j=0;j<this.cols;j++){
                var td = document.createElement('td');
                td.style.cssText = 'background:'+this.screenColor+';';
                tr.appendChild(td);
            }
            tbody.appendChild(tr);
        }
        document.body.appendChild(tbl);
        this.tbl = tbl;
        tbl = tbody = tr = td = null;
   }
  ,drawStartSnake : function(){
    this.snake = [];
    for(var x = 0,y=0;y<this.bornSnake;y++){
        var o = this.getItem(x,y);
        o.style.background = this.snakeColor;
        this.snake.push({x:x,y:y});
    }
    this.head = this.getHead();
  }
  ,drawFood : function(){
    
    var x = Math.round(Math.random()*(this.cols-1)),
        y = Math.round(Math.random()*(this.rows-1));
    var food = this.getItem(x,y);
    this.foods.push({x:x,y:y});
    food.style.background = this.foodColor[Math.round(Math.random()*(this.foodColor.length-1))];
  }
  ,moveLeft : function(){
    if(this.status == 'On')
    this.moveJugdement('left');
  }
  ,moveUp : function(){
    if(this.status == 'On')
    this.moveJugdement('up');
  }
  ,moveRight : function(){
    if(this.status == 'On')
    this.moveJugdement('right');
  }
  ,moveDown : function(){
    if(this.status == 'On')
    this.moveJugdement('down');
  }
  ,moveJugdement : function(forward){
    var _this = this;
    if(this.movingForward ==  this.moveRelate[forward] || forward == this.movingForward) return;
    
    if(this.movingSt){
        clearInterval(this.movingSt);
        this.movingSt = null;
    }
    this.movingForward = forward;

    this.movingSt = setInterval(function(){_this.moving()},this.levelSpeed[this.level]);
  }
  ,moving : function(){
    switch(this.movingForward){
        case 'left':
            this.nextStep({x:0,y:-1});
        break;
        
        case 'right':
            this.nextStep({x:0,y:1});
        break;
        
        case 'down':
            this.nextStep({x:1,y:0});
        break;

        case 'up':
            this.nextStep({x:-1,y:0});
            
        break;
    }
  }
  ,nextStep : function(c){
    var _this=this
        ,ns = {x:_this.head.x+c.x,y:_this.head.y+c.y};
    if(this.getItem(ns.x,ns.y) == null){
        this.turnOff();
        return;
    }
    var isFood = this.isFood(ns.x,ns.y),touchItSelf = this.touchItSelf(ns.x,ns.y);
    var s = this.snake.push(ns);
    this.head = this.getHead();
    
    if(this.head.y == this.cols || this.head.x == this.rows || touchItSelf){
        this.turnOff();
        return;
    }

    this.fillColor(this.head,this.snakeColor);
    
    if(!isFood){
        var f = this.snake.shift();
        this.fillColor(f,this.screenColor);
    }
    else{
        this.countScore();
        this.drawFood();
        this.reColor(isFood.color);
    }
  }
 ,reColor : function(color){
    for(var i=0,j=this.snake.length;i<j;i++){
        var obj = this.getItem(this.snake[i].x,this.snake[i].y);
        obj.style.background = color;
        this.snakeColor = color;
    }
    obj = null;
 }
 ,fillColor : function(o,color){
    var obj = this.getItem(o.x,o.y);

    obj.style.background = color;
  }
 ,getItem : function(x,y){
    var obj = this.tbl.rows.item(x).cells.item(y) || null;
    return obj;
  }
 ,getHead : function(){
    return this.snake[this.snake.length-1];
 }
 ,isFood : function(x,y){
    try{var obj = this.getItem(x,y);}
    catch(e){
        this.turnOff();
        return;
    }
    for(var i=0,j=this.foods.length;i<j;i++){
        if(x == this.foods[i].x && y == this.foods[i].y){
            return {x:x,y:y,color:obj.style.background};
        }
    }
    return false;
 }
 ,touchItSelf : function(x,y){
    var obj = this.getItem(x,y);
    for(var i=0,j=this.snake.length;i<j;i++){
        if(x == this.snake[i].x && y == this.snake[i].y){
            return true;
        }
    }
    return false;
 }
 ,run : function(){
    $addEvent(document,"keydown",function(e){

        var event = window.event || e
           ,key   = event.keyCode;
         switch(key){
            case 38 :
                this.moveUp();
            break;
            case 40 : 
                this.moveDown();
            break;
            case 37 :
                this.moveLeft();
            break
            case 39 :
                this.moveRight();
            break
            default : 
                //this.prepare();
            break;
         }
    },this,false);
 }
 ,turnOff : function(){
    alert('Just press F5 to restart again!:)')
    clearInterval(this.movingSt);
    this.movingSt = null;
    this.status = 'Off';
 }
 ,countScore : function(){
    var sc = $('score'),lv = $('level');
    this.score += this.levelScore[this.level];
    if(this.eatSum == this.upLevel){
        this.level = this.level == this.topLevel ? this.topLevel : this.level+1;
        this.eatSum = 1;
    }
    else this.eatSum++;
    sc.innerHTML  = this.score;
    lv.innerHTML  = this.level;

 }
}
function goGreedSnake(){

    var gs = new greedSnake({
        cols    : 65
       ,rows    : 65
       ,width    : 700
       ,height    : 700
       ,snakeColor  : '#1E90FF'
       ,screenColor : '#f3f3f3'
       ,levelSpeed  : {
            1 : 200
           ,2 : 150
           ,3 : 100
           ,4 : 50
           ,5 : 25
       }
      ,levelScore : {
            1 : 50
           ,2 : 100
           ,3 : 150
           ,4 : 200
           ,5 : 250
      }
      ,upLevel    : 10
      ,level    : 1
      ,topLevel : 5
      ,bornSnake : 4
      ,foodAmount : 50
      ,foodColor : ["#FF7F50","#9ACD32","#FF6347","#2E8B57","#800080","#DB7093","#191970","#00FA9A"]
    });
    gs.run();


}
</script>
</head>
<body onload='goGreedSnake();'>
<div >Score<span id='score'>0</span>Level:<span id='level'>1</span></div>
</body>
</html>
posted @ 2009-06-18 21:57  一缕青烟  阅读(277)  评论(0)  编辑  收藏  举报