本文为H5EDU机构官方的HTML5培训教程，主要介绍贪食蛇
JavaScript强化教程
1.首先创建div 并且给div加样式
<div id="pannel" style="width: 500px;height: 500px;z-index: 1;opacity: 0.5"></div>
给 <style...> 地图（div和表格）、所有的块（蛇头，食物身体加样式）
2.创建地图
document.write("<table cellspacing='0px'>"); for (var i = 0; i < 10; i++) {... } document.write("</table>");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);//创建食物B4.定时器
function moveNode() {...}; setInterval(moveNode, 500);启动定时器
5.
document.onkeydown = function () {通过event.keyCode改变headNode.value实现用户按键改变蛇头自动移动的方向}6.核心逻辑
在第4中的 function moveNode() {...}; 定时执行此函数实现了：1.移动所有身体 2.移动蛇头 3.创建新块并且 新块在蛇尾产生，方向与蛇尾相同------------------------------------------------------------------------------------------------<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } td { width: 48px; height: 48px; border: solid 1px darkorange; } div { position: absolute; width: 50px; height: 50px; } </style></head><body><div id="pannel" style="width: 500px;height: 500px;z-index: 1;opacity: 0.5"></div><script> 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[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"; }//碰撞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></body></html>
