H5 贪吃蛇源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贪食蛇</title>
    <style type="text/css">
        table {
                border-left: 1px solid #ccc;
                border-top: 1px solid #ccc;
            }
        td {
                border-bottom: 1px solid #ccc;
                border-right: 1px solid #ccc;
                width: 10px;
                height: 13px;
            }
    </style>

    <script src="jquery-1.11.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var size = 20;//格子的行数和列数
        var snake = new Array();//蛇数组
        function createSnake() {
            var x = parseInt(Math.random() * (size - 2));//右边留出来两个格子
            var y = parseInt(Math.random() * size);
            snake[0] = new Array(x, y);//蛇数组的第一个格子
            $("#x" + x + "y" + y).attr("type", "snake");
            $("#x" + x + "y" + y).css("background-color", "#ccc");
            for (var i = 1; i <= 2; i++) {
                x++;
                snake[i] = new Array(x, y);//蛇数组的第二个和第三个格子
                $("#x" + x + "y" + y).attr("type", "snake");
                $("#x" + x + "y" + y).css("background-color", "#ccc");
            }
        }

        var food = new Array();
        function createFood() {
            var x = parseInt(Math.random() * size);
            var y = parseInt(Math.random() * size);
            while ($("#x" + x + "y" + y).attr("type") == "snake") {//食物出现在了蛇身上 则重新随机
                x = parseInt(Math.random() * size);
                y = parseInt(Math.random() * size);
            }
            food = new Array(x, y);
            $("#x" + x + "y" + y).attr("type", "food");
            $("#x" + x + "y" + y).css("background-color", "red");
        }

        var isLive = false;//表示蛇是否活着
        var row = 0;//行的移动
        var column = 0;//列的移动
        function die() {//死了
            isLive = false;
            window.alert("Game Over!!!");
            window.location.reload();
        }
        function move() {
            //蛇的移动方法
            if (!isLive) {
                return;//已经死了
            }
            var x = snake[0][0] + row;//加给行
            var y = snake[0][1] + column;//加给列
            snake.unshift(new Array(x, y));//将x和y的位置作为新的蛇头，插入数组的最前面
            var type = $("#x" + x + "y" + y).attr("type");
            if (type == "snake") {//如果蛇头前方的格子是蛇
                die();//死了
            } else if (type == "food") {//蛇头前方的格子是食物
                $("#x" + x + "y" + y).attr("type", "snake");//该位置变成蛇的头
                $("#x" + x + "y" + y).css("background-color", "#ccc");
                createFood();//重新随机一个食物
            } else if (type == "map") {//蛇头前方的格子是普通的白色格子
                var tmp = snake.pop();//删掉蛇数组的最后一个格子
                $("#x" + tmp[0] + "y" + tmp[1]).attr("type", "map");//将原来蛇尾巴的位置变成普通的白色格子
                $("#x" + tmp[0] + "y" + tmp[1]).css("background-color", "#fff");
                $("#x" + x + "y" + y).attr("type", "snake");//将原来蛇头前方的格子变成新的蛇头
                $("#x" + x + "y" + y).css("background-color", "#ccc");
            } else {//蛇头前方的格子既不是蛇也不是普通的白格子，也不是食物，那肯定是到表格的边框了
                die();//死了
            }
        }

        var direction = '';//增加一个变量表示方向
        var timer = 0;//用于暂停
        $(function () {
            createSnake();//随机出一个三个格子的横躺着的蛇
            createFood();//随机出一个格子的食物

            $(document).keydown(function (e) {//有键按下
                var key = e.keyCode;
                switch (key) {
                    case 32:
                        //空格键（控制暂停和继续）
                        if (timer != 0) {
                            window.clearInterval(timer);
                            timer = 0;
                        } else {
                            if (isLive) {
                                timer = window.setInterval("move()", 200);
                            }
                        }
                        return;
                    case 37://左
                        if (direction == 'right') {
                            return;//往反方向走则没有效果
                        }
                        row = -1;
                        column = 0;
                        direction = 'left'
                        break;
                    case 38://下
                        if (direction == 'up') {
                            return;//往反方向走则没有效果
                        }
                        row = 0;
                        column = -1;
                        direction = 'down'
                        break;
                    case 39://右
                        if (direction == 'left') {
                            return;//往反方向走则没有效果
                        }
                        row = 1;
                        column = 0;
                        direction = 'right'
                        break;
                    case 40://上
                        if (direction == 'down') {
                            return;//往反方向走则没有效果
                        }
                        row = 0;
                        column = 1;
                        direction = 'up'
                        break;
                    default:
                        return;
                }
                if (!isLive) {
                    isLive = true;
                    if (row == 1 && column == 0) {
                        //最开始就往右侧移动，因为蛇头默认是最左边的一个格子，则给蛇头调换到最右侧
                        //否则最开始不能往右移动
                        snake.reverse();
                    }
                    timer = window.setInterval("move()", 200);
                }
            });
        });
    </script>
</head>

<body>
    <script type="text/javascript">
        //生成格子
        document.writeln("<table  cellspacing='0' align='center'>");
        for (var i = 0; i < size; i++) {
            document.writeln("<tr>");
            for (var j = 0; j < size; j++) {
                document.writeln("<td id='x" + j + "y" + i + "' type='map'></td>");
            }
            document.writeln("</tr>");
        }
        document.writeln("</table>");
    </script>
<h2>请按上下左右方向键开始，按空格键暂停和继续</h2>
</body>
</html>