贪吃蛇游戏总结

最新推荐文章于 2022-10-29 10:57:47 发布
喜东东啊
最新推荐文章于 2022-10-29 10:57:47 发布
阅读量597
点赞数
本文链接：https://blog.csdn.net/weixin_41016545/article/details/78568405
版权
<!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

收藏

觉得还不错? 一键收藏
0
评论
贪吃蛇游戏总结

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>贪吃蛇游戏</title> <style type="text/css"> body{ margin: 0px; } </style></head><body></bod
复制链接

扫一扫