蛇形的数据结构的设计及相关的操作:
JavaScript 测试脚本:
说明:snake层为蛇出现的地方,以上只是贪吃蛇中“蛇”的基本操作,并未完全实现贪吃蛇的所有功能,所有代码尽请参考。
// 画布的宽度
var x = 20;
// 画布的长度
var y = 20;
// 初始时蛇的长度
var startLength = 10;
// 记录每个蛇的节点信息
var BNode = function() {
this.x = 0;
this.y = 0;
this.directory = 0;// 北 0、南 1、西 2、东 3
}
// 贪吃蛇
var Snake = function() {
// 记录蛇身的信息
this.snakeBody = new Array();
// 改变蛇行走的方向
this.changeDir = function(dir) {
// 修改头节点方向达到调整方向的目的
var node = this.snakeBody[0]
var currDir = node.directory;
// 行走方向必须与当前头节点的行走方向垂直
if(currDir == dir)
return;
else if(currDir == 0 && dir == 1 || currDir == 1 && dir == 0)
return;
else if(currDir == 2 && dir == 3 || currDir == 3 && dir == 2)
return;
node.directory = dir;
}
// 向前移动
this.forword = function() {
// 获取尾节点
var node = this.snakeBody[this.snakeBody.length - 1];
// 将头结点的信息复制个尾节点
node.x = this.snakeBody[0].x;
node.y = this.snakeBody[0].y;
node.directory = this.snakeBody[0].directory;
// 调整列表中的节点位置
this.snakeBody.pop();
this.snakeBody.unshift(node);
switch(node.directory) {
case 0:
node.x = node.x - 1;
break;
case 1:
node.x = node.x + 1;
break;
case 2:
node.y = node.y - 1;
break;
case 3:
node.y = node.y + 1;
break;
}
}
// 判断是否可以移动
this.canMove = function() {
var bNode = this.snakeBody[0];
// 判断是否碰壁
if(bNode.x < 0 || bNode.x > x || bNode.y < 0 || bNode.y > y)
return false;
for(var i = 1; i < this.snakeBody.length; i++)
if(bNode.x == this.snakeBody[i].x && bNode.y == this.snakeBody[i].y)
return false;
// 判断是否碰到自己
return true;
}
// 用来创建初始蛇形
this.create = function() {
// 尚未解决初始就是死蛇的情况
var startX = Math.round(x * Math.random());
var startY = Math.round(y * Math.random());
var startDir = Math.round(3 * Math.random());
for(var i = 0; i < startLength; i++) {
var bNode = new BNode();
switch(startDir){
case 0:
bNode.x = startX - i;
bNode.y = startY;
break;
case 1:
bNode.x = startX + i;
bNode.y = startY;
break;
case 2:
bNode.x = startX;
bNode.y = startY - i;
break;
case 3:
bNode.x = startX;
bNode.y = startY + i;
break;
}
bNode.directory = startDir;
this.snakeBody.unshift(bNode);
}
}
// 获取显示的蛇形html
this.show = function() {
var bNode;
var content = "";
for(var i = 0; i < this.snakeBody.length; i++) {
bNode = this.snakeBody[i];
content += "<div class='bnode' style='top: "+bNode.x*20+"px; left: "+bNode.y*20+"px;'></div></br>";
}
return content;
}
// 构造初始蛇形
this.create();
}
JavaScript 测试脚本:
var snake = new Snake();
var draw ;
window.onload = function() {
draw = document.getElementById("snake");
draw.style.width = x * 20 + "px";
draw.style.height = y * 20 + "px";
draw.innerHTML = snake.show();
}
// 测试运行蛇行走
setInterval("demoMove()",200);
var i = 0;
function demoMove() {
snake.forword();
draw.innerHTML = snake.show();
}
document.onkeydown =function() {
switch(event.keyCode) {
case 38:
snake.changeDir(0);
break;
case 40:
snake.changeDir(1);
break;
case 37:
snake.changeDir(2);
break;
case 39:
snake.changeDir(3);
break;
}
}
<style type="text/css" >
.bnode {
width:20px;
height:20px;
background-color:#0F0;
position:absolute;
}
</style>
<div id="snake" style="background-color:#96C;" ></div>
说明:snake层为蛇出现的地方,以上只是贪吃蛇中“蛇”的基本操作,并未完全实现贪吃蛇的所有功能,所有代码尽请参考。