js贪吃蛇

最新推荐文章于 2018-08-28 10:01:14 发布

Tournesol1530215484

最新推荐文章于 2018-08-28 10:01:14 发布

阅读量268

点赞数

分类专栏：自己写的php 文章标签：基础版的js dom

本文链接：https://blog.csdn.net/qq_36447759/article/details/78922616

版权

自己写的php 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、基础要求

1.绘制界面
    1.1利用dom创建div元素并设置css样式
    1.2把div追加到body里面
2.绘制食物
    2.1利用dom创建div元素，绘制绿色的css背景颜色
    2.2设置食物的宽和高，并把div追加给body
    3.3给div绝对定位
        3.31食物摆放有“步进值20”防止放到线上
        3.32食物在地图上的位置是变得，原因是应为有“权值”
        3.33x轴的权值是：0-39（Math.floor(Math.random()*40)）
        3.34x轴的权值是：0-29（Math.floor(Math.random()*30)）
        3.35left和对决定定位元素进行位置设定的两个样式
        3.36食物坐标=步进值*权值
3.绘制小蛇
    3.1利用dom创建div元素，绘制绿色的css背景颜色
    3.2设置每个蛇节的宽和高，并把div追加给body
    3.3遍历每个蛇节并进行具体设置
    3.4绝对定位
    3.5设置坐标=权限值坐标*步进值
4.小蛇移动
    4.1算法设计：先从蛇节的尾部开始移动，然每一个蛇节的移动的新坐标是前一个蛇节的就坐标
    4.2向右移动，纵坐标不变横坐标++
    4.3向左移动，纵坐标不变横坐标--
    4.4向下移动，纵坐标不变纵坐标++
    4.5向上移动，横坐标不变纵坐标--
5.设置键盘事件来岁小蛇进行操作
    document.οnkeyup=function(evt){}
6.设置蛇开始起来吃食物了
    6.1判断蛇头坐标和食物坐标是否相等
    6.2小蛇吃食物，创建新的蛇节，食物刷新
7.限制小蛇的移动范围以及避免迟到自己

二、代码显示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇</title>
    <script type="text/javascript">
        //①绘制操作界面
        function Map(){
            var w=800;
            var h=600;
            this.showmap=function(){
                //1.1利用dom创建div元素并设置css样式
                // 1.2把div追加到body里面
                var mian=document.createElement('div');
                mian.style.width=w+'px';
                mian.style.height=h+'px';
                //设置背景是方块图片
                mian.style.backgroundImage="url(12.jpg)";
                document.body.appendChild(mian);

            }
        }
        //②绘制食物
        function Food(){
            var len=20;
            this.xFood=0;
            this.yFood=0;
            this.price=null;
           this.shouFood=function(){
               if(this.price==null){
                   //利用dom创建div元素，绘制绿色的css背景颜色
                   this.price=document.createElement('div');
                   this.price.style.width=len+"px";
                   this.price.style.height=len+"px";
                   this.price.style.backgroundColor="green";
                   //绝对定位
                   this.price.style.position="absolute";
                   document.body.appendChild(this.price);

               }

               this.xFood=Math.floor(Math.random()*40);
               this.yFood=Math.floor(Math.random()*30);
               this.price.style.left=len*this.xFood+"px";
               this.price.style.top=len*this.yFood+"px";

           }
        }
        //③ 绘制蛇身
        function Snake(){
            var len=20;
            //x轴，y轴，颜色，div元素节点对象
            this.snakebody=[[0,1,'green',null],[1,1,'green',null],[2,1,'green',null],[3,1,'red',null]];
            //设置蛇默认是想右移动
            this.fxaing="right";
            //绘制蛇身体
            this.shoubody=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=len+'px';
                        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";

                        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.movebody=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.fxaing=="right"){
                   this.snakebody[this.snakebody.length-1][0]++;//x轴坐标++
                }else if(this.fxaing=="left"){
                    this.snakebody[this.snakebody.length-1][0]--;//x轴坐标--
                }else if(this.fxaing=="top"){
                    this.snakebody[this.snakebody.length-1][1]++;//y轴坐标++
                }else if(this.fxaing=="down"){
                    this.snakebody[this.snakebody.length-1][1]--;//y轴坐标--
                }
                //蛇头碰到食物（蛇头的坐标和食物的坐标相等的时候）
                //蛇的坐标
                var xSnake=this.snakebody[this.snakebody.length-1][0];
                var ySnake=this.snakebody[this.snakebody.length-1][1];
                //食物的坐标
                //要把food的权限设置成全局的
                //xFood,yFood
                if(xSnake==food.xFood && ySnake==food.yFood){
                    //新增一个蛇节
                    var shejie=[this.snakebody[0][0],this.snakebody[0][1],'green',null];
                    this.snakebody.unshift(shejie);
                    food.shouFood();
                }
                if(xSnake>39||xSnake<0||ySnake>29||ySnake<0){
                    alert("你个菜逼，撞墙了！");
                    clearInterval(smt);
                    return false;
                }
                for( var i=0;i<this.shoubody.length-1;i++){
                        if(xSnake=this.snakebody[i][0]||(ySnake=this.snakebody[0][i])){
                            alert("你个菜逼，吃到你自己了");
                            clearInterval(smt);
                            return false;

                        }
                }


                //重新绘制小蛇
                this.shoubody();

            }
        }

        window.onload=function(){
            //绘制界面
            var map=new Map();
            map.showmap();
            //绘制食物
            food=new Food();
            food.shouFood();
             //绘制蛇身
            //var snake=new Snake();
             snake=new Snake();
            snake.shoubody();
            //不间断的移动
           var smt=setInterval("snake.movebody()",100);
            //snake.movebody();

            //添加键盘事件来控制蛇的移动
            document.onkeyup=function(evt){
                console.log(evt.keyCode);
                var num=evt.keyCode;
                switch (num){
                    case 37:
                        snake.fxaing="left";
                        break;
                    case 39:
                        snake.fxaing="right";
                        break;
                    case 38:
                        snake.fxaing="down";
                        break;
                    case 40:
                        snake.fxaing="top";
                        break;

                }

            }
        }
    </script>
    <style type="text/css">
        body{margin: 0}
    </style>
</head>
<body>

</body>
</html>