js 贪吃蛇游戏

来源:互联网 发布:mac升级flash插件 编辑:程序博客网 时间:2024/03/28 17:30

今天突然想到可以改变背景色来实现动态效果

因为之前用的C#.GUI 绘画过贪吃蛇,所以就试做用js做 了一个

类似的东东,(最近也是在学js......)


好了,我们先来看看运行效果吧:


界面大概就这样了,很难看,我知道 ,我审美都畸形的..呵呵呵 ,这不是关键


再看看js代码:


<script src="../JS/jquery-1.2.6.min.js" type="text/javascript"></script>    <script type="text/javascript">         //*         //背景颜色 BackColor         //蛇的颜色 SnakeColor         //食物的颜色 FoodColor        var BackColor = "#CCF";        var SnakeColor="#000";        var FoodColor = "red";        var speed = 100;//移动速度        var Are_X = 40, Are_Y = 40;        var snake = new Array();        var pos_y = 1,pos_x = 7;//Snake的头的位值 x=7,y=1        var snakelength = 5; //Snake的长        var ini_length=5;//蛇的初始长度'        var keynum = 39; //记录当前的方向        var timer = null;        var food_Exit = false;//食物是否吃掉 吃掉为false        var food_pos=null;//记录食物产生的当前位置        $(document).ready(function () {                           CreateGrid();               ini_snake();               Random_Food();            $("body").bind("keypress", function (event) {                if (timer == null) {                    timer = setInterval("Snake()", speed);                }                var key = event.keyCode;                if (key == 0) {                    key = event.which;                }                if (key >= 37 & key <= 40) {                    //控制方向                    if (Math.abs(key - keynum) == 1) {                        keynum = key;                    }                    else {                        if (keynum == 37 & key != 39)                            keynum = key;                        if (keynum == 40 & key != 38) {                            keynum = key;                        }                    }                }            });        });        //用计时器移动snake        function Snake() {            switch (keynum) {                case 37:                    Move_left();                    paintsnake();                    break;                case 38:                    Move_up();                    paintsnake();                    break;                case 39:                    Move_right();                    paintsnake();                    break;                case 40:                    Move_down();                    paintsnake();                    break;            }        }        //初始化一条小蛇        function ini_snake() {            $("#mySnaketable tr td").css("background-color", BackColor);            for (var i = 0; i < snakelength; i++) {                var head = $("#mySnaketable  tr td").get(pos_y * 40 + pos_x - i);                head.style.background = SnakeColor;                snake[i] = pos_y.toString() + "," + (pos_x - i).toString();            }        }        function paintsnake() {            $("#mySnaketable tr td").css("background-color", BackColor);            for (var i = 0; i < snakelength; i++) {                var y = parseInt(snake[i].split(',')[0]);                var x = parseInt(snake[i].split(',')[1]);                if (y >= 40 || x >= 40 || y < 0 || x < 0) {                    alert("Game Over! 您得:" + (snakelength - ini_length).toString()+"分- -!");                    Ini_Data();                    break;                }                var tr = $("#mySnaketable tr");                tr[y + 1].cells[x].style.background = SnakeColor;                //画出食物来                if (food_Exit == true) {                    var y = parseInt(food_pos.split(',')[0]);                    var x = parseInt(food_pos.split(',')[1]);                    var tr = $("#mySnaketable tr");                    tr[y + 1].cells[x].style.background =FoodColor;                                    }            }        }        //初始化数据        function Ini_Data() {            clearInterval(timer);            snake = new Array();            snakelength = 5; //Snake的长            keynum = 39; //记录当前的方向            ini_snake();            Random_Food();            timer = null;        }        //改变蛇节点坐标        function Init_AllDot() {            for (var i = snakelength - 1; i > 0; i--) {                snake[i] = snake[i - 1];            }        }        //向右移动        function Move_right() {            Init_AllDot();            var y = parseInt(snake[0].split(',')[0]);            var x = parseInt(snake[1].split(',')[1]);            snake[0] = y.toString() + "," + (x + 1).toString();            if (snake[0] == food_pos) {                snakelength += 1;                food_Exit = false;                //吃掉食物,产生下一个食物                food_pos = null;                Random_Food();            }        }        //向下移动        function Move_down() {            Init_AllDot();            var y = parseInt(snake[0].split(',')[0]);            var x = parseInt(snake[1].split(',')[1]);            snake[0] = (y + 1).toString() + "," + (x).toString();            if (snake[0] == food_pos) {                snakelength += 1;                food_Exit = false;                //吃掉食物,产生下一个食物                food_pos = null;                Random_Food();            }        }        //向上移动        function Move_up() {            Init_AllDot();            var y = parseInt(snake[0].split(',')[0]);            var x = parseInt(snake[1].split(',')[1]);            snake[0] = (y - 1).toString() + "," + (x).toString();            if (snake[0] == food_pos) {                snakelength += 1;                food_Exit = false;                //吃掉食物,产生下一个食物                food_pos = null;                Random_Food();            }        }        //向左移动        function Move_left() {            Init_AllDot();            var y = parseInt(snake[0].split(',')[0]);            var x = parseInt(snake[1].split(',')[1]);            snake[0] = (y).toString() + "," + (x - 1).toString();            if (snake[0] == food_pos) {                snakelength += 1;                food_Exit = false;                //吃掉食物,产生下一个食物                food_pos = null;                Random_Food();            }           }        //产生随即食物        function Random_Food() {            while (true) {                var rx = Math.floor(Math.random() * (Are_X - 1) + 1);                var ry = Math.floor(Math.random() * (Are_Y - 1) + 1);                var pos = ry.toString() + "," + rx.toString();                if (!isUse(pos)) {                    var tr = $("#mySnaketable tr");                    tr[ry + 1].cells[rx].style.background = FoodColor;                    food_pos = pos;                    food_Exit = true;                    break;                }            }        }        function isUse(pos) {            for (var i = 0; i < snake.length; i++) {                if (snake[i] == pos) {                    return true;                }            }            return false;        }          function CreateGrid() {            $("body").append("<div id='mySnakediv' align='center' style='padding:50px;'></div>");            $("#mySnakediv").append("<table id='mySnaketable' cellpadding='1' cellspacing='1' border='5' style='border-collapse: collapse;border-color: Gray;border-style:ridge;'></table>");           // $("#mySnaketable").addClass("tb");            $("#mySnaketable").append("<tr><th colspan='40' align='center' style='background-color:Blue'>40*40的格子</th></tr>");            for (var i = 0; i < 40; i++) {                $("#mySnaketable").append("<tr id='" + i + "'></tr>");                for (var j = 0; j < 40; j++) {                    $("#" + i.toString()).append("<td style='width: 10px;height: 10px;border-color:Silver;border-style:ridge;'></td>");                }            }        } </script>

自己还写了一点点css,小小的控制一下样式:


HTML代码倒没写什么

js中还是少了一样,就是射自己跟自己相交致死,这个我没弄,有兴趣的朋友要可以去搞搞..



原创粉丝点击