JavaScript reinforcement tutorial-six steps

This article mainly introduces the six-step JavaScript reinforcement tutorial JavaScript reinforcement tutorial-six steps

1. First create p and add a style to p

To Map (p and table), all blocks (Snake Head, food body plus style)

2. Create a map

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

3. Call the createNode function to create a block

Var pannel = document. getElementById ("pannel"); function createNode (type ){...} // create a block based on type (0 header 1 food 2 body) // apply for some variables so that var allNode = new Array () can be called later (); // store all the healthy bodies var fooldNode = null; // point to food a var headNode = null; // point to header B headNode = createNode (0 ); // create A headNode in the header. value = 39; // give the header A direction 37 to the left 38 to the top 39 to the right 40 fooldNode = createNode (1); // create food B

4. Timer

function moveNode() {...};

SetInterval (moveNode, 500); start the timer

5.

Document. onkeydown = function () {use event. keyCode to change headNode. value to enable the user to press the key to change the direction of automatic snake head movement}

6. core logic
Function moveNode () {...} in 4th; regularly executes this function
Implemented: 1. Move all bodies
2. Move the Snake Head
3. Create a new block and the new block is generated at the end of the Snake. The direction is the same as that at the end of the snake.
Bytes ------------------------------------------------------------------------------------------------
Source code

       
      Title        
Script document. write ("
 
 
  
  
"); For (var I = 0; I <10; I ++) {document. write ("
  
  
     "); For (var j = 0; j <10; j ++) {document. write (" 
    ");} Document. write (" 
   ");} Document. write (" 
  "); // Create the header var pannel = document. getElementById ("pannel"); function createNode (type) {var p = document. createElement ("p"); pannel. appendChild (p); p. style. left = parseInt (Math. random () * 10) * 50 + "px"; p. style. top = parseInt (Math. random () * 10) * 50 + "px"; switch (type) {case 0: p. style. background = "red"; // header break; case 1: p. style. background = "blue"; // Food break; case 2: p. style. background = "yellow"; // body break;} return p;} var allNode = new Array (); var fooldNode = null; var headNode = null; headNode = createNode (0); headNode. value = 39; fooldNode = createNode (1); function moveNode () {// move all bodies if (allNode. length> 0) {for (var n = allNode. length-1; n> = 0; n --) {switch (parseInt (allNode [n]. value) {case 37: allNode [n]. style. left = parseInt (allNode [n]. style. left)-50 + "px"; break; case 38: allNode [n]. style. top = parseInt (allNode [n]. style. top)-50 + "px"; break; case 39: allNode [n]. style. left = parseInt (allNode [n]. style. left) + 50 + "px"; break; case 40: allNode [n]. style. top = parseInt (allNode [n]. style. top) + 50 + "px"; break;} if (n> 0) {allNode [n]. value = allNode [n-1]. value;} else {allNode [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 [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";} // collision 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;} script     

The above is the content of the six-step JavaScript reinforcement tutorial. For more information, see PHP Chinese website (www.php1.cn )!