snake.html

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML canvas</title>
<style type="text/css">
    html,body{overflow:hidden;}
</style>
</head>

<body>


<canvas id="canvas" style="background:#eee;border:1px solid #ccc;">你的浏览器不支持canvas</canvas>

<script type="text/javascript">



var snake = {
    config: {
        width:50,
        height:25,
        pixel:10,
        fps:3,
        gameOver : false,
        pause : false,
        color : "#ef0f6e",
        border: "#ffffff"
    },
    position : [ [2,0],[1,0],[0,0] ],
    forward: [],
    food:[],
    
    //重画canvas
    draw : function(){
        this.ctx.clearRect(0,0,this.config.width*this.config.pixel,this.config.height*this.config.pixel);
        var length = this.position.length;
        //画蛇
        for(var k = length - 1;k >= 0;k--){
            this.drawDotted( this.position[k] );
        }
        //画食物
        for(var k=0,kk=this.food.length;k<kk;k++){
            this.drawDotted( this.food[k] );
        }
    },
    //按键改变方向
    changeDirection:function(){
        var keyCode = this.keyCode || 39;
        var forwardList = {
            "37" : [-1,0],
            "38" : [0,-1],
            "39" : [1,0],
            "40" : [0,1]
        };
        //防止逆行 和 重复按键
        if( forwardList[keyCode] && 
             (this.forward[0] != forwardList[keyCode][0]) &&
             (this.forward[1] != forwardList[keyCode][1]) 
         ){
            this.forward = forwardList[keyCode];
        }
    },
    
    getPos: function(){
        //前进中，除第一颗的算法
        var length = this.position.length;
        var last = [ this.position[length-1][0],this.position[length-1][1] ];
        this.last = last;
        this.length = length;
        for(var k = length - 1;k >= 0;k--){
            if(k){
                this.position[k][0] = this.position[k-1][0];
                this.position[k][1] = this.position[k-1][1];
            }
        };
        //前进中，第一颗的算法
        this.changeDirection();
        this.position[0][0] += this.forward[0];
        this.position[0][1] += this.forward[1];
    },
    
    eatFood: function(){
        //吃到食物时，加长蛇，同时创建新的食物
        for(var k=0,kk=this.food.length;k<kk;k++){
            if( this.position[0][0] == this.food[k][0] && 
                this.position[0][1] == this.food[k][1] ){
                this.position.push( this.last );
                this.createFood(k);
            }
        }
    },
    
    addLevel:function(){
        //随着长度增加，同时增大运动的频率,在20和 40时还会出现两个食物
        var level={
            "7": [1,0], "11": [1,0], "14":[1,0],
            "20":[1,1], "25": [1,0], "30":[1,0],
            "40":[1,1], "50": [1,0], "70":[1,0],
            "90":[1,0], "120":[1,0]
        };
        if( level[length]){
            if( level[length][0] ){
                this.config.fps+=level[length][0];
            }
            if( level[length][1] ){
                this.createFood(this.food.length);
            }
            level[length] = false;
        }
    },
    
    gameOver: function(){
        //游戏结束的两种情况
        for(var k = this.length - 1;k >= 0;k--){
            if(k){
                //头咬尾时，游戏结束
                if( (this.position[0][0] == this.position[k][0]) && 
                    (this.position[0][1] == this.position[k][1]) ){
                    this.config.gameOver = true;
                }
                //头撞墙壁时，游戏结束
                if( this.position[0][0] < 0 || 
                    this.position[0][1] < 0 || 
                    this.position[0][0] >= this.config.width || 
                    this.position[0][1] >= this.config.height){
                    this.config.gameOver = true;
                }
            }
        }
        
        if(this.config.gameOver){
            alert("game over");
            clearTimeout(this.timer);
            location.reload();
        }

    },
    
    //确定食物的坐标
    createFood:function(key){
        var r = function(n){
            return Math.floor(Math.random()*n) + 1;
        }
        var x = r(this.config.width-1);
        var y = r(this.config.height-1);
        var length = this.position.length;
        for(var k =0;k<length;k++){
            if( x == this.position[k][0] && 
                y == this.position[k][1] ){
                createFood(key);
                return;
            }
        }
        this.food[key] = [x,y];
    },
    //画食物点和边框
    drawDotted:function(pos){
        this.ctx.fillRect( pos[0]*this.config.pixel, pos[1]*this.config.pixel,this.config.pixel,this.config.pixel );
        this.ctx.strokeRect( pos[0]*this.config.pixel, pos[1]*this.config.pixel,this.config.pixel,this.config.pixel );
    },
    
    bindEvent: function(){
        var that = this;
        //绑定事件，实现暂停
        document.onkeydown = function(e){
            e = e || window.event;
            var keyCode = e.keyCode;
            if(keyCode == 32){
                that.config.pause = !that.config.pause;
            };
            that.keyCode = keyCode;
        }
    },
    
    next:function(){   
        if(this.config.pause){ return false;}   
        this.getPos();
        this.gameOver();
        this.eatFood();
        this.addLevel();
        this.draw();
    },
        
    init: function(id){
        var that = this;
        var canvas = document.getElementById(id);
        canvas.width = this.config.width * this.config.pixel;
        canvas.height = this.config.height * this.config.pixel;
        that.ctx=canvas.getContext("2d");
        var ctx = that.ctx;
        ctx.fillStyle = this.config.color;
        ctx.strokeStyle = this.config.border;
        
        that.bindEvent();
        that.createFood(0);

        that.timer = setInterval( function(){that.next();}, 1000/that.config.fps );

    }
}


snake.init("canvas");

</script>

</body>
</html>
