html贪吃蛇怎么加蛇尾,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.创建新块并且 新块在蛇尾产生，方向与蛇尾相同

------------------------------------------------------------------------------------------------

实现源码

Title

* {

padding: 0;

margin: 0;

}

td {

width: 48px;

height: 48px;

border: solid 1px darkorange;

}

div {

position: absolute;

width: 50px;

height: 50px;

}

document.write("

for (var i = 0; i < 10; i++) {

document.write("

");

for (var j = 0; j < 10; j++) {

document.write("

");

}

document.write("

");

}

document.write("

");

//创建头部

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;

}

}