北极熊的窝

————————————我的百度HI:烂柿饼

用户操作

[即时聊天] [发私信] [加为好友]

北极熊ID：anhulife

共1197次访问，排名2万外，好友1人，关注者2人。
对新技术有一种莫名的“冲动”。正在学习中，希望能在未来的web应用领域有所发展。更希望能够推进技术改革嘿嘿

anhulife的文章

原创 11 篇

翻译 0 篇

转载 0 篇

评论 5 篇

最近评论

ninjajie：很强大
你观察形状变形的条件很透彻！
也就是矩阵中-1的设定。
想问一下：shapeClass.prototype.move=_move;
中prototype是什么属性？

ninjajie：不错啊
真厉害！！

fejay：不错。收藏了

PrideRock：不错啊

biao：强！涡阳人就是强！

文章分类

收藏

相册

基于Flex Webservice 的天气预报

杂物

存档

软件项目交易

订阅我的博客

贪吃蛇的javascript实现收藏

新一篇: Javascript版俄罗斯方块(含Bug) | 旧一篇: 分享软件实习成果

最近在学Javascript，花了半个月的时间终于把《Javascript权威指南》(推荐此书，入门级) 扫完。

在学习的过程中发现使用JS实现动态效果挺有趣的。

在习作的过程中尝试着贪吃蛇游戏用JS实现了。竟然成功了。

思路：使用10px*10px的div层担当“像素”，然后使用40*40矩阵160个“像素”构成了游戏的界面。

下面是代码：

// JavaScript Document 
alert("键盘的方向键控制方向，空格键暂停。\nLIFE制作\nhttp://blog.csdn.net/anhulife");
// 添加基本的图形块，即160个10 * 10的层组成的二维矩阵 
var rowindex = new Array(40);
var colindex;
var cell;
// 图像单元的定义 
var backcolor = "black";
for(var i = 0; i < 40; i ++ )
{
   colindex = new Array(40);
   for(var j = 0; j < 40; j ++ )
   {
      // 设置每个单元的属性 
      cell = document.createElement("div");
      cell.style.backgroundColor = backcolor;
      cell.style.width = "10px";
      cell.style.height = "10px";
      cell.style.position = "absolute";
      cell.style.left = "" + (j * 10 + 100) + "px";
      cell.style.top = "" + (i * 10 + 100) + "px";
      cell.style.overflow = "hidden";
      // 添加单元 
      document.body.appendChild(cell);
      // 填充列组 
      colindex[j] = cell;
   }
   // 填充行组 
   rowindex[i] = colindex;
}
// 贪吃蛇类的定义，基于基本的图像单元 
function snake()
{
   // 定义蛇的身体，并初始化 
   this.bodycolor = "white";
   this.bodys = new Array();
   for(var i = 20; i < 25; i ++ )
   {
      rowindex[20][i].style.backgroundColor = this.bodycolor;
      // rowindex的第一个坐标是行标，第二是列标 
      this.bodys.push(rowindex[20][i]);
   }
   // 定义蛇的头部坐标，第一个是行标, 第二个是列标 
   this.head = [20, 20];
   // 定义蛇的前进方向，0代表左、1代表下、2代表右、3代表上 
   this.direct = 0;
}
// 移动模块 
function move()
{
   // 根据前进方向计算头部的坐标 
   switch(this.direct)
   {
      case 0 :
         this.head[1] -= 1;
         break;
      case 1 :
         this.head[0] += 1;
         break;
      case 2 :
         this.head[1] += 1;
         break;
      case 3 :
         this.head[0] -= 1;
         break;
   }
   // 判断是否越界 
   if(this.head[0] < 0 || this.head[0] > 39 || this.head[1] < 0 || this.head[1] > 39)
   {
      // 如果越界则返回false 
      return false;
   }
   else
   // 如果没有越界则检查下一个元素的性质，如果是食物则吃掉，并再生成食物。如果是其自身则返回false 
   if(this.head[0] == food[0] && this.head[1] == food[1])
   {
      // 如果是食物 
      rowindex[this.head[0]][this.head[1]].style.backgroundColor = this.bodycolor;
      this.bodys.unshift(rowindex[this.head[0]][this.head[1]]);
      score++;
      makefood();
      return true;
   }
   else
   // 如果是它自身 
   if(rowindex[this.head[0]][this.head[1]].style.backgroundColor == this.bodycolor)
   {
      if(rowindex[this.head[0]][this.head[1]] == this.bodys.pop())// 如果是它的尾部 
      {
         this.bodys.unshift(rowindex[this.head[0]][this.head[1]]);
         return true;
      }
      // 如果不是尾部 
      return false;
   }
   // 以上情况都不是 
   this.bodys.pop().style.backgroundColor = backcolor;
   rowindex[this.head[0]][this.head[1]].style.backgroundColor = this.bodycolor;
   this.bodys.unshift(rowindex[this.head[0]][this.head[1]]);
   return true;
}
snake.prototype.move = move;
// 生成食物模块 
var foodcolor = "blue";
var food = [20, 17];
rowindex[food[0]][food[1]].style.backgroundColor = foodcolor;
function makefood()
{
   var tempfood;
   var tempelement;
   out :
   while(true)
   {
      tempfood = [Math.round(Math.random() * 39), Math.round(Math.random() * 39)];
      tempelement = rowindex[tempfood[0]][tempfood[1]];
      for(var i in s.bodys)
      {
         if(s.bodys[i] == tempelement)
         {
            // 如果随机生成的食物在蛇的身体上，则跳出继续 
            continue out;
         }
         // 生成食物成功 
         break out;
         
      }
   }
   food = tempfood;
   rowindex[food[0]][food[1]].style.backgroundColor = foodcolor;
}
// 转向模块和暂停模块 
document.onkeydown = turnorstop;
function turnorstop(event)
{
   if(window.event != undefined)
   {
      if(parseInt(window.event.keyCode)==32)
      {
      alert("休息一下");
      }
      else
      {
         switch(parseInt(window.event.keyCode))
         {
            case 37 :
            if(s.direct!=2)
            s.direct = 0;
            break;
            case 38 :
            if(s.direct!=1)
            s.direct = 3;
            break;
            case 39 :
            if(s.direct!=0)
            s.direct = 2;
            break;
            case 40 :
            if(s.direct!=3)
            s.direct = 1;
            break;
         }
      }
   }
   else
   {
      if(parseInt(event.which)==32)
      {
      alert("休息一下");
      }
      else
      {
         switch(parseInt(event.which))
         {
            case 37 :
            if(s.direct!=2)
            s.direct = 0;
            break;
            case 38 :
            if(s.direct!=1)
            s.direct = 3;
            break;
            case 39 :
            if(s.direct!=0)
            s.direct = 2;
            break;
            case 40 :
            if(s.direct!=3)
            s.direct = 1;
            break;
         }
      }
   }
}
// 启动游戏模块 
var s = new snake();
var time = 60;//蛇的速度指数 
function startmove()
{
   if(s.move())
   {
      setTimeout(startmove, time);
   }
   else
   {
      alert("GAME OVER\n您的分数是:"+score+"分");
   }
}
//分数设置 
var score = -1;
//运行游戏 
startmove();

在网页中连接该JS文件即可。

发表于 @ 2008年09月26日 16:54:00|评论(loading...)|收藏

新一篇: Javascript版俄罗斯方块(含Bug) | 旧一篇: 分享软件实习成果

#fejay 发表于2008-09-27 14:01:15 IP: 58.48.137.*: 不错。收藏了

#ninjajie 发表于2008-10-16 22:56:34 IP: 218.69.185.*: 不错啊
真厉害！！

发表评论

姓名：
主页：
校验码：看不清,换一张