五子棋游戏的设计与实现
3.1.3鼠标事件的监听
Onmouseover是mouse进入；onmouseout是mouse移出；onmousedown是mouse按下事件：
obj.onmouseover = function() {事件块}，obj.onmouseOut = function(){事件块}，obj.onmousedown = function() {事件块}；obj是需要添加事件源的对象。
首先，鼠标移动在棋盘上，如果游戏开始并且轮到玩家执棋的时候，当鼠标进入某个棋子位置在鼠标移入事件块中让这个位置闪烁提示玩家可以下子，这是可以点击鼠标触发onMouseDown方法下子。如果不下子，当mouse移出这个棋位时，将fik关闭。
首先，给棋位对象添加鼠标进入触发将自定义的function对象给棋位对象的鼠标进入赋值，在代码体中，首先判读游戏是否开始并且这个位置是否已经存在如果游戏还未开始则提示游戏还未开始调用系统的alert函数，如果这个位置已经存在棋子则不做出任何提示，否则通过当前棋位对象的背景图片设置为当前用户的棋色图片并且调用当前棋位的flicker函数闪烁提示。
然后，给棋位添加鼠标离开事件，首先判断当前棋位是否存在flicker对象，如果存在则调用当前棋位的removeFlicker函数移除闪烁提示，否则不做任何处理
最后，给棋位添加鼠标落下事件，首先判断游戏是否已经开始如果游戏还未开始调用系统内置函数alert提示游戏还未开始，否则判断当前棋位是否已经存在，如果存在不作出任何提示否则创建落子声音通过内置文档对象的元素创建方法创建一个音频元素对象，通过音频元素对象的路径属性将资源文件中的声音文件加载进去，接着将当前棋位对象设置为已存在，并且标记点前棋位的样色属性标志位当前落子用户执棋色，同时判断悔棋队列中是否为空如果不为空则取消悔棋队列中的闪烁方法，并且将悔棋队列一次递推，将当前棋位对象插入到首位。然后调用checkWin函数检测当前落子是否构成胜利队列，如果成功则调用游戏结束函数，否则将下棋权限交给对方，取消自己用户角色提示灯，开启对方角色提示灯
3.2 按钮的功能的实现
在html网页中有好几种按钮，我选择了比较通用的按钮
12
五子棋游戏的设计与实现
3.2.1 开始游戏功能按钮
开始游戏按钮功能是进行本游戏的入口，在启动游戏之后，当点击开始游戏功能之后，方能进行游戏。
要生成开始按钮首先得穿件一个button，通过document.createElement(\为以后方便使用可以将创建的按钮赋值给star，创建一个按钮对象然后在在按钮上添加文字star.innerHTML = \开始
游戏\为了使得按钮在预先设定的地方我们需要给按钮添加一些属性position = \left = \为进一步给开始按钮美化，通过backgroundImage = \加载资源文件夹中的图片给按钮，生成按钮如图3-3：
图3-3
3.2.2 我要悔棋功能按钮
悔棋按钮功能是在游戏过程中出于疏忽不小心下错了棋，通过点击该按钮退回到上一步，也就是相当于回溯，为了游戏的公平起见，悔棋只能退回一步。
要生成悔棋按钮首先得穿件一个button，通过document.createElement(\为以后方便使用可以将创建的按钮赋值给back，创建一个按钮对象然后在在按钮上添加文字back.innerHTML = \我要
悔棋\为了使得按钮在预先设定的地方我们需要给按钮添加一些属性position = \left = \为进一步给开始按钮美化，通过backgroundImage = \加载资源文件夹中的图片给按钮，生成按钮如图3-4：
图3-4
3.2.3 游戏认输功能按钮
认输按钮功能是在游戏过程中觉得已经没有回旋的余地了出于礼貌，我们可以通过点击该按钮直接认输，也就是相当于自己输了。
要生成认输按钮首先得穿件一个button，通过document.createElement(\为以后方便使用可以将创建的按钮赋值给back，创建一个按钮对象然后在在按钮上添加文字defeat.innerHTML = \游戏
认输\为了使得按钮在预先设定的地方我们需要给按钮添加一些属性position = \left = \为进一步给开
13
五子棋游戏的设计与实现
始按钮美化，通过backgroundImage = \加载资源文件夹中的图片给按钮，生成按钮如图3-5：
图3-5
3.2.4 游戏帮助功能按钮
帮助按钮功能是在对游戏还未了解时，我们可以通过点击该按钮打开帮助面板，了解游戏的操作以及关于游戏的内容，是玩家更快入手游戏。
要生成帮助按钮首先得穿件一个button，通过document.createElement(\为以后方便使用可以将创建的按钮赋值给help，创建一个按钮对象然后在在按钮上添加文字help.innerHTML = \游戏
帮助\为了使得按钮在预先设定的地方我们需要给按钮添加一些属性position = \left = \为进一步给开始按钮美化，通过backgroundImage = \加载资源文件夹中的图片给按钮，生成按钮如图3-6：
图3-6
14
五子棋游戏的设计与实现
3.3 棋子的表示
3.3.1 五子棋的棋子属性表示
五子棋中有黑棋子和白棋子两种棋子，将棋子作为对象看待，他们有自己的属性，为了区别棋子颜色和更好的实现，我为棋子中添加颜色属性：obj.color = “white”, obj是棋子对象，color是属性，“white”是颜色的属性值为白色代表这个棋子为白棋并且添加图片obj.backgroundImage=“url()”。
3.3.2 绘制棋子
在绘制棋盘的时候已经给棋盘上的交叉点上绘制了一个透明的棋位，当棋子落入
给位置的时候我只需要让棋子在此位置中显示，通过添加棋子图片，为这个位置的棋子改变他们的属性就可以让棋子活灵活现的出现在这个位置。具体操作如下：
1、 定义整个程序都能使用的变量position通过内置文档对象的创建元素方法创建一个层对象； 2、 通过内置方法with将position对象的样式属性传入； 3、 设置宽度width属性为30像素；
4、 设置定位position方式为绝对的定位方式absolute； 5、 设置居左left为当前位置减去16个像素点； 6、 设置高度height为30个像素点；
7、 设置背景图片backgrounImage为空，以标识当前棋位还未落子””； 8、 设置背景图片backgroundImage为不重复，防止图片重叠出现no-repeat； 9、 设置背景图片backgroundPosition保持在棋位对象的中间center center; 10、定义棋位对象属性行属性标识当前棋位位置； 11、定义棋位对象的属性列标识棋位对象的位置；
12、标识当前棋位对象的属性是否存在属性为不存在false； 13、设置当前棋位对象的样色为空 14、设置其定时器为空
如下图3-7：
图3-7
15
五子棋游戏的设计与实现
3.4 下棋表示
游戏中通过鼠标左键单击便可在棋盘中落子，当游戏还未开始的时候鼠标点击在棋盘中是无效的，为了使游戏的人机友好交互，当游戏还未开始当用户点击棋盘时会提示游戏还未开始！如图3-8
图3-8
当游戏开始的时候，鼠标移动在棋盘之间，会在离鼠标最近的棋位中显示一颗闪烁的棋子提示用户鼠标左键点击会在该位置落子，当鼠标在正确的位置点击时则为落子完成，并且此时添加落子的声音通过document.createElement(\加载资源文件夹中的落子声音，接着通过document.body.appendChild(bgsound);启用声音，当用户结束落子后，电脑“思索”一段时间之后也调用落子功能进行落子，以此轮流轮子进行游戏。
16