例中有兩個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>