贪吃蛇游戏总结

来源：互联网发布：陌陌直播软件编辑：程序博客网时间：2024/06/06 03:49
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>贪吃蛇游戏</title>    <style type="text/css">        body{            margin: 0px;        }    </style></head><body></body></html><script type="text/javascript">    //创建绘地图 创建一个类    function Map(){        //创建类的私有成员        var w=800;        var h=400;        //成员方法 用来绘制地图        this.showmap=function(){            //创建div 设置css样式 追加给body            var tu=document.createElement('div');            tu.style.width=w+"px";            tu.style.height=h+"px";            tu.style.backgroundImage="url(12.jpg)";            document.body.appendChild(tu);        }    }    //绘制食物 创建一个类    function Food(){        //创建私有成员  代表移动的步进值        var len=20;        //创建成员方法 将食物坐标设置成公开的 以便在外部访问        var xFood=0;        var yFood=0;        //设置初始时食物为空以便能够判断        this.piece=null;        this.showfood=function(){            //创建div 设置css样式 追加给body            //判断piece为空时进行创建            if (this.piece==null) {                this.piece=document.createElement('div');                this.piece.style.width=this.piece.style.height=len+"px";                this.piece.style.backgroundColor="green";                this.piece.style.position="absolute";//设置绝对定位                 document.body.appendChild(this.piece);            }            this.xFood=Math.floor(Math.random()*40);//0-39之间的随机数            this.yFood=Math.floor(Math.random()*20);//0-19之间的随机数           this.piece.style.left= this.xFood*len+"px";//食物之间的真实坐标是：权值坐标+步数            this.piece.style.top= this.yFood*len+"px";        }    }    //绘制贪食蛇 设置贪食蛇的类    function Snake(){        var len=20;        //设置默认移动位置为向右        this.redirect='right';        //绘制蛇身 一个二位数组 分别代表x坐标 y坐标 颜色        //增加null用来表示此蛇节是否被创建过 创建过移动后就不会重新创建了        this.snakebody=[[0,1,'gray',null],[1,1,'gray',null],[2,1,'gray',null],[3,1,'red',null]];        this.showsnake=function(){            //遍历各个蛇节，并依次创建即可            for(var i=0;i<this.snakebody.length;i++){                if (this.snakebody[i][3]==null) {                    this.snakebody[i][3]=document.createElement('div');                    this.snakebody[i][3].style.width=this.snakebody[i][3].style.height=len+'px';                    this.snakebody[i][3].style.backgroundColor=this.snakebody[i][2];                    this.snakebody[i][3].style.position='absolute';                    this.snakebody[i][3].style.left=this.snakebody[i][0]*len+"px";                    this.snakebody[i][3].style.top=this.snakebody[i][1]*len+"px";                    document.body.appendChild(this.snakebody[i][3]);                }                //如果被创建过则就选择直接改变坐标                this.snakebody[i][3].style.left=this.snakebody[i][0]*len+"px";                this.snakebody[i][3].style.top=this.snakebody[i][1]*len+"px";            }            //设置蛇移动时的方法 分为蛇节坐标 蛇头坐标分别设置            this.movesnake=function(){            //蛇节坐标在移动时的新坐标是前边蛇节坐标的旧坐标                for(var i=0;i<this.snakebody.length-1;i++){                    this.snakebody[i][0]=this.snakebody[i+1][0];                    this.snakebody[i][1]=this.snakebody[i+1][1];                }                //设置蛇头的变化情况                if (this.redirect=='right') {                    this.snakebody[this.snakebody.length-1][0] +=1;                }                 if (this.redirect=='left') {                    this.snakebody[this.snakebody.length-1][0] -=1;                }                 if (this.redirect=='up') {                    this.snakebody[this.snakebody.length-1][1] -=1;                }                 if (this.redirect=='down') {                    this.snakebody[this.snakebody.length-1][1] +=1;                }                //吃食物                //首先获得食物和蛇头的位置                var xSnake=this.snakebody[this.snakebody.length-1][0];                var ySnake=this.snakebody[this.snakebody.length-1][1];                console.log(xSnake);                if (xSnake == food.xFood && ySnake == food.yFood) {                    //复制最后一个节点                    var newjie=[this.snakebody[0][0],this.snakebody[0][1],'gray',null];                    //将最后一个节点放入二维数组中                    this.snakebody.unshift(newjie);                    //重新创建食物                    food.showfood();                }                //判断小蛇的移动范围                if (xSnake<0 || xSnake>39 || ySnake<0 ||ySnake>19) {                    alert('game over！');                    clearInterval(mytime);                    return false;                }                //判断自己的蛇头是否和自己的蛇节的某个坐标相重                for(var k=0;k<this.snakebody.length-1;k++){                    if (this.snakebody[k][0]==xSnake && this.snakebody[k][1]==ySnake) {                        alert('game over！');                        clearInterval('mytime');                        return false;                    }                }                //调用显示函数 使得在坐标改变后可以 重新显示蛇 既重新绘制                this.showsnake();            }        }    }    //实例化这个类    window.onload=function(){        //实例化地图的对象        var map=new Map();        map.showmap();        //实例化食物的对象 将食物设置成全局的 以便函数外访问        food=new Food();        food.showfood();        //实例化蛇的对象        snake=new Snake();        //调用显示蛇的方法来绘制蛇        snake.showsnake();        //调用蛇的移动方法 开控制蛇的移动 使得蛇可以连续的移动 必须将snake设置成全局变量才可以使用        mytime=setInterval("snake.movesnake()",200);                //设置上下左右来控制 判断用== 不能用=        document.onkeydown=function(evt){            var num=evt.keyCode;            if (num==38) {                //设置向上                snake.redirect='up';                snake.movesnake();            }            if (num==40) {                //设置向下                snake.redirect='down';                snake.movesnake();            }            if (num==37) {                //设置向左                snake.redirect='left';                snake.movesnake();            }            if (num==39) {                //设置向右                snake.redirect='right';                snake.movesnake();            }        }    }</script>
阅读全文
0 0