HTML5 游戏开发实战 ｜ 黑白棋

黑白棋，又叫反棋(Reversi)、奥赛罗棋(Othello)、苹果棋、翻转棋。黑白棋在西方和日本很流行。游戏通过相互翻转对方的棋子，最后以棋盘上谁的棋子多来判断胜负。黑白棋的棋盘是一个有8×8方格的棋盘。开始时在棋盘正中有两白两黑四个棋子交叉放置，黑棋总是先下子。

(1) 下子规则。

把自己颜色的棋子放在棋盘的空格上，而当自己放下的棋子在横、竖、斜8个方向内有一个自己的棋子，则被夹在中间的全部翻转成为自己的棋子。并且只有在可以翻转棋子的地方才可以下子。如果玩家在棋盘上没有地方可以下子，则该玩家对手可以连下。

(2) 胜负判定条件。

双方都没有棋子可以下时棋局结束，以棋子数目来计算胜负，棋子多的一方获胜。

在棋盘还没有下满时，如果一方的棋子已经被对方吃光，则棋局也结束。将对手棋子吃光的一方获胜。

本文开发黑白棋游戏程序，黑白棋游戏的运行界面如图上图所示。该游戏具有显示执棋方可以落棋子的位置提示功能和判断胜负功能。在游戏过程中，单击“帮助”按钮则显示执棋方可落子位置(图片

表示可落子位置，如图11-2所示)。

■ 图11-2表示执棋方(黑方)可落子位置

01

黑白棋游戏设计的思路

棋子和棋盘

游戏开发时，需要事先准备黑白两色棋子和棋盘图片(如图11-3所示)。游戏最初显示时，棋盘上画上4个棋子。这里为了便于处理，采用一个qizi二维数组用来存储棋盘上的棋子。

■ 图11-3黑白两色棋子和棋盘

翻转对方的棋子

需要从自己落子(x1，y1)为中心的横、竖、斜8个方向上判断是否需要翻转对方的棋子，程序中由鼠标的mousedown事件实现。在mousedown事件中参数event对象含有单击位置像素坐标(event．pageX，event．pageY)，处理后变成Canvas对象内像素坐标(x，y)。再由如下公式换算：

经过换算转换为棋盘坐标(x1，y1)。

最后从左、左上、上、右上、右、右下、下、左下8个方向上调用过程DirectReverse(x1，y1，dx，dy)翻转对方的棋子。而具体棋子的翻转由FanQi(x，y)实现。FanQi(x，y)修改数组qizi的(x，y)保存棋盘上的棋子信息。

显示执棋方可落子位置

Can_go(x1，y1)从左、左上、上、右上、右、右下、下、左下8个方向上调用函数CheckDirect(x1，y1，dx，dy)判断某方向上是否形成夹击之势，如果形成且中间无空子则返回True，表示(x1，y1)可以落子，(x1，y1)处可以落子则用图片

显示。

判断胜负的功能

qizi［］［］二维数组保存棋盘上的棋子信息，其中元素保存1，表示此处为黑子；元素保存2，表示此处为白子；元素保存0，表示此处为无棋子。通过对qizi数组中各方棋子数的统计，在棋盘无处可下时，根据各方棋子数判断出输赢。

02

关键技术

Canvas对象支持的JavaScript的鼠标事件

Canvas对象支持所有的JavaScript的鼠标事件，包括鼠标单击(Mouse Click)、鼠标按下(Mouse Down)、鼠标抬起(Mouse Up)和鼠标移动(Mouse Move)。对Canvas添加鼠标事件方式有两种，一种方式如下：

另外一种方式在JavaScript中被称为反模式。

获取鼠标在Canvas对象上的坐标

由于Canvas上鼠标事件中不能直接获取鼠标在Canvas的坐标，所获取的都是基于整个屏幕的坐标。所以通过鼠标事件e．clientX与e．clientY来获取鼠标位置，然后通过Canvas．getBoundingClientRect()方法来获取Canvas对象相对浏览器窗口的位置(方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示Canvas对象各边与页面上边和左边的距离)，通过计算得到鼠标在Canvas中的坐标。

事件坐标转换成Canvas坐标代码如下：

如果同时考虑CSS设置width和height的情况，则代码如下。

03

黑白棋游戏设计的步骤

游戏页面index.html

设计脚本(Main．js)

1． 常量定义

游戏中常量定义，其中BLACK黑棋为1，WHITE白棋为2，无棋为0。

以下获取Canvas对象，以及用到的棋子和棋盘图片、提示图片。

2． 初始化游戏界面

游戏开始时，调用init()函数对保存棋盘上的棋子信息的qizi数组初始化，同时在棋盘上显示初始的4个棋子。

调用showMoveInfo()函数显示轮到哪方走棋。

init()函数同时对canvas添加鼠标单击事件侦听，如果canvas被单击则执行doMouseDown函数完成走棋功能。

3． 走棋过程

如果是棋盘被单击，则此位置像素信息(event．clientX，event．clientY)可以转换成棋盘坐标(x1，y1)，然后判断当前位置(x1，y1)是否可以放棋子(符合夹角之势)，如果可以则此位置显示自己的棋子图形，调用FanALLQi(i，j)函数从左、左上、上、右上等8个方向翻转对方的棋。最后判断对方是否有棋可走，如果对方可以走棋则交换走棋方。如果对方不可以走棋，则自己可以继续走棋，直到双方都不能走棋，显示输赢信息。

4． 可否落子判断

Can_go(x1，y1)从左、左上、上、右上、右、右下、下、左下8个方向判断(x1，y1)处可否落子。

调用CheckDirect()函数判断某方向上是否形成夹击之势。如果形成且中间无空子则返回True。

调用checkNext(i)函数验证参数代表的走棋方是否还有棋可走。

调用Can_Num()函数统计可以落子的位置数。

5． 翻转对方的棋子

FanALLQi(int x1，int y1)从左、左上、上、右上、右、右下、下、左下8个方向翻转对方的棋子。

调用DirectReverse()函数针对某方向上已形成夹击之势的对方棋子进行翻转。

调用FanQi(int x，int y)函数将存储(x，y)处棋子信息qizi［x］［y］进行反色处理。

调用InBoard()函数判断(x,y)是否在棋盘界内。如果在界内则返回True，否则返回False。

6． 显示执棋方可落子位置

“走棋提示”按钮单击事件函数是DoHelp()函数，它显示可以落子的位置提示。调用Show_Can_Position()函数用图片

显示可以落子的位置。

7． 判断胜负功能

调用isLoseWin()函数统计双方的棋子数量，显示输赢信息。

至此，就完成黑白棋游戏设计了。

05

参考书籍

HTML5网页游戏设计从基础到开发（第2版·微课视频版）

作者：夏敏捷、尚展垒
定价：69.90元
ISBN：9787302629771