js面向对象贪吃蛇

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            outline: none;

        }

        h3{

          position: absolute;

            left: 95px;

            color: deepskyblue;

        }

        .box {

            width: 250px;

            height: 300px;

            border: solid 2px gold;

            position: fixed;

            top: 100px;

            left: 20px;

        }

        .btn {

            width: 120px;

            height: 30px;

            background-color: transparent;

            border: solid 2px black;

            margin: 20px 65px;

        }

        #map {

            margin: 20px auto;

            width: 800px;

            height: 600px;

            background: url("images/map.jpg") 800px 600px;

            position: relative;

        }

        #btn4 {

            text-align: center;

        }

    </style>

</head>

<body>

<h3>按空格键加速</h3>

<div class="box">

    <input class="btn" id="btn1" type="button" value="开始游戏">

    <input class="btn" id="btn2" type="button" value="暂停游戏">

    <input class="btn" id="btn3" type="button" value="关闭游戏">

    <input class="btn" id="btn4" type="text" value="积分:" disabled>

</div>

<div id="map"></div>

<script>

    //随机生成颜色

    function getColor() {

        var r = Math.round(Math.random() * 255);

        var g = Math.round(Math.random() * 255);

        var b = Math.round(Math.random() * 255);

        var a = Math.random();

        return "rgba(" + r + "," + g + "," + b + "," + a + ")"

    }

    //积分

    var count = 0;

    var btn1 = document.getElementById('btn1');

    var btn2 = document.getElementById('btn2');

    var btn3 = document.getElementById('btn3');

    var btn4 = document.getElementById('btn4');

    //食物对象

    (function () {

        //食物的构造函数

        function Food(width, height, color, x, y) {

            this.width = width || 20;

            this.height = height || 20;

            this.color = color || 'transparent';

            this.x = x || 0;

            this.y = y || 0;

            this.element = document.createElement('div');

        }

        //初始化食物

        Food.prototype.init = function (map) {

            var div = this.element;

            div.style.width = this.width + 'px';

            div.style.height = this.height + 'px';

            div.style.backgroundColor = this.color;

            div.style.backgroundImage = 'url("images/food.png")';

            div.style.backgroundSize = '100%';

            div.style.borderRadius = '50%';

            div.style.position = 'absolute';

            //随机产生食物的横纵坐标

            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);

        }

        window.Food = Food;

    })();

    //小蛇对象

    (function () {

            var snakeList = [];

            //小蛇的构造函数

            function Snake(width, height, direction) {

                this.width = width || 20;

                this.height = height || 20;

                this.body = [

                    {color: 'deepskyblue', x: 3, y: 1, bg: 'url("images/head.jpg")', size: '100%'},

                    {color: 'pink', x: 2, y: 1, bg: 'url("images/body.png")', size: '100%'},

                    {color: 'gold', x: 1, y: 1, bg: 'url("images/body.png")', size: '100%'}

                ];

                this.direction = direction || 'right';

            }

            //初始化小蛇

            Snake.prototype.init = function (map) {

                this.remove();

                for (var i = 0; i < this.body.length; i++) {

                    var div = document.createElement('div');

                    div.style.width = this.width + 'px';

                    div.style.height = this.height + 'px';

                    div.style.position = 'absolute';

                    div.style.backgroundColor = this.body[i].color;

                    div.style.backgroundImage = this.body[i].bg;

                    div.style.backgroundSize = this.body[i].size;

                    div.style.borderRadius = '50%';

                    div.style.left = this.body[i].x * this.width + 'px';

                    div.style.top = this.body[i].y * this.height + 'px';

                    map.appendChild(div);

                    snakeList.push(div);

                }

            }

            //移动小蛇

            Snake.prototype.move = function (food, map) {

                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 'top':

                        this.body[0].y--;

                        break;

                    case 'bottom':

                        this.body[0].y++;

                        break;

                    case 'left':

                        this.body[0].x--;

                        break;

                    case 'right':

                        this.body[0].x++;

                }

                //蛇头坐标

                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) {

                    var lastBox = this.body[this.body.length - 1];

                    this.body.push({

                        x: lastBox.x,

                        y: lastBox.y,

                        color: getColor()

                    })

                    food.init(map);

                    count += 5;

                    btn4.value = '积分:' + count;

                }

            }

            //删除小蛇

            Snake.prototype.remove = function () {

                for (var i = snakeList.length - 1; i >= 0; i--) {

                    snakeList[i].remove();

                    snakeList.splice(i, 1);

                }

            }

            window.Snake = Snake;

        }

    )();

    //游戏对象

    (function () {

        //游戏的构造函数

        function Game(map) {

            this.food = new Food();

            this.snake = new Snake();

            this.map = map || document.getElementById('map');

        }

        //初始化游戏

        Game.prototype.init = function () {

            this.food.init(this.map);

            this.snake.init(this.map);

            this.moveSnake();//移动小蛇

            game.keyDown();//操作按键

        }

        Game.prototype.moveSnake = function () {

            var that = this;

            var timer = setInterval(function () {

                if (btn2.value=='继续游戏'){

                }else {

                    that.snake.move(that.food, that.map);

                    that.snake.init(this.map);

                    //蛇头坐标

                    var headX = that.snake.body[0].x;

                    var headY = that.snake.body[0].y;

                    //横纵坐标最大值

                    var maxX = that.map.offsetWidth / that.snake.width;

                    var maxY = map.offsetHeight / that.snake.height;

                    if (headX < 0 || headX >= maxX) {

                        clearInterval(timer);

                        alert('真菜');

                    }

                    if (headY < 0 || headY >= maxY) {

                        clearInterval(timer);

                        alert('真菜');

                    }

                    // 头部撞到身体游戏结束

                    for (var i = that.snake.body.length - 1; i > 0; i--) {

                        if (headX == that.snake.body[i].x && headY == that.snake.body[i].y) {

                            clearInterval(timer);

                            alert('咬到自己了')

                        }

                    }

                }

            }, 200)

        }

        Game.prototype.keyDown = function () {

            var that = this;

            document.onkeydown = function (e) {

                //上下左右控制方向 禁止蛇掉头

                switch (e.keyCode) {

                    case 37:

                        if (that.snake.direction != 'right') that.snake.direction = 'left';

                        break;

                    case 38:

                        if (that.snake.direction != 'bottom') that.snake.direction = 'top';

                        break;

                    case 39:

                        if (that.snake.direction != 'left') that.snake.direction = 'right';

                        break;

                    case 40:

                        if (that.snake.direction != 'top') that.snake.direction = 'bottom';

                        break;

                }

                //空格键位移

                switch (that.snake.direction) {

                    case 'left':

                        if (e.keyCode == 32) that.snake.body[0].x -= 5;

                        break;

                    case 'right':

                        if (e.keyCode == 32) that.snake.body[0].x += 5;

                        break;

                    case 'top':

                        if (e.keyCode == 32) that.snake.body[0].y -= 5;

                        break;

                    case 'bottom':

                        if (e.keyCode == 32) that.snake.body[0].y += 5;

                        break;

                }

            }

        }

        window.Game = Game;

    })();

    var game = new Game();

    //开始游戏

    btn1.onclick = function () {

        game.init();

    }

    //暂停/继续游戏

    btn2.onclick = function () {

        if (this.value == '暂停游戏') {

            this.value = '继续游戏';

        } else {

            this.value ='暂停游戏'

        }

    }

    //关闭游戏

    btn3.onclick = function () {

        window.close();

    }

</script>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容