原生js写的贪吃蛇(原创)

Html

Css

var game = {
    map : null,
    ctx : null,
    isGameOver : false,
    fps : 20,
    gameSize : 500,
    grids : 50,
    x : 40,
    y : 25,
    dir : 'U',
    food : [],
    body : [],
    init : function(){
        var that = this;
        var canvas = document.createElement("canvas");
        canvas.width = this.gameSize;
        canvas.height = this.gameSize;
        document.body.appendChild(canvas);
        this.ctx = canvas.getContext("2d");

this.map = new Array(this.grids);
        for(var i=0;i<this.map.length;i++){
            this.map[i] = new Array(this.grids);
        }

this.body.push([this.x, this.y]);

for(var i=0;i<this.map.length;i++){
            for(var j=0;j<this.map[i].length;j++){
                this.map[i][j] = 0;
                for(var k=0;k<this.body.length;k++){
                    if( i==this.body[k][0] && j==this.body[k][1] ) {
                        this.map[this.body[k][0]][this.body[k][1]] = 5;
                    }
                }
                if( i==this.food[0] && j==this.food[1] ){
                    this.map[this.food[0]][this.food[1]] = 1;
                }
            }
        }

for(var i=0;i<this.map.length;i++){
            for(var j=0;j<this.map[i].length;j++){
                if( this.map[j][i] == 1 ){
                    this.ctx.fillStyle = 'red';
                }else if( this.map[j][i] == 5 ){
                    this.ctx.fillStyle = 'green';
                }else{
                    this.ctx.fillStyle = 'black';
                }
                this.ctx.fillRect( j*(this.gameSize/this.grids), i*(this.gameSize/this.grids), this.gameSize/this.grids, this.gameSize/this.grids );
            }
        }
    },
    setFood : function(){
        if( this.food.length == 0 ){
            this.food = [this.rand(0,this.grids-1),this.rand(0,this.grids-1)];
        }
    },
    move : function(){
        if( this.dir == 'U' ){
            if( this.y-1 >= 0 ){
                this.y -= 1;
            }else{
                console.log('撞到上面的墙...');
                this.isGameOver = true;
            }
        }else if( this.dir == 'D' ){
            if( this.y+1 <= this.grids-1 ){
                this.y += 1;
            }else{
                console.log('撞到下面的墙...');
                this.isGameOver = true;
            }
        }else if( this.dir == 'L' ){
            if( this.x-1 >= 0 ){
                this.x -= 1;
            }else{
                console.log('撞到左面的墙...');
                this.isGameOver = true;
            }
        }else if( this.dir == 'R' ){
            if( this.x+1 <= this.grids-1 ){
                this.x += 1;
            }else{
                console.log('撞到右面的墙...');
                this.isGameOver = true;
            }
        }
        //是否吃到食物
        if( this.x == this.food[0] && this.y == this.food[1] ){
            this.food = [];
            this.body.unshift([this.x,this.y]);
        }else{
            this.body.pop();
            this.body.unshift([this.x,this.y]);
        }
        //检测是否碰到自己
        for(var k=1;k<this.body.length;k++){
            if( this.x==this.body[k][0] && this.y==this.body[k][1] ) {
                console.log('碰到自己了...');
                this.isGameOver = true;
            }
        }
    },
    rand : function(min,max){
        return Math.floor(Math.random()*(max-min+1)+min);
    }
};
game.init();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.1

立即下载

原生js写的贪吃蛇(原创)

代码描述：利用工作闲暇时间，用原生js写了一个贪吃蛇游戏，欢迎大家下载。使用 W、A、S、D或 ↑、↓、←、→ 控制

5

最新

发表评论全部评论

暂时没有评论！

I Iove you Iike a love s0

2018/3/5 14:46:49

怎么下载呀回复

路人丁0

2018/2/5 10:30:48

这个原生贪吃蛇写得非常棒，赞一个
回复

追忆0

2018/2/5 10:20:09

因为没法修改，请需要的朋友自己将键盘监听那段替换为以下内容：
document.body.addEventListener(keydown function(e) { if ((e.keyCode == 87 || e.keyCode == 38) && that.dir != D) { that.dir = U } else if ((e.keyCode == 83 || e.keyCode == 40) && that.dir != U) { that.dir = D } else if ((e.keyCode == 65 || e.keyCode == 37) && that.dir != R) { that.dir = L } else if ((e.keyCode == 68 || e.keyCode == 39) && that.dir != L) { that.dir = R } } false)
回复

画地为牢吧0

2018/2/4 20:29:40

吃两个后，然后按反方向会卡住

追忆0

2018/2/5 10:05:26

嗯，不是卡住了，是判定游戏结束了。在蛇行走的时候如果按了相反的方向键就判定撞到自己，已在最新的版本中修复了此bug

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

追忆

相关代码

原生js写的贪吃蛇(原创)

最新