今天心血来潮,想搞个井字棋游戏玩玩。小时候就经常在纸上跟同学画格子玩,现在咱也能自己动手做一个!
第一步,得有个棋盘。
我寻思着,这棋盘不就是个 3x3 的格子嘛直接用 HTML 的表格(<table>
)就能搞定。先画个草图,然后建一个表格,里面套上 3 行(<tr>
),每行里面再放 3 个单元格(<td>
)。
<table>
<tr>
<td></td>
小编温馨提醒:本站只提供游戏介绍,下载游戏推荐89游戏,89游戏提供真人恋爱/绅士游戏/3A单机游戏大全,点我立即前往》》》绅士游戏下载专区
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
给这些格子加点样式,让它们看起来像模像样的。用 CSS 设置一下边框、宽高什么的,一个棋盘就跃然屏上!
开始下棋
棋盘有,接下来就得能下棋!
我琢磨着,这下棋不就是点击格子,然后在格子里显示个叉叉(X)或者圆圈(O)嘛
先给每个单元格(<td>
)加个点击事件。用 Javascript 实现,当点击格子的时候,判断一下当前轮到谁下,然后在格子里显示对应的符号。为区分玩家,我用两个全局变量记录当前下棋的玩家,一个标记为"X",另一个标记为"O"。每次点击,切换一下下棋的玩家。
这部分有点复杂,我弄好几个函数:
handleClick
:处理点击事件。checkWinner
:检查有没有人赢。switchPlayer
:切换玩家。
判断胜负
下棋不能光下,还得知道谁赢!
每次点击之后,都得判断一下有没有人连成一条线。横着三格、竖着三格、斜着三格,这几种情况都得判断一下。
这个判断胜负的函数(checkWinner
)可费我不少劲!我把所有可能赢的情况都列出来,然后逐一检查。还好只有8种赢的可能,不然我得写到猴年马月去!
游戏结束
有人赢,或者棋盘下满,游戏就得结束!
在 checkWinner
函数里,如果判断有人赢,就弹出一个提示框,告诉大家谁赢。要是棋盘满还没人赢,那就是平局,也得弹个框。
我加个“重新开始”的按钮。点击按钮,就把棋盘清空,所有数据重置,又能开始新的一局!
玩几局,感觉还不错!虽然代码写得磕磕巴巴,但好歹是把功能实现。以后有空再优化优化,比如加个 AI 对战什么的,想想就有点小激动!