黑白棋，亦被称为反棋、奥赛罗棋或翻转棋，是一种在西方和日本广受喜爱的棋类游戏。其核心玩法在于相互翻转对方的棋子，直至棋盘上某一方的棋子数量多于另一方，即为胜者。游戏棋盘为8×8的方格布局，初始状态为棋盘中央交叉放置四枚棋子，其中两枚为白色，两枚为黑色，且黑棋先行。

1．(1) 下子规则详解：

玩家需将自身颜色的棋子置于棋盘的空位上。若该棋子在横、竖、斜任一方向上夹有其他同色棋子，则这些被夹的棋子将全部翻转为该玩家的颜色。同时，下子必须遵循能翻转棋子的原则，且若某玩家无法在棋盘上找到合适的下子位置，则其对手可连下两子。

2．(2) 胜负判定条件：

当双方都无法在棋盘上找到合适的下子位置时，游戏结束，棋子数量多的一方胜出。此外，若在游戏进行过程中，某方的棋子被对方完全吃光，那么该方即刻判负，游戏也随之结束。

本文旨在开发一款黑白棋游戏程序，其运行界面如图所示。该程序不仅提供了执棋方可能的落子位置提示功能，还具备胜负自动判断功能。在游戏过程中，玩家可以随时点击“帮助”按钮来查看当前可落子的位置。 表示可落子位置，具体如图11-2所示。 ■ 图11-2展示了黑方（执棋方）可落子的位置。

3．黑白棋游戏设计概览

在构思黑白棋游戏时，首要步骤是准备棋子和棋盘。游戏开发者需预先设定好黑白两色的棋子，并准备好相应的棋盘图片，如图11-3所示。游戏开始时，棋盘上会预先放置四个棋子。为了便于编程处理，通常会采用一个二维数组来储存棋盘上的棋子状态。 ■ 图11-3 黑白两色棋子和棋盘

在黑白棋游戏中，翻转对方的棋子是一个关键操作。为了实现这一功能，游戏开发者需要在自己落子（x1，y1）的基础上，从横、竖、斜8个方向上判断是否需要翻转。这一操作通常通过编程实现，其中鼠标的mousedown事件被用来触发这一判断。当mousedown事件发生时，会获取到单击位置的像素坐标（event.pageX, event.pageY），经过处理后转换为Canvas对象内的像素坐标（x，y）。随后，通过一系列的换算公式，确定是否需要翻转对方的棋子。 经过一系列的换算，将像素坐标转换为棋盘坐标(x1，y1)。随后，从八个方向（左、左上、上、右上、右、右下、下、左下）依次调用过程DirectReverse(x1，y1，dx，dy)，以翻转对方棋子。而棋子的具体翻转操作则由FanQi(x，y)函数完成，它负责修改数组qizi中(x，y)位置上的棋子信息，以反映棋盘上的实际状态。 在棋盘游戏中，显示执棋方可落子位置是一个关键环节。为了判断某方向上是否形成夹击之势，Can_go(x1，y1)函数会从八个方向（左、左上、上、右上、右、右下、下、左下）依次调用CheckDirect(x1，y1，dx，dy)函数。CheckDirect函数会检查指定方向上是否存在夹击，并且中间是否有空子。如果满足夹击条件且中间无空子，则返回True，表示(x1，y1)位置可以落子。一旦确认(x1，y1)处可落子，系统将显示相应的图片，以直观地反映棋盘上的实际状态。

4．判断胜负的功能

在棋盘游戏中，胜负的判断是一个至关重要的环节。为了实现这一功能，我们使用了一个二维数组qizi来保存棋盘上的棋子信息。这个数组的元素值代表了不同位置上的棋子情况：当元素值为1时，表示该位置为黑子；当元素值为2时，表示该位置为白子；而当元素值为0时，则表示该位置无棋子。

在棋盘游戏进行到无法再下棋时，我们通过对qizi数组中各方棋子数的详细统计，根据统计结果判断出哪方棋手获得了胜利。这种判断胜负的方法既准确又高效，为玩家提供了公平、透明的游戏体验。 关键技术：Canvas对象的JavaScript鼠标事件支持 Canvas对象全面支持JavaScript的各类鼠标事件，诸如鼠标单击、按下、抬起以及移动等动作。开发者可以通过两种方式为Canvas添加这些鼠标事件： 此外，在JavaScript中还存在另一种为Canvas添加鼠标事件的方法，但这种做法通常不被推荐，因此被称为反模式。

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

在JavaScript中，由于Canvas上的鼠标事件提供的是基于整个屏幕的坐标，而非Canvas本身的坐标，因此无法直接获取鼠标在Canvas上的位置。为了解决这个问题，我们可以采用一种方法：首先，通过鼠标事件对象e的clientX和clientY属性获取鼠标在屏幕上的位置；其次，利用Canvas对象的getBoundingClientRect()方法获取Canvas对象相对于浏览器窗口的位置，这个方法会返回一个包含left、top、right和bottom四个属性的矩形对象，分别表示Canvas对象各边与页面上边和左边的距离；最后，通过计算这两个位置之间的差异，即可得到鼠标在Canvas上的坐标。以下是进行这种坐标转换的示例代码： 在考虑CSS设置的width和height属性的同时，可以使用以下代码进行坐标转换。

6．黑白棋游戏设计的步骤

游戏页面index.html设计

在着手设计黑白棋游戏的页面时，我们首先需要关注的是index.html文件。这个文件将作为游戏的基础框架，承载着游戏的整体布局和交互逻辑。在编写index.html时，我们可以利用CSS的width和height属性来精确控制游戏元素的尺寸，同时结合其他代码实现坐标转换，从而为玩家呈现出流畅且富有策略性的游戏体验。

7．设计脚本（Main.js）

在完成了游戏页面的基础框架设计后，我们接下来需要着手设计游戏的核心脚本。这个脚本通常以JavaScript语言编写，主要负责处理游戏的逻辑和交互。在Main.js中，我们将编写一系列的函数和事件处理程序，以确保游戏能够按照预期的规则和流程进行。通过精确控制游戏状态的变化和玩家操作的反应，我们将为玩家打造一个既公平又富有挑战性的游戏环境。

8. 常量定义

在游戏中，我们定义了一些常量来代表不同的棋子状态。具体来说，BLACK代表黑棋，其数值为1；WHITE代表白棋，其数值为2；而无棋的状态则用0来表示。这些常量的设定，为后续游戏逻辑的处理提供了基础。 接下来，我们需要获取Canvas对象，并加载所需的棋子和棋盘图片，以及提示图片。这些准备工作将为后续的游戏逻辑实现提供必要的支持。

9．初始化游戏界面

在游戏启动时，会调用init()函数来对保存棋盘上棋子信息的qizi数组进行初始化操作。同时，系统会在棋盘上展示出最初的四个棋子，为玩家呈现出一个清晰的游戏界面。 调用showMoveInfo()函数，该函数会显示当前轮到哪方进行走棋。 init()函数不仅负责初始化游戏环境，还为canvas元素添加了鼠标单击事件的监听。一旦canvas被点击，便会触发doMouseDown函数的执行，从而完成走棋的操作。

10． 走棋流程

当棋盘被单击时，我们可以获取到点击位置的像素信息，即(event.clientX, event.clientY)，并将其转换为棋盘坐标(x1, y1)。接下来，我们需要判断当前位置(x1, y1)是否满足放置棋子的条件，也就是判断该位置是否具有夹角之势。如果满足条件，我们就在该位置显示自己的棋子图形，并调用FanALLQi(i, j)函数，从左、左上、上、右上等八个方向对对方的棋子进行翻转。最后，我们需要检查对方是否有棋可走，若对方也能走棋，则双方交替进行；若对方无法走棋，则当前方继续走棋，直至双方都无法再走棋，此时显示输赢信息。

11． 落子判断逻辑

我们通过Can_go(x1，y1)函数，从八个方向（左、左上、上、右上、右、右下、下、左下）对棋盘上的(x1，y1)位置进行综合判断，以确定该位置是否满足落子的条件。 调用CheckDirect()函数，我们会对棋盘上的特定方向进行检测，以判断是否存在夹击之势。一旦检测到夹击且中间无空子，该函数将返回True。 调用checkNext(i)函数，我们将验证参数i所代表的走棋方在当前棋盘状态下是否仍有合法的棋步可走。 调用Can_Num()函数，我们将统计在当前棋盘状态下，可供走棋方落子的位置数量。

12．翻转棋子操作

FanALLQi(int x1，int y1)函数用于执行棋子翻转操作，覆盖左、左上、上、右上、右、右下、下、左下这8个方向，实现对对方棋子的翻转。 调用DirectReverse()函数，可以对某一方向上已形成夹击之势的对方棋子执行翻转操作。 调用FanQi(int x，int y)函数，可以对棋盘上位置为(x，y)的棋子信息进行反色处理。 调用InBoard()函数，可以判断棋盘上的位置(x,y)是否位于棋盘界内。若该位置在棋盘界内，则函数返回True；若不在界内，则返回False。

13． 显示可落子位置

当用户单击“走棋提示”按钮时，会触发DoHelp()函数，该函数负责显示当前执棋方可以落子的位置提示。为了实现这一功能，我们可以调用Show_Can_Position()函数，利用图片来直观地展示可落子的位置。 展示可落子位置。

14．胜负判断功能

通过调用isLoseWin()函数，该功能能够统计对弈双方棋子的数量，并据此显示游戏输赢的相关信息。 完成上述步骤后，我们就成功地设计了黑白棋游戏。 设计黑白棋游戏时，我们参考了多本专业书籍，汲取了丰富的设计理念和实战经验。这些书籍不仅为我们提供了游戏设计的理论基础，还指导我们如何将理论应用于实际，从而成功地设计出这款黑白棋游戏。 HTML5网页游戏设计从基础到开发（第2版·微课视频版）

定价：69.90元

ISBN：9787302629771

编辑推荐：包含11个游戏实战案例，提供视频、源代码、教学课件、教学大纲及扩展案例。

技术背景：

HTML5，作为HyperText Markup Language 5的简称，是在HTML4.01的基础上进行革新并符合现代网络发展需求的技术。它不仅是互联网的下一代标准，更是构建和呈现互联网内容的重要语言。自2014年10月由万维网联盟（W3C）完成标准制定以来，HTML5技术备受瞩目。目前，Chrome、Firefox、Opera、Safari等主流浏览器均已支持HTML5，新Edge浏览器更是率先实现100%支持。

本书作者深耕HTML5网页设计教学与应用开发领域，凭借丰富的教学与实践经验，洞悉了提升HTML5开发能力的关键要素。他们致力于为读者提供一本能够迅速提升HTML5开发能力的实用指南。

本书主要内容：

本书分为基础篇和实战篇。基础篇涵盖第1至6章，主要围绕HTML5的基础知识和相关新技术展开，如JavaScript编程、Canvas API绘图、CSS3样式设置以及jQuery的使用技巧。而实战篇则包括第7至17章，旨在通过综合运用前面所学的技术，开发出诸如人物拼图、扑克翻牌、推箱子等经典游戏，以及五子棋、黑白棋等大家耳熟能详的游戏。通过本书，读者将能够熟练掌握如何利用HTML5和JavaScript、CSS3制作交互式游戏和平台类游戏，从而精通网页游戏设计。

本书特点：

(1) 内容全面：本书覆盖了HTML5网页游戏设计的全方位内容，从基础知识到实战应用，一应俱全。 (2) 代码通用：本书提供的所有案例源代码通用性强，便于读者直接应用于各类游戏的开发。