javascript贪食蛇类

参考sunxing007 博客的贪食蛇类，稍做修改，分享一下。
点此演示

function Snake(tbl,rowCount,colCount,speed){
this.tbl = $(tbl);
this.rowCount = rowCount;
this.colCount = colCount;
this.speed = speed;
this.body = [];
this.direction = 0;
this.timer = null;
this.paused = true;
}

<script>
function $(id){return document.getElementById(id);}

function Snake(tbl,rowCount,colCount,speed){
this.tbl = $(tbl);
this.rowCount = rowCount;
this.colCount = colCount;
this.speed = speed;
this.body = [];
this.direction = 0;
this.timer = null;
this.paused = true;
}

Snake.prototype.init = function(){
var colors = ['red','orange','yellow','green','blue','purple','#ccc'];
//this.tbl = $("main");
var x = 0;
var y = 0;
var colorIndex = 0;
//产生初始移动方向
this.direction = Math.floor(Math.random()*4);
//构造table
for(var row=0;row<this.rowCount;row++){
var tr=this.tbl.insertRow(-1);
for(var col=0;col<this.colCount;col++) {
var td=tr.insertCell(-1);
}
}
//产生20个松散节点
for(var i=0; i<10; i++){
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
colorIndex = Math.floor(Math.random()*7);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = colors[colorIndex];
}
}
//产生蛇头
while(true){
x = Math.floor(Math.random()*(this.colCount-2)) +1;
y = Math.floor(Math.random()*(this.rowCount-2)) +1;
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = "black";
this.body.push({x:x,y:y,color:'black'});
break;
}
}
this.paused = true;
//添加键盘事件
inBindEvent = this;
document.onkeydown= function(e){
if (!e)e=window.event;
switch(e.keyCode | e.which | e.charCode){
case 13: {
if(inBindEvent.paused){
inBindEvent.move();
inBindEvent.paused = false;
}
else{
//如果没有暂停，则停止移动
inBindEvent.pause();
inBindEvent.paused = true;
}
break;
}
case 37:{//left
//阻止蛇倒退走
if(inBindEvent.direction==1){
break;
}
inBindEvent.direction = 3;
break;
}
case 38:{//up
//快捷键在这里起作用
if(e.ctrlKey){
inBindEvent.speedUp(-20);
break;
}
if(inBindEvent.direction==2){//阻止蛇倒退走
break;
}
inBindEvent.direction = 0;
break;
}
case 39:{//right
if(inBindEvent.direction==3){//阻止蛇倒退走
break;
}
inBindEvent.direction = 1;
break;
}
case 40:{//down
if(e.ctrlKey){
inBindEvent.speedUp(20);
break;
}
if(inBindEvent.direction==0){//阻止蛇倒退走
break;
}
inBindEvent.direction = 2;
break;
}
}
if(e.returnValue != 'undefined'){
e.returnValue=false;
}else{
e.preventDefault();
}
}
}

Snake.prototype.move = function(){
inInterval = this;
this.timer = setInterval(function(){
inInterval.erase();
inInterval.moveOneStep();
inInterval.paint();
}, inInterval.speed);
}
Snake.prototype.moveOneStep=function(){
if(this.checkNextStep()==-1){
A = clearInterval(this.timer);
alert("Game over!nPress Restart to continue.");
return;
}
if(this.checkNextStep()==1){
var _point = this.getNextPos();
var _x = _point.x;
var _y = _point.y;
var _color = this.getColor(_x,_y);
this.body.unshift({x:_x,y:_y,color:_color});
//因为吃了一个食物，所以再产生一个食物
this.generateDood();
return;
}
//window.status = this.toString();
var point = this.getNextPos();
//保留第一节的颜色
var color = this.body[0].color;
//颜色向前移动
for(var i=0; i<this.body.length-1; i++){
this.body[i].color = this.body[i+1].color;
}
//蛇尾减一节， 蛇尾加一节，呈现蛇前进的效果
this.body.pop();
this.body.unshift({x:point.x,y:point.y,color:color});
//window.status = this.toString();
}
Snake.prototype.pause=function(){
clearInterval(this.timer);
this.paint();
}
Snake.prototype.getNextPos=function(){
var x = this.body[0].x;
var y = this.body[0].y;
var color = this.body[0].color;
//向上
if(this.direction==0){
y--;
}
//向右
else if(this.direction==1){
x++;
}
//向下
else if(this.direction==2){
y++;
}
//向左
else{
x--;
}
//返回一个坐标
return {x:x,y:y};
}
Snake.prototype.checkNextStep= function(){
var point = this.getNextPos();
var x = point.x;
var y = point.y;
if(x<0||x>=this.colCount||y<0||y>=this.rowCount){
return -1;//触边界，游戏结束
}
for(var i=0; i<this.body.length; i++){
if(this.body[i].x==x&&this.body[i].y==y){
return -1;//碰到自己的身体,游戏结束
}
}
if(this.isCellFilled(x,y)){
return 1;//有东西
}
return 0;//空地
}
Snake.prototype.erase=function(){
for(var i=0; i<this.body.length; i++){
this.eraseDot(this.body[i].x, this.body[i].y);
}
}
//绘制蛇身
Snake.prototype.paint=function(){
for(var i=0; i<this.body.length; i++){
this.paintDot(this.body[i].x, this.body[i].y,this.body[i].color);
}
}
//擦除一节
Snake.prototype.eraseDot=function(x,y){
this.tbl.rows[y].cells[x].style.backgroundColor = "";
}
Snake.prototype.paintDot=function(x,y,color){
this.tbl.rows[y].cells[x].style.backgroundColor = color;
}
Snake.prototype.getColor=function(x,y){
return this.tbl.rows[y].cells[x].style.backgroundColor;
}
//用于调试
Snake.prototype.toString=function(){
var str = "";
for(var i=0; i<this.body.length; i++){
str += "x:" + this.body[i].x + " y:" + this.body[i].y + " color:" + this.body[i].color + " - ";
}
return str;
}
//检查一个坐标点有没有被填充
Snake.prototype.isCellFilled=function(x,y){
if(this.tbl.rows[y].cells[x].style.backgroundColor == ""){
return false;
}
return true;
}
//重新开始
Snake.prototype.restart=function(){
if(this.timer){
clearInterval(this.timer);
}
for(var i=0; i<this.rowCount;i++){
this.tbl.deleteRow(0);
}
this.body = [];
this.init();
this.speed = 250;
}
//加速
Snake.prototype.speedUp=function(time){
if(!this.paused){
if(this.speed+time<10||this.speed+time>2000){
return;
}
this.speed +=time;
this.pause();
this.move();
}
}
//产生食物。
Snake.prototype.generateDood=function(){
var colors = ['red','orange','yellow','green','blue','purple','#ccc'];
var x = Math.floor(Math.random()*this.colCount);
var y = Math.floor(Math.random()*this.rowCount);
var colorIndex = Math.floor(Math.random()*7);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = colors[colorIndex];
}
}

function init(id){
snake1 = new Snake(id,30,30,100);
snake1.init();
if (arguments.length>1)
{
snake2 = new Snake(arguments[1],30,30,250);
snake2.init();
}
}
</script>