JavaScript实现贪蛇吃小游戏

来源：互联网发布：网络英雄洛克人编辑：程序博客网时间：2024/05/17 21:53

借助jquery实现的贪蛇吃小游戏，先看效果图：

实现思路：

1.将蛇看作一个对象，蛇是有多个小方块组成，只要定位最开头（蛇头）的坐标，让后面的方块的坐标依次设置为相邻前面方块的坐标就可以实现连续运动。

2.设置一个target，牵引蛇走，在这个过程中，设置一个变量，用来记录最后一块（蛇尾）的坐标，以便于向后面添加方块。

3.做好各种检测碰撞。

注意：只在IE10和chrome版本中测试通过，其中有很多bug，但这是通往大师之路必须通过的。

界面代码：

<!DOCTYPE html><html><head>    <title></title>    <script type="application/javascript" src="jquery.js"></script>    <script type="application/javascript" src="greedy.js"></script>    <script type="application/javascript">        $(function(){            var greedy=new Greedy();            greedy.start();        });    </script></head><body><div id="control">    Big:<input type="radio" checked="checked" name="stage" value="30"/>    Small:<input type="radio" checked="checked" name="stage" value="20"/><br>    High:<input type="radio" name="speed" value="200"/>    Middle:<input type="radio" name="speed" value="400"/>    Low:<input type="radio" checked="checked" name="speed" value="800"/><br>    <button id="ok">OK</button>    <button id="stop" disabled="disabled">Stop</button>    <button id="start" disabled="disabled">Start</button>    <div id="canvas" >    </div></div></body></html>

js代码：

var Greedy=function(){    this.config={        delay:800,        box:20,        x:10,        y:10    };    this.direction=40;//方向变量    this.target=null;//牵引坐标    this.timer=null;    this.snake={        target:{_x:this.config.x,_y:this.config.y},//牵引蛇移动的坐标        node:[{_x:this.config.x,_y:this.config.y},{_x:this.config.x,_y:this.config.y-1},{_x:this.config.x,_y:this.config.y-2},{_x:this.config.x,_y:this.config.y-3}],        fp:{_x:this.config.x,_y:this.config.y}, //用于记录左后一块盒子的坐标        assemble:function(){ //重新组长设置蛇每个部位的坐标            this.copy(this.fp, this.node[this.node.length - 1]);            for(var i=this.node.length-1;i>0;i--){                this.copy(this.node[i], this.node[i - 1]);            }            this.copy(this.node[0], this.target);        },        addNode:function(){ //添加节点            var n={_x:0,_y:0};            this.copy(n,this.fp);            this.node.push(n);        },        copy:function(s,t){            s._x= t._x;            s._y= t._y;        }    }};//铺好舞台Greedy.prototype.init=function(){    var that=this;    $('#canvas').attr('style',"position:relative;width:"+(that.config.box*20)+"px;height:"+(that.config.box*20)+"px;margin:auto;padding:0px;border:1px solid #95B3D7;");    for(var i=0;i<20;i++){        for(var j=0;j<20;j++){            var box=$('<div></div>');            box.attr('id',j+'-'+i).css('width',that.config.box+'px').css('height',that.config.box+'px').css('border','1px solid #95B3D7').css('position','absolute').css('top',i*that.config.box+'px').css('left',j*that.config.box+'px');            $('#canvas').append(box);        }    }}Greedy.prototype.registEvent=function(){    var that=this;    var keys=new Array(37,38,39,40);    document.onkeydown=function(event){        if($.inArray(event.keyCode,keys)!=-1){            if(Math.abs(that.direction-event.keyCode)!=2){                that.direction=event.keyCode;            }        }    }}Greedy.prototype.setCss=function(node,cssObj){    for(var i=0;i<node.length;i++){        var p=$('#'+node[i]._x+'-'+node[i]._y);        for(var name in cssObj){            p.css(name,cssObj[name]);        }    }}Greedy.prototype.move=function(){    this.setCss(this.snake.node, {'background-color': ''});    switch (this.direction){        case 37:            this.snake.target._x-=1;            break;        case 38:            this.snake.target._y-=1;            break;        case 39:            this.snake.target._x+=1;            break;        case 40:            this.snake.target._y+=1;            break;    }    this.snake.assemble();    this.setCss(this.snake.node, {'background-color': 'red'});    if(this.boundaryCheck(this.snake.node[0])){        clearInterval(this.timer);        alert('game over!');    }    if(this.meetCheck()){        this.snake.addNode();        this.setTarget();    }}Greedy.prototype.start=function(){    var that=this;    $('#ok').click(function(){        if(that.timer>0){            clearInterval(that.timer);        }        $('#canvas').empty();        $('#start').text('start');        that.snake.target._x=10;        that.snake.target._y=10;        that.snake.assemble();        that.config.box=$("input[name='stage']:checked").val();        that.config.delay=$("input[name='speed']:checked").val();        that.init();        $('#start')[0].disabled="";        $('#stop')[0].disabled="";    });    $('#stop').click(function(){        clearInterval(that.timer);        $('#start')[0].disabled="";        $('#start').text('continue');    });    $('#start').click(function(){        this.disabled="disabled";        if(this.innerHTML=='continue'){            that.timer=setInterval(function(){                that.move();            },that.config.delay);        }else{            that.registEvent();            that.setTarget();            that.timer=setInterval(function(){                that.move();            },that.config.delay);        }    });}Greedy.prototype.setTarget=function(){    var x,y;    do{        x=Math.floor(Math.random()*20);        y=Math.floor(Math.random()*20);    }while(this.areaCheck(x,y))    $('#'+x+'-'+y).css('background-color','blue');    this.target={_x:x,_y:y};}//区域检查，目标盒子不能出现在蛇所覆盖的坐标范围Greedy.prototype.areaCheck=function(x,y){    for(var i=0;i<this.snake.node.length;i++){        if(this.snake.node[i]._x==x&&this.snake.node[i]._y==y){            return true;        }    }    return false;}//边界检查，蛇不能超出舞台或者蛇头撞到自身Greedy.prototype.boundaryCheck=function(head){    var obj=$('#'+head._x+'-'+head._y);    var left = parseInt(obj.css('left'));    var top = parseInt(obj.css('top'));    if(isNaN(left)||isNaN(top)){        return true;    }    for(var i=1;i<this.snake.node.length;i++){        if(this.snake.node[i]._x==head._x&&this.snake.node[i]._y==head._y){            console.log(head._x,head._y);            return true;        }    }    return false;}//检测蛇头是否碰触到目标盒子Greedy.prototype.meetCheck=function(){    for(var i=0;i<this.snake.node.length;i++){        if(this.snake.node[i]._x==this.target._x&&this.snake.node[i]._y==this.target._y){            return true;        }    }    return false;}