JavaScript 实现各种小游戏源码 ！js贪吃蛇源码

整理来自大四初学 JavaScript 写的贪吃蛇源码 。 

//  页面加载完毕运行游戏
window.onload = function(){
    GameControl.init();
};

//  游戏基本配置参数
var GameConfiguration = {
};

//  游戏控制器
var GameControl = {
    init : function(){  //游戏初始化
        GameConfiguration = {
            GameStart : false,  //  游戏是否已经开始
            width : 500,  //  游戏区域总宽度
            height : 500,  //  游戏区域总高度
            time :null,  //  蛇自动行走计时器
            snakelength : null,//  蛇当前长度
            frequency : 1,  //  控制点击蛇转换方向频率
            speed : 1000,  //  蛇每移动的时间
            newcol : null,  //  新生成方块的列
            newrow : null,  //  新生成方块的行
            NewRandowSqure : null,  //  新随机生成的方块
            NewMap : null,  //  地图类
            NewSnake : null,  //  蛇类
            score : 0,  //  分数
            addspeed : null  //  自动增加速度
        }


        //  实例化地图类并绘画出来
        GameConfiguration.NewMap = new map(GameConfiguration.width,GameConfiguration.height);
        GameConfiguration.NewMap.draw();

        //  实例化蛇并绘画出来
        GameConfiguration.NewSnake = new snake();
        GameConfiguration.NewSnake.draw();

        //  监听键盘事件
        document.onkeydown = function(e){
            //  蛇移动监听事件
            GameConfiguration.NewSnake.listenkeyboard(e.keyCode);
        }

        //  随机生成一个方块,并且不能与当前蛇身体各方块坐标重合
        setColAndRow(GameConfiguration.NewSnake);
        GameConfiguration.NewRandowSqure = new randowSqure();
        GameConfiguration.NewRandowSqure.draw();        
    },
    gameover : function(){
        clearInterval(GameConfiguration.time);
        clearInterval(GameConfiguration.addspeed);
        document.onkeydown =  null;
        GameConfiguration.NewSnake.destory();
        GameConfiguration.NewMap.destory();
        this.init();
    }
}

//  地图类
var map = function(width,height){
    this.width = width;
    this.height = height;
    this.ele = null;
    this.draw = function(){
        if(this.ele == null){
            this.ele = document.createElement('div');
            this.ele.id = 'main';
            this.ele.setAttribute('style','position: relative;margin:auto;overflow: hidden;');
            this.ele.style.width = this.width +'px';
            this.ele.style.height = this.height +'px';
            document.body.appendChild(this.ele);
            for(var i = 0;i<400;i++){
                var e = document.createElement('div');
                e.style.width = (this.width/20-2) +'px';
                e.style.height = (this.height/20-2) +'px';
                e.style.border = '1px solid #ccc';
                e.style.float = 'left';
                this.ele.appendChild(e);
            }
        }
    };
    this.destory = function(){
        document.body.removeChild(this.ele);
    };
}

//  方块类
var squre = function(width,height,state,col,row,bgc){  // col 横坐标   row 纵坐标
    this.width = width;
    this.height = height;
    this.col = col;
    this.row = row;
    this.ele = null;
    this.bgc = bgc;
    this.state = state ;  //  方块当前状态  是否未被吃,成为新的蛇的头部,或者是蛇的身体
    this.draw = function(){
        if(this.ele == null){
            this.ele = document.createElement('div');
            this.ele.setAttribute('style','position: absolute;margin:auto;overflow: hidden;')
            this.ele.style.width = this.width-2 +'px';
            this.ele.style.height = this.height-2 +'px';
            this.ele.style.border = '1px solid #fff';
            if(document.getElementById('main')){
                document.getElementById('main').appendChild(this.ele);
            }
        }
        this.ele.style.backgroundColor = this.bgc;
        this.ele.style.left = this.col*this.width +'px';
        this.ele.style.top = this.row*this.height +'px';
    }
}

//  创建一个随机的方块,并且不能与当前蛇身体每个块坐标相同函数
    function setColAndRow(e){
        GameConfiguration.newcol = Math.floor(Math.random()*20);
        GameConfiguration.newrow = Math.floor(Math.random()*20);
        for(var i=0;iif(e.body[i].col==GameConfiguration.newcol&&e.body[i].row==GameConfiguration.newrow){
                setTimeout(function(){
                    setColAndRow(e);
                });
                break;
                return false;
            }
        }
    }

//  随机出现的方块类
var randowSqure = function(e){
    squre.call(this,GameConfiguration.width/20,GameConfiguration.height/20,'food',GameConfiguration.newcol,GameConfiguration.newrow,'green');    
}

//  蛇类
var snake = function(){
    var t = this;
    this.body = null;
    this.draw = function(){
        if(this.body == null){
            this.body = [];
            for(var i = 0;i<3;i++){
                if(i==0){
                  var NewSqure = new squre(GameConfiguration.width/20,GameConfiguration.height/20,null,10+i,10,'deepskyblue');
                  NewSqure.draw();
                }
                else{
                var NewSqure = new squre(GameConfiguration.width/20,GameConfiguration.height/20,null,10+i,10,'yellow');
                NewSqure.draw();
                }
                this.body.push(NewSqure);
            }
        }
    };
    this.eatfood = function(){
        if(this.body[0].col == GameConfiguration.NewRandowSqure.col&&this.body[0].row == GameConfiguration.NewRandowSqure.row){
            if(GameConfiguration.NewRandowSqure){
                GameConfiguration.score ++;
                GameConfiguration.NewRandowSqure.bgc = 'yellow';
                this.body.push(GameConfiguration.NewRandowSqure);
                setColAndRow(GameConfiguration.NewSnake);
                GameConfiguration.NewRandowSqure = new randowSqure();
                GameConfiguration.NewRandowSqure.draw();
            }
        }
    };
    this.hitSelf = function(){
        for(var i=1;i<this.body.length;i++){
            if(this.body[i].col==this.body[0].col&&this.body[i].row==this.body[0].row){
                alert('咬到自己了!分数:'+GameConfiguration.score*100);
                GameControl.gameover();
            }
        }
        if(this.body[0].col<0||this.body[0].col>19||this.body[0].row<0||this.body[0].row>19){
            alert('撞墙了！分数:'+GameConfiguration.score*100);
            GameControl.gameover();
        }
    };
    this.autorunning = function(){
        if(t.direction !=null){
            if(GameConfiguration.frequency){
                switch(t.direction){
                    case 1 : t.moveUp();  //  上
                    break;
                    case 2 : t.moveDown();  //  下
                    break;
                    case 3 : t.moveLeft();  //  左
                    break;
                    case 4 : t.moveRight();  //  右
                    break;
                }
                t.hitSelf();
                t.eatfood();
                GameConfiguration.frequency = 0;
                setTimeout(function(){
                GameConfiguration.frequency = 1;    
                },GameConfiguration.speed);
            }
            if(GameConfiguration.time){
                clearInterval(GameConfiguration.time);
            }
            GameConfiguration.time = setInterval(function(){
                switch(t.direction){
                    case 1 : t.moveUp();  //  上
                    break;
                    case 2 : t.moveDown();  //  下
                    break;
                    case 3 : t.moveLeft();  //  左
                    break;
                    case 4 : t.moveRight();  //  右
                    break;
               };
               t.hitSelf();
               t.eatfood();
            },GameConfiguration.speed);
        }
    }
    this.moveUp = function(){
        if(this.body != null){
            GameConfiguration.snakelength = this.body.length;
                for(var i = GameConfiguration.snakelength-1;i > 0;i--){
                t.body[i].col = t.body[i-1].col;
                t.body[i].row = t.body[i-1].row;
                t.body[i].draw();
               }
            this.body[0].row -= 1;
            this.body[0].draw();    
        }
    };
    this.moveDown = function(){
        if(this.body != null){
            GameConfiguration.snakelength = this.body.length;
                for(var i = GameConfiguration.snakelength-1;i > 0;i--){
                t.body[i].col = t.body[i-1].col;
                t.body[i].row = t.body[i-1].row;
                t.body[i].draw();
               }
            this.body[0].row += 1;
            this.body[0].draw();    
        }
    };
    this.moveLeft = function(){
        if(this.body != null){
            GameConfiguration.snakelength = this.body.length;
                for(var i = GameConfiguration.snakelength-1;i > 0;i--){
                t.body[i].col = t.body[i-1].col;
                t.body[i].row = t.body[i-1].row;
                t.body[i].draw();
               }
            this.body[0].col -= 1;
            this.body[0].draw();    
        }
    };
    this.moveRight = function(){
        if(this.body != null){
            GameConfiguration.snakelength = this.body.length;
                for(var i = GameConfiguration.snakelength-1;i > 0;i--){
                t.body[i].col = t.body[i-1].col;
                t.body[i].row = t.body[i-1].row;
                t.body[i].draw();
               }
            this.body[0].col += 1;
            this.body[0].draw();    
        }
    };
    this.direction = 3;
    this.listenkeyboard = function(eve){
        if(!GameConfiguration.GameStart) {
        GameConfiguration.GameStart = true;
        GameConfiguration.addspeed = setInterval(function(){
            if(GameConfiguration.speed == 100){
                clearInterval(GameConfiguration.addspeed);
            }
            else{
                GameConfiguration.speed -= 100;
            }
        },5000);
        }
        switch(eve){
            case 87 :if(this.direction ==2) return false; this.direction = 1;  //  上
            break;
            case 83 :if(this.direction ==1) return false; this.direction = 2;  //  下
            break;
            case 65 :if(this.direction ==4) return false; this.direction = 3;  //  左
            break;
            case 68 :if(this.direction ==3) return false; this.direction = 4;  //  右
            break;
        }
        this.autorunning();
    };
    this.destory = function(){
        for(var i=0;i<this.body.length;i++){
            this.body[i].ele.remove();
        }
    };
}

另外需要超级玛丽，坦克打站，飞机大战, 别踩白块等源码的可以联系笔者, 都是在学校一时兴起写的一些小游戏