贪吃蛇

最新推荐文章于 2024-04-20 15:20:30 发布
weixin_44740410
最新推荐文章于 2024-04-20 15:20:30 发布
阅读量65
点赞数
本文链接：https://blog.csdn.net/weixin_44740410/article/details/89163075
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /**
         * 1.绿色的小方块
         * 属性特征:宽高,背景颜色,位置Xx,y
         * 行为方法:随便换位置
         * 2.小蛇
         * 属性特征:宽高,背景样色(两种)位置(x,y)
         * 行为方法: 自己移动吃食物,长度发生变化
         *
         * 3.地图
         * 特征:宽高,背景颜色
         * 行为:没有,可以不当对象处理
         *
         * 4.游戏结束
         * 特征:食物,小蛇,地图
         * 行为:小蛇吃食物,按键移动小蛇,游戏结束
         *
         */
    </script>
    <style>
        .map{
            width: 800px;
            height: 600px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="map"></div>
<script>
    //1.食物对象
    (function () {
        //定义一个组,用于存小方块
        //var elements=[];
        function Food(width,height,color) {
            this.width=width||20;
            this.height=height||20;
            this.color=color||"green";
            this.x=0;//位置坐标
            this.y=0;
            this.element=document.createElement("div");
        }
        //在原型中添加食物初始化方法,显示食物
        Food.prototype.init=function (map) {
            //remove(map);
            //在页面中创建元素,追加在地图中
            //var dvObj=document.createElement("div");
            var dvObj=this.element;
            map.appendChild(dvObj);
            //设置div的属性
            dvObj.style.width=this.width+"px";
            dvObj.style.height=this.height+"px";
            dvObj.style.background=this.color;
            //脱离文档流--绝对定位
            dvObj.style.position="absolute";
            //坐标是随机的[0,map.offsetWidth/dvObj.width)
            this.x=parseInt(Math.random()*(map.offsetWidth/this.width));
            this.y=parseInt(Math.random()*(map.offsetHeight/this.height));
            dvObj.style.left =this.x * this.width+"px";//距离值
            dvObj.style.top =this.y * this.height+"px";//距离值
            //把div对象追加到elements数组中
            //数组追加元素:push向后追加,unshift向前追加
            // elements.push(dvObj);
        }
        //定义一个私有函数,用于删除食物
        function remove(map){
            for (var i=0;i<elements.length;i++) {
                var ele=elements[i];
                //删除某一个元素:splice(索引,删除的个数,替换的元素...)
                elements.splice(i,1);
                map.removeChild(ele);
            }
        }
        //将Food暴露给window,成为全局变量
        window.Food=Food;
    }());
    //小蛇
    (function () {
        var elements=[];
        function Snake(width,height,direction) {
            //设置小蛇每个部分的宽高,背景颜色
            this.width = width || 20;
            this.height = height || 20;
            this.body = [
                {x: 3, y: 2, color: "red"},
                {x: 2, y: 2, color: "yellow"},
                {x: 1, y: 2, color: "yellow"}
            ];
            //小蛇移动的方向
            this.direction = direction || "right";
        }
            Snake.prototype.init=function (map) {
            remove(map);
                for (var i=0;i<this.body.length;i++) {
                    var obj=this.body[i];
                    var dvObj=document.createElement("div");
                    map.appendChild(dvObj);
                    dvObj.style.width=this.width+"px";
                    dvObj.style.height=this.height+"px";
                    dvObj.style.position="absolute";
                    dvObj.style.left=obj.x*this.width+"px";
                    dvObj.style.top=obj.y*this.height+"px";
                    dvObj.style.background=obj.color;
                    //把div加入到elements中,目的是为了删除小方块
                    elements.push(dvObj);
                }
            }
            Snake.prototype.move=function (food,map) {
                var i=this.body.length-1;
                for (;i>0;i--){
                    this.body[i].x=this.body[i-1].x;
                    this.body[i].y=this.body[i-1].y;
                }
                switch (this.direction) {
                    case "right":
                        this.body[0].x+=1
                        break;
                    case "left":
                        this.body[0].x-=1
                        break;
                    case "bottom":
                        this.body[0].y+=1
                        break;
                    case "top":
                        this.body[0].y-=1
                        break;
                }
                //判断小蛇有没有迟到食物
                //判断条件:小蛇的头部坐标是否与食物坐标一致
                var headX=this.body[0].x;
                var headY=this.body[0].y;
                if (headX==food.x&&headY==food.y) {
                    food.init(map);//重新初始化食物
                    //获取小蛇尾巴
                    var last=this.body[this.body.length-1];
                    this.body.push({
                        x:last.x,
                        y:last.y,
                        color:last.color
                    });
                }
            }

        function remove(map){
            for (var i=elements.length-1;i>=0;i--) {
                var ele=elements[i];
                //在页面中删除元素
                map.removeChild(ele);
                //在数组中删除元素
                elements.splice(i,1);


            }
        }
            window.Snake=Snake;
    }());

    //游戏对象
    (function () {
        var that = null;

        function Game(map) {
            this.food = new Food();
            this.snake = new Snake();
            this.map = map;
            that = this;
        }

        Game.prototype.init = function () {
            console.log(this.map);
            //初始化食物
            this.food.init(this.map);
            //初始化小蛇
            this.snake.init(this.map);
            //小蛇跑起来
            this.runSnake();
            this.bindKey();
        }
            Game.prototype.runSnake=function () {
                var timeId = setInterval(function () {
                    this.snake.move(this.food,this.map);
                    this.snake.init(this.map);

                    var maxX = this.map.offsetWidth / this.snake.width;
                    var maxY = this.map.offsetHeight / this.snake.height;
                    var headX = this.snake.body[0].x;
                    var headY = this.snake.body[0].y;
                    if (headX < 0 || headX >= maxX) {
                        clearInterval(timeId);
                        alert("游戏结束");
                    }
                    if (headY <= 0 || headY >= maxY) {
                        clearInterval(timeId);
                        alert("游戏结束");
                    }
                }.bind(that), 150);
            }

        //添加原型方法.设置用户按键,改变小蛇移动方向
        Game.prototype.bindKey=function(){
            document.οnkeydοwn=function(e){
                switch (e.keyCode) {
                    case 37:
                        this.snake.direction="left";
                        break;
                    case 38:
                        this.snake.direction="top";
                        break;
                    case 39:
                        this.snake.direction="right";
                        break;
                    case 40:
                        this.snake.direction="bottom";
                        break;

                }
            }.bind(that);
        }

      window.Game=Game;
    }());

    var map=document.getElementsByClassName("map")[0];
    var game=new Game(map);
    game.init();

   /* var map=document.getElementsByClassName("map")[0];
    var food=new Food();
    food.init(map);
    var snake=new Snake;
    snake.init(map);
    setInterval(function () {
        snake.move()
        snake.init(map);
    },150);*/
</script>
</body>
</html>
weixin_44740410
关注
0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> /** * 1.绿色的小方块 * 属性特征:宽高,背...
复制链接

扫一扫
贪吃蛇

“相关推荐”对你有帮助么？
