例中有两个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> 
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
