学习js高级第二天

今天学习贪吃蛇
代码(优化后的,但还有bug):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #map {
            width: 600px;
            height: 600px;
            background-color: silver;
            float: left;
            position: relative;
            /*overflow: hidden;*/
        }

        #dv {
            width: 200px;
            height: 600px;
            background: blue;
            float: left;
            position: relative;
            text-align: center;
        }

        #btn {
            position: relative;
            top: 20px;
        }

        .p1 {
            margin-top: 34px;
        }

        li {
            list-style: none;
            margin-left: -38px;
        }

        .color {

            background-color: red;
        }

        .dv {
            width: 100%;
            height: 100px;
            color: gold;
        }

        #box {
            width: 800px;
            height: 600px;
            margin: 10px auto;
            position: relative;
        }
    </style>
</head>
<body>

<div id="box">
    <div id="map"></div>
    <div id="dv">
        <button id="btn">开始游戏</button>
        <p class="p1">游戏难度</p>
        <ul>
            <li class="color">简单</li>
            <li>困难</li>
            <li>极难</li>
            <li>噩梦</li>
            <li>地狱</li>
        </ul>
        <p>分数</p>
        <div class="dv" id="fen">0</div>
    </div>
</div>
<script>
    var num = 500;
    //食物
    ((function () {
        var elements = [];

        //1.构造函数
        function Food(width, height, color, x, y) {
            this.width = width || 20;
            this.height = height || 20;
            this.color = color || "green"
            this.x = x || 0;
            this.y = y || 0;
        }

        //2.初始化
        Food.prototype.init = function () {
            remove();
            var box = document.createElement("div");
            map.appendChild(box);
            box.style.width = this.width + "px";
            box.style.height = this.height + "px";
            box.style.backgroundColor = this.color;
            box.style.position = "absolute";
            this.x = Math.floor(Math.random() * (map.offsetWidth / box.offsetWidth)) * box.offsetWidth;
            this.y = Math.floor(Math.random() * (map.offsetHeight / box.offsetHeight)) * box.offsetHeight;
            box.style.left = this.x + "px";
            box.style.top = this.y + "px";
            elements.push(box)
        }

        //3.封装一个删除食物的函数
        function remove() {
            for (var i = 0; i < elements.length; i++) {
                var ele = elements[i];
                ele.parentElement.removeChild(ele);
                elements.splice(i, 1)
            }
        }

        //把Food暴露给window
        window.Food = Food;

    })());
    //蛇
    ((function () {
        var elemenrs = [];
        var fen = 0;

        //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: "gold"},
                {x: 1, y: 1, color: "gold"}
            ]
        }

        //2.初始化
        Snake.prototype.init = function (map) {
            remove();
            for (var i = 0; i < this.body.length; i++) {
                var box = document.createElement("div")
                map.appendChild(box);
                box.style.width = this.width + "px";
                box.style.height = this.height + "px"
                box.style.position = "absolute"
                box.style.backgroundColor = this.body[i].color;
                box.style.left = this.body[i].x * this.width + "px";
                box.style.top = this.body[i].y * this.height + "px";
                elemenrs.push(box)
            }
        }
        //3.添加一个让蛇移动的方法--->在地图上移动
        Snake.prototype.run = function (map, food) {
            for (var i = this.body.length - 1; 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 "top":
                    this.body[0].y -= 1;
                    break;
                case "bottom":
                    this.body[0].y += 1;
                    break;
            }
            //最后判断小蛇是否吃到食物, 即判断蛇头的坐标
            //获取蛇头的坐标
            var snakeHeadX = this.body[0].x * this.width;
            var snakeHeadY = this.body[0].y * this.height;
            //食物的坐标
            var foodX = food.x;
            var foodY = food.y;
            //判断是否吃到食物
            if (snakeHeadX == foodX && snakeHeadY == foodY) {
                fen++;
                food.init(map)
                var list = this.body[this.body.length - 1]
                this.body.push(
                    {
                        x: list.x,
                        y: list.y,
                        color: list.color
                    }
                )
                document.getElementById("fen").innerHTML=fen;
            }



        }

        //4.删除小蛇的函数
        function remove() {
            for (var i = elemenrs.length - 1; i >= 0; i--) {
                var ele = elemenrs[i];
                ele.parentElement.removeChild(ele)
                elemenrs.splice(i, 1)
            }
        }

        window.Snake = Snake;
    })());
    //游戏对象---> 显示蛇,显示食物,并自动的跑起来
    ((function () {
        //1.游戏的构造函数
        function Game() {
            this.food = new Food();
            this.snake = new Snake();
            this.map = document.getElementById("map")
        }

        //2.初始化游戏对象
        Game.prototype.init = function () {
            this.food.init(this.map);
            this.snake.init(this.map);
            this.runSnake(this.map, this.food);
            this.keyDown();
        }
        //3.添加原型方法--->使蛇自动跑起来
        Game.prototype.runSnake = function (map, food) {
            var timeId = setInterval(function () {
                this.snake.run(map, food);
                this.snake.init(map, food);
                //判断横纵坐标的最大值
                var maxX = map.offsetWidth / this.snake.width;
                var maxY = map.offsetHeight / this.snake.height;
                //获取蛇头的坐标
                var snakeHeadX = this.snake.body[0].x;
                var snakeHeadY = this.snake.body[0].y;

                if (snakeHeadX < 0 || snakeHeadX >= maxX) {
                    clearInterval(timeId)
                    alert("游戏结束")
                }
                if (snakeHeadY < 0 || snakeHeadY >= maxY) {
                    clearInterval(timeId)
                    alert("游戏结束")
                }

                var headX=snakeHeadX*this.snake.width;
                var headY=snakeHeadY*this.snake.height;
                for (var j=1;j<this.snake.body.length-1;j++){
                    var bodyX=this.snake.body[j].x*this.snake.width;
                    var bodyY=this.snake.body[j].y*this.snake.height;
                    if (headX==bodyX&&headY==bodyY){
                        clearInterval(timeId);
                        alert("游戏结束")
                    }
                }

            }.bind(this), num)

            Game.prototype.keyDown = function () {
                document.addEventListener("keydown", function (e) {
                    // console.log(e.keyCode)
                    switch (e.keyCode) {
                        case 37:
                            this.snake.direction = this.snake.direction=="right"?"right":"left";
                            break;
                        case 38:
                            this.snake.direction = this.snake.direction=="bottom"?"bottom":"top";
                            break;
                        case 39:
                            this.snake.direction = this.snake.direction=="left"?"left":"right";
                            break;
                        case 40:
                            this.snake.direction = this.snake.direction=="top"?"top":"bottom";
                            break;
                    }
                }.bind(this))
            }
        }
        window.Game = Game;
    })());

    document.getElementById("btn").onclick = function () {
        var game = new Game();
        game.init();
    }
    var lis = document.getElementsByTagName("li")
    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            for (var j = 0; j < lis.length; j++) {
                lis[j].className = "li";
            }
            this.className = "li color";
            switch (this.innerHTML) {
                case "简单":
                    num = 500;
                    break;
                case "困难":
                    num = 200;
                    break;
                case "极难":
                    num = 100;
                    break;
                case "噩梦":
                    num = 50;
                    break;
                case "地狱":
                    num = 10;
                    break;
            }
        }
    }

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

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

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览