JS-贪吃蛇小游戏

来源：互联网发布：电力设备行业数据编辑：程序博客网时间：2024/04/20 08:32
没错啦！这就是大家小时候经常玩的贪吃蛇游戏。代码如下：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>JS贪吃蛇-练习</title>    <style type="text/css">        #pannel table {            border-collapse: collapse;        }        #pannel table td {            border: 1px solid #808080;            width: 10px;            height: 10px;            font-size: 0;            line-height: 0;            overflow: hidden;        }        #pannel table .snake {            background-color: green;        }        #pannel table .food {            background-color: blue;        }    </style>    <script type="text/javascript">        var Direction = new function () {            this.UP = 38;            this.RIGHT = 39;            this.DOWN = 40;            this.LEFT = 37;        };        var Common = new function () {            this.width = 20; /*水平方向方格数*/            this.height = 20; /*垂直方向方格数*/            this.speed = 250; /*速度 值越小越快*/            this.workThread = null;        };        var Main = new function () {            var control = new Control();            window.onload = function () {                control.Init("pannel");                /*开始按钮*/                document.getElementById("btnStart").onclick = function () {                    control.Start();                    this.disabled = true;                    document.getElementById("selSpeed").disabled = true;                    document.getElementById("selSize").disabled = true;                };                /*调速度按钮*/                document.getElementById("selSpeed").onchange = function () {                    Common.speed = this.value;                }                /*调大小按钮*/                document.getElementById("selSize").onchange = function () {                    Common.width = this.value;                    Common.height = this.value;                    control.Init("pannel");                }            };        };        /*控制器*/        function Control() {            this.snake = new Snake();            this.food = new Food();            /*初始化函数，创建表格*/            this.Init = function (pid) {                var html = [];                html.push("<table>");                for (var y = 0; y < Common.height; y++) {                    html.push("<tr>");                    for (var x = 0; x < Common.width; x++) {                        html.push('<td id="box_' + x + "_" + y + '"> </td>');                    }                    html.push("</tr>");                }                html.push("</table>");                this.pannel = document.getElementById(pid);                this.pannel.innerHTML = html.join("");            };            /*开始游戏 - 监听键盘、创建食物、刷新界面线程*/            this.Start = function () {                var me = this;                this.MoveSnake = function (ev) {                    var evt = window.event || ev;                    me.snake.SetDir(evt.keyCode);                };                try {                    document.attachEvent("onkeydown", this.MoveSnake);                } catch (e) {                    document.addEventListener("keydown", this.MoveSnake, false);                }                this.food.Create();                Common.workThread = setInterval(function () {                    me.snake.Eat(me.food); me.snake.Move();                }, Common.speed);            };        }        /*蛇*/        function Snake() {            this.isDone = false;            this.dir = Direction.RIGHT;            this.pos = new Array(new Position());            /*移动 - 擦除尾部，向前移动，判断游戏结束(咬到自己或者移出边界)*/            this.Move = function () {                document.getElementById("box_" + this.pos[0].X + "_" + this.pos[0].Y).className = "";//所有 向前移动一步                 for (var i = 0; i < this.pos.length - 1; i++) {                    this.pos[i].X = this.pos[i + 1].X;                    this.pos[i].Y = this.pos[i + 1].Y;                }//重新设置头的位置                 var head = this.pos[this.pos.length - 1];                switch (this.dir) {                    case Direction.UP:                        head.Y--;                        break;                    case Direction.RIGHT:                        head.X++;                        break;                    case Direction.DOWN:                        head.Y++;                        break;                    case Direction.LEFT:                        head.X--;                        break;                }                this.pos[this.pos.length - 1] = head;//遍历画蛇，同时判断游戏结束                 for (var i = 0; i < this.pos.length; i++) {                    var isExits = false;                    for (var j = i + 1; j < this.pos.length; j++)                        if (this.pos[j].X == this.pos[i].X && this.pos[j].Y == this.pos[i].Y) {                            isExits = true;                            break;                        }                    if (isExits) { this.Over();/*咬自己*/ break; }                    var obj = document.getElementById("box_" + this.pos[i].X + "_" + this.pos[i].Y);                    if (obj) obj.className = "snake"; else { this.Over();/*移出边界*/ break; }                }                this.isDone = true;            };            /*游戏结束*/            this.Over = function () {                clearInterval(Common.workThread);                alert("游戏结束！");            }            /*吃食物*/            this.Eat = function (food) {                var head = this.pos[this.pos.length - 1];                var isEat = false;                switch (this.dir) {                    case Direction.UP:                        if (head.X == food.pos.X && head.Y == food.pos.Y + 1) isEat = true;                        break;                    case Direction.RIGHT:                        if (head.Y == food.pos.Y && head.X == food.pos.X - 1) isEat = true;                        break;                    case Direction.DOWN:                        if (head.X == food.pos.X && head.Y == food.pos.Y - 1) isEat = true;                        break;                    case Direction.LEFT:                        if (head.Y == food.pos.Y && head.X == food.pos.X + 1) isEat = true;                        break;                }                if (isEat) {                    this.pos[this.pos.length] = new Position(food.pos.X, food.pos.Y);                    food.Create(this.pos);                }            };            /*控制移动方向*/            this.SetDir = function (dir) {                switch (dir) {                    case Direction.UP:                        if (this.isDone && this.dir != Direction.DOWN) { this.dir = dir; this.isDone = false; }                        break;                    case Direction.RIGHT:                        if (this.isDone && this.dir != Direction.LEFT) { this.dir = dir; this.isDone = false; }                        break;                    case Direction.DOWN:                        if (this.isDone && this.dir != Direction.UP) { this.dir = dir; this.isDone = false; }                        break;                    case Direction.LEFT:                        if (this.isDone && this.dir != Direction.RIGHT) { this.dir = dir; this.isDone = false; }                        break;                }            };        }        /*食物*/        function Food() {            this.pos = new Position();            /*创建食物 - 随机位置创建立*/            this.Create = function (pos) {                document.getElementById("box_" + this.pos.X + "_" + this.pos.Y).className = "";                var x = 0, y = 0, isCover = false;                /*排除蛇的位置*/                do {                    x = parseInt(Math.random() * (Common.width - 1));                    y = parseInt(Math.random() * (Common.height - 1));                    isCover = false;                    if (pos instanceof Array) {                        for (var i = 0; i < pos.length; i++) {                            if (x == pos[i].X && y == pos[i].Y) {                                isCover = true;                                break;                            }                        }                    }                } while (isCover);                this.pos = new Position(x, y);                document.getElementById("box_" + x + "_" + y).className = "food";            };        }        function Position(x, y) {            this.X = 0;            this.Y = 0;            if (arguments.length >= 1) this.X = x;            if (arguments.length >= 2) this.Y = y;        }    </script></head><body><div id="pannel" style="margin-bottom: 10px;"></div><select id="selSize">    <option value="20">20*20</option>    <option value="30">30*30</option>    <option value="40">40*40</option></select><select id="selSpeed">    <option value="500">速度-慢</option>    <option value="250" selected="selected">速度-中</option>    <option value="100">速度-快</option></select><input type="button" id="btnStart" value="开始" /></body></html>
1 0