javascript(23行) 实现贪吃蛇

来源：互联网发布：碑文软件编辑：程序博客网时间：2024/06/06 00:31
例中有两个script标签，第一个就是javascript程序，第二个是第一个复制后的说明
<!doctype html><html><body style="background:black;">    <div id="gameBoard" style="border:2px solid red;width:300px;height:300px;line-height:0px;"></div>    <script type="text/javascript">        for (var i = 0; i < 20; i++) for (var j = 0; j < 20; j++) document.getElementById("gameBoard").innerHTML += '<div class="item" id="' + i + '_' + j + '" style="border:1px solid black;width:13px;height:13px;display:inline-block;line-height:0px;"></div>'        var curDir = 1, foodid = '', moving = setTimeout(move, 200), a = document.onkeydown = function (e) { move((e || event).keyCode - 36) }, snake = [{ x: 10, y: 10 }, { x: 10, y: 11 }, { x: 10, y: 12 }, { x: 10, y: 13 }];        function move(dir) {            if (dir === curDir) return;            if (dir === undefined) dir = curDir;            var newItem = dir === 1 ? { x: snake[0].x, y: snake[0].y - 1 } : dir === 2 ? { x: snake[0].x - 1, y: snake[0].y } : dir === 3 ? { x: snake[0].x, y: snake[0].y + 1 } : dir === 4 ? { x: snake[0].x + 1, y: snake[0].y } : null;            if (newItem === null || (newItem.x == snake[1].x && newItem.y == snake[1].y)) return;            window.clearTimeout(moving);            if (document.getElementById(newItem.x + '_' + newItem.y) === null || document.getElementById(newItem.x + '_' + newItem.y).style.background === 'red') {                alert("over");                return;            }            snake.splice(0, 0, newItem);            if (document.getElementById(newItem.x + '_' + newItem.y).style.background !== 'yellow') snake.splice(snake.length - 1, 1); else foodid = '';            for (var i = 0; i < 20; i++) for (var j = 0; j < 20; j++) if (document.getElementById(i + '_' + j).style.background!=='yellow' ) document.getElementById(i + '_' + j).style.background = "";            snake.forEach(function (item) { document.getElementById(item.x + '_' + item.y).style.background = "red" });            curDir = dir;            moving = setTimeout(arguments.callee, 200)            if (foodid === null) return;            do fooid = (parseInt(Math.random() * 20) + '_' + parseInt(Math.random() * 20)); while (document.getElementById(fooid).style.background === 'red');            document.getElementById(fooid).style.background = 'yellow';            foodid = null;        }    </script>    <script type="text/javascript">        function 说明() {            //构建每一个小格的DIV            for (var i = 0; i < 20; i++) for (var j = 0; j < 20; j++) document.getElementById("gameBoard").innerHTML += '<div class="item" id="' + i + '_' + j + '" style="border:1px solid black;width:13px;height:13px;display:inline-block;line-height:0px;"></div>'            var curDir = 1      //初始化的方向为左                , foodid = ''   //吃的豆豆的DIV，初始化为''当为字符型时会产生一个随机豆豆，同时foodid=null这时不继续产生豆豆                , moving = setTimeout(move, 200)//200毫秒后开始游戏                , a = document.onkeydown = function (e) { move((e || event).keyCode - 36) }//设置左(1),上(2),右(3),下(4)的操作，变量a没用，纯粹为了省一行                , snake = [{ x: 10, y: 10 }, { x: 10, y: 11 }, { x: 10, y: 12 }, { x: 10, y: 13 }];//蛇的初始化            function move(dir) {                if (dir === curDir) return;//当按键与正在运行的方向相同时，则return，防止按了同方向运行速度变快                if (dir === undefined) dir = curDir;//当未定义方向时，正常行进                //确定下一步运行时的格子                var newItem = dir === 1 ? { x: snake[0].x, y: snake[0].y - 1 } : dir === 2 ? { x: snake[0].x - 1, y: snake[0].y } : dir === 3 ? { x: snake[0].x, y: snake[0].y + 1 } : dir === 4 ? { x: snake[0].x + 1, y: snake[0].y } : null;                //当下一步的格子不存在(按键错误)或，为蛇体的第二格，则return                if (newItem === null || (newItem.x == snake[1].x && newItem.y == snake[1].y)) return;                window.clearTimeout(moving);//虽然timeout只运行次，但当按键发生时，未运行，时间需要重记，所以clearTimeout                //如果newItem为空，或 碰到蛇身，则结束游戏                if (document.getElementById(newItem.x + '_' + newItem.y) === null || document.getElementById(newItem.x + '_' + newItem.y).style.background === 'red') {                    alert("over");                    return;                }                //将newItem设为蛇头                snake.splice(0, 0, newItem);                //如果是食物所在的格，则 foodid = ''，产生新的食物，                //如果不是食物所在的格，则将蛇尾移除                if (document.getElementById(newItem.x + '_' + newItem.y).style.background !== 'yellow') snake.splice(snake.length - 1, 1); else foodid = '';                //下面两行重绘画面                for (var i = 0; i < 20; i++) for (var j = 0; j < 20; j++) if (document.getElementById(i + '_' + j).style.background !== 'yellow') document.getElementById(i + '_' + j).style.background = "";                snake.forEach(function (item) { document.getElementById(item.x + '_' + item.y).style.background = "red" });                //修改自动运行方向                curDir = dir;                //200毫秒后运行下一步                moving = setTimeout(arguments.callee, 200)                //以下几行产生新的食物                if (foodid === null) return;                do fooid = (parseInt(Math.random() * 20) + '_' + parseInt(Math.random() * 20)); while (document.getElementById(fooid).style.background === 'red');                document.getElementById(fooid).style.background = 'yellow';                foodid = null;            }        }    </script></body></html>
阅读全文
0 0