摘 要

随着互联网的逐步发展，面向浏览器端的Web应用与本地APP的差别逐渐缩小，特别是在HTML5技术出现与流行之后，加快了两者差距的缩小。基于HTML5的网页游戏以其绚丽的效果和交互的快捷性受到越来越高的关注。

本文在HTML的基础技术CSS、JavaScript和HTML5新引进的Canvas等技术基础上，完成五子棋游戏设计和实现。系统采用HTML5的Canvas元素进行游戏界面和棋盘设计，用CSS对游戏界面进行美化，用JavaScript进行游戏算法的设计。本次毕业设计从需求分析、软件设计及最终的实现和测试这几个阶段详细地描述了一个基于HTML5技术的五子棋游戏设计与开发过程。

本次HTML5五子棋通过需求分析设计了游戏界面，通过JavaScript实现了人机交互动作，通过使用贪婪算法实现了人机对弈等功能。本文详细地述说了实现这些功能的方法和过程。本次设计的五子棋界面美观、功能正常、交互性能良好，符合了设计的要求。

关键词：HTML5；Canvas；JavaScript；五子棋；人机对弈

Abstract

With the development of the Internet, the difference between the Web applications based on the browser and the native APP is getting smaller and smaller. Especially when the HTML5 technology emerged and developed, the difference has been further reduced. The game based on HTML5 is getting fast concern because of its brilliant effect and convenient interaction.

Based on the HTML basic knowledge: CSS, JavaScript, some new technology of HTML5, such as Canvas element, this graduation project completed the Gobang game design and realization. Canvas element is adopted to draw the game chess, and the CSS is used to beautify the game surface, and JavaScript is used in algorithm design. This graduation design detailed the process of the design and development of Gobang game based on HTML5 from a series of requirements analysis, software design, and final implementation and testing.

This Gobang game based on the HTML5 completed the game interface design through the demand analysis, interactive action through JavaScript, people-computer game through the AI named greedy algorithm and so on. The method and process of realizing these functions are described in detail in this paper. The Gobang game interface is beautiful, and all function and interaction do well. In a word, the game met the design requirements.

Key Words：HTML5; Canvas; JavaScript; Gobang; AI

目 录

第1章 绪论 1

1.1 课题研究背景 1

1.2 发展趋势和现状研究 1

1.2.1 HTML5国内外发展现状和趋势 1

1.2.2 基于HTML5的网页游戏的发展现状和趋势 2

1.3 论文研究目的 3

1.4 本文研究内容和组织结构 3

1.5 本章小结 4

第2章 相关技术基础 5

2.1 HTML5新特性 5

2.1.1 WebSocket 6

2.1.2 Web Storage离线存储 7

2.1.3 Web Worker多线程 7

2.1.4 视频和音频 8

2.1.5 Canvas画布 9

2.1.6 其他新特性 9

2.2 JavaScript基础知识 9

2.2.1 ECMAScript 10

2.2.2 DOM和BOM 10

2.3 本章小结 11

第3章 系统的设计 12

3.1 HTML5五子棋需求分析 12

3.2 HTML5五子棋框架设计 12

3.3 HTML5五子棋游戏表示层设计 13

3.3.1 游戏首页设计 13

3.3.2 游戏UI设计 14

3.4 HTML5五子棋游戏逻辑控制层设计 14

3.4.1 五子棋游戏总体流程 15

3.4.2 棋盘绘制功能模块 16

3.4.3 输赢判断功能模块 16

3.4.4 人机交互功能模块 17

3.4.5 人机对弈功能模块 17

3.5 本章小结 18

第4章 HTML5五子棋游戏的实现 19

4.1 HTML5五子棋游戏表现层实现 19

4.1.1 游戏首页实现 19

4.1.2 游戏UI的实现 20

4.2 HTML5五子棋游戏逻辑控制层的实现 22

4.2.1 棋盘绘制功能模块的实现 22

4.2.2 输赢判断功能模块的实现 24

4.2.3 人机交互功能模块的实现 25

4.2.4 人机对弈功能模块的实现 27

4.3 本章小结 28

第5章 平台运行与测试 29

5.1 平台测试环境 29

5.2 游戏逻辑功能测试 29

5.2.1 棋盘绘制和落子位置信息的记录测试 29

5.2.2 输赢判断功能模块测试 30

5.2.3 人机交互功能模块测试 31

5.2.4 人机对弈功能测试 32

5.3 游戏页面兼容性测试 33

5.4 本章小结 35

第6章 总结与展望 36

6.1 本次毕业设计总结 36

6.2 展望与未来 36

参考文献 37

致 谢 38

第1章 绪论

1.1 课题研究背景

我们正处于飞速发展的互联网时代，HTML这一与互联网关系密切的语言一直都在不断完善和发展中。HTML5的出现具有革命性，并且在互联网/移动互联网方面得到了迅速的运用和蓬勃的发展。

HTML最早出现在1993年6月，是以因特网草案的形势发布的。之后到1999年12月24号，HTML共经历了HTML 2.0、HTML 3.2、HTML 4.0、HTML 4.01四个版本。从发布之初，到HTML 4.01的这六年中，HTML得到了丰富的发展，并且迅速成为Web开发的主流语言。但是在此之后十年，HTML的都没有经过大的改动，其发展陷入停滞。Web开发者普遍认为HTML不会再有前途，因此为弥补HTML的不足，开发者们多采用XML和XHTML标准。这两种标准的理念是以文档为中心，起初确实能弥补HTML的不足，但是互联网飞速发展的这十多年间，它们也达不到到当今网页开发的要求了。因此，为了解决现行Web开发的要求，经过多年沉淀，一个新的HTML5标准应运而生。

相比于之前的HTML的标准进行了重新规划和简洁，HTML5技术更是一次突破，它所支持的如audio、video、canvas、多线程等新特性，使网页开发变得更加简单。除此之外，HTML5还想到了智能手机、平板电脑电量较少的移动设备的支持特性，HTML5的许多新特性都对其做了电量方面的优化，这为HTML5的推广提供了很大的帮助。