JavaScript强化教程 - 六步实现贪食蛇

本文为 H5EDU 机构官方的 HTML5培训 教程，主要介绍贪食蛇
JavaScript强化教程
 
1.首先创建div 并且给div加样式

给  地图（div和表格）、所有的块（蛇头，食物身体加样式）

2.创建地图

    document.write("");
    for (var i = 0; i < 10; i++) {... }
    document.write("");

3.调用createNode函数创建块

 var pannel = document.getElementById("pannel");
    function createNode(type) {... } //[i][b]根据type创建块（0头部 1食物 2身体）
[/b][/i]    //申请一些变量以便以后调用
    var allNode = new Array();//存所有吃到的身体
    var fooldNode = null;//指向食物a
    var headNode = null;//指向头部b
    headNode = createNode(0);//创建头部A
    headNode.value = 39;//给头部一个方向  37左 38上 39右 40下
    fooldNode = createNode(1);//创建食物B

4.定时器

function moveNode() {...};

 

setInterval(moveNode, 500);启动定时器

5.

document.onkeydown = function () {通过
event.keyCode改变headNode.value
实现用户按键改变蛇头自动移动的方向}

6.核心逻辑 
在第4中的 function moveNode() {...}; 定时执行此函数
实现了：1.移动所有身体
     2.移动蛇头
     3.创建新块并且 新块在蛇尾产生，方向与蛇尾相同
------------------------------------------------------------------------------------------------

• 实现源码