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 οnlοad='goGreedSnake();'> <div >Score<span id='score'>0</span>Level:<span id='level'>1</span></div> </body> </html>
< 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 >

转载于:https://www.cnblogs.com/funlake/archive/2009/06/18/1506179.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值