五子棋，这款深受大众喜爱的棋类游戏，以其独特的多变性吸引了无数玩家。在本章中，我们将首先实现一个单机五子棋游戏，让两位玩家轮流下棋。随后，我们会对其进行改进，加入人工智能，实现人机对战版本。整个游戏棋盘尺寸为15×15，玩家可以通过单击鼠标来落子，且黑子拥有先手优势。在落子前，程序会智能判断该位置是否有棋子占据，或者是否超出了棋盘边界。当任意一方玩家在横向、竖向、斜向或反斜向连成5个棋子时，即视为获胜。

接下来，让我们一起探索五子棋游戏的运行界面，感受这款游戏的魅力所在。

五子棋游戏设计的核心思路

在五子棋游戏的设计中，为了记录每一步棋的信息，我们引入了一个二维数组chessData。这个数组的每个元素chessData[x][y]都对应着棋盘上(x, y)位置上的棋子信息。具体来说，数字1代表黑子，数字2代表白子，而数字0则表示该位置上没有棋子。

在游戏运行的过程中，每当玩家进行一次鼠标单击操作时，程序会首先判断这次单击是否合法。合法性要求单击的位置不能是已有棋子的位置，也不能超出棋盘的边界。如果单击位置合法，程序会更新chessData数组，并将这个位置信息记录下来。随后，程序会调用judge函数，根据当前的棋盘状态判断游戏的结果，即哪一方玩家已经获胜，或者游戏仍在继续。

关键技术

判断输赢的算法

本游戏的核心技术在于判断输赢的算法。该算法主要依据四个方向的五子连珠情况来进行判断：X=Y轴、X=-Y轴、X轴以及Y轴。只要其中任何一个方向出现五子连珠，即可判定输赢。实际上，无需扫描整个棋盘，只需关注刚下棋子的位置(x，y)，在其附近进行横向、纵向和斜向的判断即可。

具体来说，judge(x，y,chess)函数负责判断该棋子是否与其他棋子连成五子。它以(x,y)为中心，向各个方向进行统计，若相同棋子数量达到或超过5个，则判定为连成五子。 程序中，我们通过调用judge(x，y，chess)函数来判断四种情况是否连成五子，以此为依据来判定输赢。每当玩家下完一步棋后，都会触发该函数的调用。一旦判断出有五子连珠的情况，程序将弹出对话框显示输赢结果。

此外，在图形上色方面，我们利用了两个重要的属性：fillStyle和strokeStyle。这两个属性使得我们能够轻松地为图形添加颜色。 strokeStyle属性用于定义图形轮廓的颜色，而fillStyle则用于设置图形的填充颜色。color参数可以是一个表示CSS颜色值的字符串、渐变对象或是图案对象。在默认情况下，线条和填充颜色都被设置为黑色（CSS颜色值#000000）。以下示例均展示同一种颜色设置方式。 本游戏中，棋盘背景色被设置为“orange”。

五子棋游戏设计的流程

游戏页面five．html，其设计流程相对简洁。在页面加载时，会调用drawRect()函数来绘制棋盘，以此作为游戏开始的起点。 设计脚本（Main.js） 在五子棋游戏的设计中，除了游戏页面的html文件外，还需要一个主控脚本，通常命名为Main.js。这个脚本负责整个游戏的逻辑控制，包括游戏的开始、进行以及结束等关键环节。通过调用各种函数和事件，Main.js确保游戏能够流畅、有序地运行。 1． 棋盘数组的初始化 首先，需要定义两个棋子图片对象，分别命名为img_b和img_w，代表黑白两色的棋子。随后，初始化一个棋盘数组chessData，其元素值用于表示棋盘上的状态。具体来说，当某个位置没有被走过时，其值为0；若该位置被白棋走过，则值为1；若被黑棋走过，则值为2。因此，在棋盘数组的初始状态下，所有元素的值均为0，表示尚未有任何棋子走过。 2． 棋盘的绘制 在页面加载完成后，应调用drawRect()函数，以在页面上绘制出一个15×15的五子棋棋盘。 3． 走棋功能实现 在鼠标单击事件中，我们需要先判断单击的位置是否合法。位置不能是已有棋子的位置，也不能超出游戏棋盘的边界。如果位置合法，就将其信息记录到chessData数组中。最后，通过调用judge(x, y, chess)函数来判断游戏的胜负。该函数会检查四种情况，看是否有任意一种情况能连成五子，从而确定哪位玩家获胜。 4． 画棋子功能实现 在drawChess(chess, x, y)函数中，我们接受三个参数：chess表示棋子的颜色（1代表白棋，2代表黑棋），而(x, y)则指定了棋盘上的位置，即数组的索引。这个函数的目的是根据传入的参数在棋盘上绘制相应的棋子。

人机五子棋游戏的开发

在前面的五子棋游戏中，我们仅实现了两个人的对弈功能。若要将其升级为人机对弈，则需引入人工智能技术，这无疑增加了游戏的挑战性。对于棋类游戏而言，实现人工智能的常见算法有三种：遍历式、思考式和棋谱式。

(1) 遍历式算法 这种算法会遵循游戏规则，逐一探索当前棋盘上所有可能的下棋位置。它假设在某个位置下棋，然后生成新的棋盘布局，并进一步探索。若无法战胜对手，则回溯至原始棋盘，尝试其他位置。此过程会反复进行，直至找到能稳胜对手的位置。尽管这种算法能让电脑展现出高超的棋艺，但它的计算量巨大，对CPU性能要求甚高。

(2) 思考式算法 该算法预先设定一系列判断条件，然后依据这些条件在棋盘上进行探索，以选定最佳的下棋位置。然而，此类算法的程序通常较为复杂，且只有高水平程序员才能制作出具有“高智商”的电脑。

(3) 棋谱式算法 这种算法预先将常见的棋盘局部布局存储为棋谱，并在走棋前对棋盘进行一次遍历，依据棋谱选定关键位置。此算法思路清晰、计算量适中，且只要棋谱足够丰富，便能赋予电脑一定的棋艺水平。

在本实例中，我们选择了棋谱式算法来实现人工智能功能。为此，我们设计了Computer类来计算电脑（即白方）的落子位置。首先，我们使用Chess数组来存储棋谱，其格式包括黑棋、白棋、无棋以及需要下棋的位置等信息。 数组中行数越高，表示该行棋谱中的S位置越重要。在游戏中，电脑需要选择重要的位置进行落子。例如，棋谱［N,S,B,B,B ］表示玩家（人）的黑棋（B）已有三子连线，此时电脑必须选择附近的位置进行下棋。其中，S位置是需要电脑下子的位置，而N位置是空位置。棋谱［S，B，B，B，B ］则表示玩家（人）的黑棋（B）已经四子连线，其级别高于棋谱［N,S,B,B,B ］。

在确定了棋谱后，我们需要遍历棋盘，判断当前棋盘的信息是否符合某个棋谱。判断时，我们遵循从高级别棋谱到低级别棋谱的顺序，即从数组中行数最高的Chess．length-1开始判断。一旦发现符合的棋谱，我们就按照棋谱指定的位置存储到(m_nCurRow，m_nCurCol)。如果所有棋谱都不符合当前棋盘信息，那么我们就随机选择一个空位置进行落子。

接下来，我们可以实现人工智能的算法，并将其封装在coputer．js脚本中。 在游戏页面five.html中，由于引入了coputer.js脚本，我们需要对页面进行相应的修改。由于游戏中只有玩家（黑棋）需要点击棋盘进行落子，且无需轮流下子，因此我们需要对单击事件的响应函数play(e)进行改写。当玩家（黑棋）落子后，程序会判断此时玩家是否获胜。若获胜，则游戏结束；若未获胜，则电脑（白方）将自动进行计算并落子。自动落子的过程通过调用Input(chessData)函数来计算白子的位置，再通过GetComputerPos()函数获取电脑落子的位置P。获取到位置P后，程序会在该位置显示白子，并再次判断此时电脑是否获胜。 本文旨在实现经典五子棋游戏的核心功能，包括判断胜负。在此基础上，我们将系统升级为人机对战模式，以增加游戏的挑战性，进而吸引更多玩家。

参考资料

在开发五子棋游戏的过程中，我们参考了多本关于五子棋的书籍，包括《五子棋入门》、《五子棋进阶》等，以确保游戏规则的准确性和完整性。这些书籍为我们提供了宝贵的五子棋知识和经验，为游戏的成功开发奠定了坚实基础。 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开发能力的书籍。他们深知，在学习编程的过程中，一本合适的书籍对于节省时间、快速获得实际应用至关重要。

本书主要内容：

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