JavaScript強化チュートリアル-6ステップでヘビを食いしばる

ここではH 5 EDU
機構公式HTML 5トレーニング
教程、主に蛇を食いしん坊することを紹介します
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.新しいブロックを作成し、新しいブロックはヘビの尾で生成され、方向はヘビの尾と同じです.
------------------------------------------------------------------------------------------------

ソースコード

を実現 document.write("<table cellspacing='0px'>"); for (var i = 0; i < 10; i++) { document.write("<tr>"); for (var j = 0; j < 10; j++) { document.write("<td></td>"); } document.write("</tr>"); } document.write("</table>"); // var pannel = document.getElementById("pannel"); function createNode(type) { var div = document.createElement("div"); pannel.appendChild(div); div.style.left = parseInt(Math.random() * 10) * 50 + "px"; div.style.top = parseInt(Math.random() * 10) * 50 + "px"; switch (type) { case 0: div.style.background = "red";// break; case 1: div.style.background = "blue";// break; case 2: div.style.background = "yellow";// break; } return div; } var allNode = new Array(); var fooldNode = null; var headNode = null; headNode = createNode(0); headNode.value = 39; fooldNode = createNode(1); function moveNode() { // if (allNode.length > 0) { for (var n = allNode.length - 1; n >= 0; n--) { switch (parseInt(allNode<span>[</span>n].value)) { case 37: allNode<span>[</span>n].style.left = parseInt(allNode<span>[</span>n].style.left) - 50 + "px"; break; case 38: allNode<span>[</span>n].style.top = parseInt(allNode<span>[</span>n].style.top) - 50 + "px"; break; case 39: allNode<span>[</span>n].style.left = parseInt(allNode<span>[</span>n].style.left) + 50 + "px"; break; case 40: allNode<span>[</span>n].style.top = parseInt(allNode<span>[</span>n].style.top) + 50 + "px"; break; } if(n>0){ allNode<span>[</span>n].value = allNode<span>[</span>n-1].value; }else { allNode<span>[</span>n].value = headNode.value; } } } var px = parseInt(headNode.style.left); var py = parseInt(headNode.style.top); switch (headNode.value) { case 37: headNode.style.left = px - 50 + "px"; break; case 38: headNode.style.top = py - 50 + "px"; break; case 39: headNode.style.left = px + 50 + "px"; break; case 40: headNode.style.top = py + 50 + "px"; break; } // if (headNode.style.left == fooldNode.style.left && headNode.style.top == fooldNode.style.top) { var newbody = createNode(2); var lastbody = null; if (allNode.length == 0) { lastbody = headNode; } else { lastbody = allNode<span>[</span>allNode.length - 1]; } newbody.value = lastbody.value; // lastbody.style.left = parseInt(lastbody.style.left)-50+"px"; switch (parseInt(lastbody.value)) { case 37: newbody.style.left = parseInt(lastbody.style.left) + 50 + "px"; newbody.style.top = lastbody.style.top; break; case 38: newbody.style.top = parseInt(lastbody.style.top) + 50 + "px"; newbody.style.left = lastbody.style.left; break; case 39: newbody.style.left = parseInt(lastbody.style.left) - 50 + "px"; newbody.style.top = lastbody.style.top; break; case 40: newbody.style.top = parseInt(lastbody.style.top) - 50 + "px"; newbody.style.left = lastbody.style.left; break; } allNode.push(newbody); fooldNode.style.left = parseInt(Math.random() * 10) * 50 + "px"; fooldNode.style.top = parseInt(Math.random() * 10) * 50 + "px"; }// end } setInterval(moveNode, 500); document.onkeydown = function () { switch (event.keyCode) { case 37: headNode.value = 37; break; case 38: headNode.value = 38; break; case 39: headNode.value = 39; break; case 40: headNode.value = 40; break; } }