淘气女友学编程----Ajax课程(1-1)-阿里云开发者社区

前记

    女友最近也吵着要学习软件开发，谁叫着报纸新闻天天说软件开发是未来的最吃香的行业，只要和软件沾上边的个个都是白领。唉，无论我苦口婆心的劝说，还把自己当作例子说我们只是工人，香是没吃着，班要天天加。劝说是没有用的，她是铁了心要做这行，还威胁我说：“你教我，教不好，你这个老师笨，看我怎么收拾你。”
    万般无奈之下，我只能屈服。不过我问她要学什么呢？她头也不抬，说道：“我要知道了还要你干吗？你是老师。”我听完之后快晕过去了，人是有差别的，为什么以前我就不能这么嚣张的对老师。想当初遇到问题，请教别人的时候，是虚心讨教，看别人的脸色，如诺问题能够解决，心中高兴万分，口中感谢不止。
    学什么呢？女友好歹也是计算机专业毕业，应该还有那么点基础。而且现在web开发这么流行，算了教她这个吧。赫赫，要是她什么都学会了，以后我就可以不用上班，做个居家男人天天摇摇扇子也是美事，脑袋中浮现出那个那美丽的幻境，我的嘴角不经意露出诡异的笑容。
    “你坏笑什么？”
    “没什么，正在想你要学习什么呢？”
    “那还笑得那么奸诈，肯定不怀好意，快说你要教我什么？”
    “web开发。”
    “web开发？我要学什么？”
    “web开发你要学的东西太多了，从开发语言上有Java/C#/VB/PHP/JScript等等，从工具上莱说的话，如果你选择了ASP.NET的话,你最少要学习Microsoft Visual Studio，Microsoft SQL Server…”
    “你啰嗦不？你就告诉我先学什么，再学什么，学完之后我能做什么就可以了。”还不等我滔滔不绝完毕，女友已经不耐烦地打断。
   我用最快的时间考虑了一下，什么东西该先教给他，比较容易学懂而且又少有成就感。
   前台，页面，我的脑中浮现的就是这些文字，就是前台的页面开发，比较容易上手而且可以立刻看到成果，对于女生来说，最合适不过了。
    “你就先学前台开发，从Javascript脚本开始学习。”
    “Javascript脚本有什么好学的，我要用的话在网上搜搜就可以找到。这个还用学？”
    我听完之后，不只是生气还是无奈，故意严肃地说道：“Javascript的作用你自己到网上找找，不过我决定了先教你Javascript，后续的教学内容看你的学习能力，如果你太笨的话，就不用往下学了。”
     “噢，那就先学Javascript.”
   “我们采用实例的方法，以代码讲解和分析为主，动手能力排在第一位，关于理论概念部分，你可以作为提高部分再学习。避免到了最后，你说起来一套一套，做起来一愣一愣。学习的例子就先用俄罗斯方块。”
   “不会不太难了，到最后我要是做不出来，就是你这个老师太笨，”还没有等她低估完，我壮起胆子瞪了她一眼，有老师这个帽子还挺管用的，她立马打住，要是放在平常，可能打住的人就是我。看到这样，心中不免美滋滋的。

一．移动的小方块

   俄罗斯方块就是通过键盘来控制各种小方块的旋转和下落，根据小方块的堆积来进行有戏。方块在一行堆满后就可以消掉，方块堆积至窗口顶端有戏就结束了。
    “那么假如我们要做一个俄罗斯方块有戏，我们该从那里入手？”
    “需求”女友没有摆脱学院派的影子。
    “因为大家对这个游戏都很了解，那么需求我们就先绕过去，毕竟我们不是正规军。我们直接从开发着手分析问题。从开发的角度来看，我们需要先解决什么问题？”
    “嗯，开发角度？那包含什么内容？”不按照常理出牌，她立马理不清头绪。
    “如果从开发的角度来说，需要将问题按照技术处理的关键来分，比如说图形该怎么处理，运动该怎么控制，程序中的每个逻辑层该如何划分等等。”
    “那就是说先要将问题细分，将每个处理的关键技术解决了，再根据系统总的要求进行具体开发，那么系统也就做出来了。”看来她还有点小聪明，一点就通。
    “如果是按照这么说的话，俄罗斯放宽涉及到的问题就有：键盘控制，图形呈现，有戏算法这三个部分。”看来来她有点得意了，一口气把知道的全给说出来了。
    “作为游戏开发，这里面时钟也是个需要处理的关键问题，否则方块就不会动了。那么我们今天首先要解决的问题就是关于在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 == " #ff0000 " ) 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中函数参数的访问方式，如固定参数，和动态参数的访问。
   “我听完这些头都有点大了。”等我将代码注意部分简单讲完，她已经开始有点晕头转向。“document对象模式我可以理解，不就是浏览器客户端中提供的各种对象，这个其实和DOM模式应该是描述的一件事情，Javascript根据DOM的模型进行对应的各种处理。”
   “是的，所以如果你在浏览器上使用其他的对象模型，比如表格的话，可以根据浏览器提供的DOM信息，去确认对象的属性和函数是否存在，在具体开发中根据需要去查资料。”
   “if(typeof GetControl=="#ff0000") GetControl=function (id)这部分代码就比较奇怪，我们又看明白？你为什么不写成这个样子,我看代码也能运行。“

function GetControl(id)
{
return document.getElementById(id);
};

   “其实这段代码有两个概念需要说明，1：关于变量的定义，由于在Javascript中对于变量的定义比较灵活，可以使用Var固定作用域，也可以不使用Var，如果没有使用var 的变量，就会被当成全局变量，所以这里GetControl是全局变量。2：关于函数的定义方式的灵活性也在这里面体现出来，说明函数的声明不是只有function GetControl(id)一种形式。”
   “key=KeyDown.arguments[0].keyCode; 为什么不使用KeyDown(e)中的e呢？“
   “对于key=e.keyCode的处理也是可以的，对于Javascript中，对于函数参数的处理和其他高级语言存在比较大的区别，这里需要注意。“
   “通过try catch取得KeyCode的方式我总觉得不好，有没有别的办法?”
   “嗯，通过异常的方式去取值确实是一种不好的开发习惯，在这里可以有多种方式去取的KeyCode，而且不会引起异常。比如说判断浏览器类型，然后根据不同的浏览器去取的不同的方式。还有以下的这种方式也能取得KeyCode。主要是利用判断的方式去调用不同的方法取值。“

var key = window.event ? window.event.keyCode : e.which;

“好了，代码就这些，这个小方块能够移动的原因就在于在Key按下后，触发了我们附加的事件函数，在函数中我们通过key的值来修改Div的style 的位置值,这样就达到了运动的效果。Key事件的触发也为我们开发俄罗斯方块解决了第一个关键问题。“
“还有，这个课还有一个课后作业，就是修改代码，判断如果方块移动到浏览器的边界后，就不能再往外移动，不能让浏览器出现滚动边框。”
“还要有作业，我才不做呢。”

本文转自小余(Yice)博客园博客，原文链接：http://www.cnblogs.com/yice/archive/2008/04/17/983958.html ，如需转载请自行联系原作者

淘气女友学编程----Ajax课程(1-1)

热门文章

最新文章

相关课程

相关电子书