javascript制作可以控制移动的小方块

[ 来源:http://www.it55.com | 作者: | 时间:2007-12-06 | 收藏 | 推荐 ] 【大中小】

  一．移动的小方块

   俄罗斯方块就是通过键盘来控制各种小方块的旋转和下落，根据小方块的堆积来进行有戏。方块在一行堆满后就可以消掉，方块堆积至窗口顶端有戏就结束了。
   “那么假如我们要做一个俄罗斯方块有戏，我们该从那里入手？”
   “需求”女友没有摆脱学院派的影子。
   “因为大家对这个游戏都很了解，那么需求我们就先绕过去，毕竟我们不是正规军。我们直接从开发着手分析问题。从开发的角度来看，我们需要先解决什么问题？”
   “嗯，开发角度？那包含什么内容？”不按照常理出牌，她立马理不清头绪。
   “如果从开发的角度来说，需要将问题按照技术处理的关键来分，比如说图形该怎么处理，运动该怎么控制，程序中的每个逻辑层该如何划分等等。”
   “那就是说先要将问题细分，将每个处理的关键技术解决了，再根据系统总的要求进行具体开发，那么系统也就做出来了。”看来她还有点小聪明，一点就通。
   “如果是按照这么说的话，俄罗斯放宽涉及到的问题就有：键盘控制，图形呈现，有戏算法这三个部分。”看来来她有点得意了，一口气把知道的全给说出来了。
   “作为游戏开发，这里面时钟也是个需要处理的关键问题，否则方块就不会动了。那么我们今天首先要解决的问题就是关于在web上响应键盘，做一个可以根据键盘上下左右翼懂得小方块。首先我们先看看代码。”
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  </head>
  <body>
  <div id="dSquare" style="background:#0000FF;POSITION: absolute; width:20px; height:20px; top:50px; left:200px;"></div>
  </body>
  </html>
  <script language=javascript>
  if(typeof GetControl=="undefined") GetControl=function (id)
  {
   return document.getElementById(id);
  };

  var control=GetControl("dSquare");
  function KeyDown(e) {
   var key;
   try{
   key=event.keyCode; //取得键盘Code编号
   }
   catch(a){ //对于Firefox来说，不支持event.keyCode
   key=KeyDown.arguments[0].keyCode;
   }

   switch(key)
   {
   case 40://40 == down
   control.style.top=(parseInt(control.style.top)+1)+ "px";
   break;
   case 39://39 == right
   control.style.left=(parseInt(control.style.left)+1)+ "px";
   break;
   case 38://38 == up
   control.style.top=(parseInt(control.style.top)-1)+ "px";
   break;
   case 37://37 == left
   control.style.left=(parseInt(control.style.left)-1)+ "px";
   break;
   }
  }
  document.onkeydown=KeyDown; //附加事件
  document.onkeypress=KeyDown; //附加事件
  </script>
  在这个代码中，我们需要关注代码中的5点：
   1：document；
   2：id="dSquare"；
   3：getElementById
   4：document.onkeydown=KeyDown;
   5：event.keyCode，
   1．document 是浏览器提供的客户端对象模型，而且document对象是一个顶层对象，不需要预先实例化就可直接使用。所以这个对象和Div存在区别，浏览器所提供的客户端模型中也存在Div模型，但是这个模型需要根据指定的ID来进行访问。在Javascript中，可以对浏览器提供的各种对象模型进行操作，可以修改对象模型的属性，和调用对象模型的函数和给对象模型附加事件。但是使用过程中需要注意的问题是：由于不同浏览器提供的对象模型并不完全一致，而是彼此存在差异，所以提供的属性或函数中就存在不同，这些不同也就造成了Javascript多浏览器的问题。
   2．id="dSquare"，这里我们实际上关注的是DOM对象问题，再HTML中所有的元素都存在对应的DOM模型，如果我们需要访问这些模型，通过ID是比较快捷的一种方法，而且这个ID尽量避免一样，就下我们每个人使用的身份证一样。
   3．getElementById，是内置对象提供的一个方法，用于访问指定ID的对象，如果对象不存在的话，就会返回一个null值。
   4．document.onkeydown=KeyDown;这是比较典型的Javascript时间附加的方式，对于Javascript中，对于事件附加的处理之需要定义之需要函数明就可以了，具体函数的操作可以参考Javascript中各种函数的定义，如对象内函数，一般函数等。
   5．event.keyCode ,这部分代码主要是针对多浏览器处理的，可以看到代码中存在有一个try catch的处理，这个是由于firefox中没有提供event.keyCode，所以需要通过KeyDown.arguments[0].keyCode的方式来访问参数，这里面需要注意的是在Javascript中函数参数的访问方式，如固定参数，和动态参数的访问。