JS实现贪吃蛇游戏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #map {
            width: 800px;
            height: 600px;
            background-color: lightblue;
            position: relative;
            margin: 10px auto;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    /*
    * 分析: 食物是一个对象. 小蛇也是对象. 最后成游戏对象
    * */

    //更整体一点
    //食物对象
    ((function () {
        //1.自定义构造函数
        function Food(width, height, color, x, y) {
            this.width = width || 20;
            this.height = height || 20;
            this.color = color || "pink";
            this.x = x || 0;
            this.y = y || 0;
            this.element = document.createElement("div");
        }

        //2.在原型对象上初始化食物
        Food.prototype.init = function (map) {
            //2-1.设置div的样式. 并且添加进去
            var div = this.element;
            div.style.width = this.width + "px";
            div.style.height = this.height + "px";
            div.style.backgroundColor = this.color;
            div.style.position = "absolute";
            //设置随机坐标  (0-39)*20
            this.x = Math.floor(Math.random() * (map.offsetWidth / this.width)) * this.width;
            this.y = Math.floor(Math.random() * (map.offsetHeight / this.height)) * this.height;
            div.style.left = this.x + "px";
            div.style.top = this.y + "px";
            map.appendChild(div);
        }
        //3.Food暴露给window
        window.Food = Food;
    })());

    //小蛇对象
    ((function () {
        var elements = [];//存放蛇的部位
        //1.小蛇的构造函数
        function Snake(width, height, direction) {
            //小蛇每个部位的宽高
            this.width = width || 20;
            this.height = height || 20;
            //方向
            this.direction = direction || "right";
            //小蛇身体刻度
            this.body = [
                {x: 3, y: 1, color: "red"},//小蛇的头
                {x: 2, y: 1, color: "orange"},//身体
                {x: 1, y: 1, color: "orange"}//身体
            ]
        }

        //2.在原型对象上初始化小蛇
        Snake.prototype.init = function (map) {
            //先删再创建
            remove();
            //2.1遍历的创建div
            for (var i = 0; i < this.body.length; i++) {
                //每一个部位的刻度
                var obj = this.body[i];
                //创建div并且添加样式
                var div = document.createElement("div");
                div.style.width = this.width + "px";
                div.style.height = this.height + "px";
                div.style.position = "absolute";
                div.style.backgroundColor = obj.color;
                //设置坐标
                div.style.left = obj.x * this.width + "px";
                div.style.top = obj.y * this.height + "px";
                map.appendChild(div);
                //把蛇添加到数组里--->目的: 为了删除
                elements.push(div);
            }
        };

        //3.添加方法--移动小蛇
        Snake.prototype.move = function (food,map) {
            //3.1改变小蛇身体的坐标 .因为小蛇的头部去判断方向
            for (var i = this.body.length - 1; i > 0; i--) {
                //当i = 2; 让第三块的x坐标 = 第二块x轴的坐标
                this.body[i].x = this.body[i - 1].x;
                this.body[i].y = this.body[i - 1].y;
            }
            //3.2判断小蛇头部的坐标  分析: 小蛇往上走 y轴 -1
            switch (this.direction) {
                case "right":
                    this.body[0].x++; //this.body[0]指小蛇的头部
                    break;
                case "left":
                    this.body[0].x--;
                    break;
                case "top":
                    this.body[0].y--;
                    break;
                case "bottom":
                    this.body[0].y++;
                    break;
            }

            //3.3最后: 判断小蛇是否吃到食物-->即判断头部坐标和食物的坐标一致
            //头部的坐标
            var headX = this.body[0].x*this.width;
            var headY = this.body[0].y*this.height;
            //食物的坐标
            var foodX = food.x;
            var foodY = food.y;
            if(headX == foodX && headY == foodY){
                //追加一个蛇的身体到body最后
                var last = this.body[this.body.length - 1];//复制小蛇的尾巴
                //添加到数组
                this.body.push({
                    x: last.x,
                    y:last.y,
                    color:last.color
                })
                //食物吃完了要刷新位置
                food.init(map)
            }



        }
        //4.封装删除小蛇的函数
        function remove(){
            //提问:先删头还是先删尾  .尾巴先出来
            for(var i = elements.length -1; i >=0 ;i--){
                //数组里每一个部位
                var ele = elements[i];
                //console.log(ele);

                //在map中删除div
                ele.parentNode.removeChild(ele);
                //删数组的div
                elements.splice(i, 1);
            }
        }
        window.Snake = Snake;

    })());

    //游戏对象
    ((function () {
        //var this;
        //1.游戏的构造函数
        function Game(map) {
            this.food = new Food();//食物对象
            this.snake = new Snake();//小蛇对象
            this.map = map;
            //this = this;
        }
        //2.初始化游戏
        Game.prototype.init = function () {
            this.food.init(this.map);
            this.snake.init(this.map);
            //调用
            this.runSnake(this.map);
            //调用按键方法
            this.bindKey();
        }
        //3.添加方法使小蛇自动跑起来
        Game.prototype.runSnake = function(map){
            var timeId = setInterval(function () {
               // console.log(this);
                this.snake.move(this.food, this.map);
                this.snake.init(map);
                //判断横纵坐标的最大最小值
                var maxX = map.offsetWidth / this.snake.width;
                var maxY = 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);
                    console.log("真菜");
                    //alert("真菜");
                }
                if(headY < 0 || headY >= maxY){
                    //清除定时器
                    clearInterval(timeId);
                    alert("真菜");
                }

            }.bind(this),200)
        }

        //4.设置用户的按键. 来改变小蛇移动的方向
        Game.prototype.bindKey = function(){
            document.addEventListener("keydown", function (e) {
                //console.log(e.keyCode);  //37-40
                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(this))
        }

        window.Game = Game;

    })());
    //最终的目的
    var game = new Game(document.getElementById("map"));
    game.init();
    var food = new Food();
    var map = document.getElementById("map");
    food.init(map);
    var snake = new Snake();
    snake.init(map);//画小蛇
    snake.move();//移动小蛇
    snake.init(map);
    snake.move();
    snake.init(map);
     snake.move();
     snake.init(map);
     snake.move();

    setInterval(function () {
        snake.init(map);
        snake.move();
    }, 200)





</script>
</body>
</html>
发布了13 篇原创文章 · 获赞 0 · 访问量 99
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览