基于HTML5的棋牌游戏毕设论文

编 号：

审定成绩：

重庆邮电大学

毕业设计（论文）

设计（论文）题目： 基于HTML5的棋牌游戏

学 院 名 称 ：

学 生 姓 名 ：

专 业 ：

班 级 ：

学 号 ：

指 导 教 师 ：

）

答辩组 负责人 ：

填表时间： 2015 年 6 月

重庆邮电大学教务处

制

重庆邮电大学本科毕业设计（论文）

摘 要

如今社会是当之无愧的网络生活，也正是计算机的蓬勃发展让我们的生活更进一步。无处不见的科技，让我们生活无论是精神方面还是物质方面都能得到满足。而网络游戏更是丰富了我们的精神生活，随着电脑的出现，我们也拥有了更多乐趣，从一开始的扫雷，直到如今的各种大型网络游戏，电脑游戏也逐渐成为生活中不可缺少的娱乐方式。在电脑游戏中，单机游戏则是可以不用联网则能玩耍，如今基于HTML5开发的游戏也多为单机游戏。

本文则是通过象棋游戏来实现基于HTML5的游戏开发的基本过程与方法。文中基于HTML5的棋牌游戏则是将以前的娱乐生活移到的网络上，在网页上也能玩象棋游戏。通过HTML5的各种标签和功能来实现象棋游戏，例如通过canvas标签实现游戏部件操作。此象棋游戏能通过鼠标对棋子的控制实现游戏过程，可以选点击按钮开始游戏，能实现真实象棋游戏过程中的功能，吃子、悔棋、胜负判断等。其中行棋判断以及具体实现的方式例如行棋规则、游戏策略则是由JavaScript编写实现，最后通过CSS来修饰游戏界面文字的风格和游戏部件的布局等。在Dreamweaver上编写、修改和运行游戏进行测试，最后，通过在不同的浏览器上进行在修改和测试，将象棋游戏所需要的功能完善。

【关键词】 网页游戏 HTML5 象棋 JavaScript

- I -

重庆邮电大学本科毕业设计（论文）

ABSTRACT

Today, the society is a well deserved network life, it is the booming computer to make our life

more further. There the technology can be seed everywhere, so that we live whether the spirit or

material aspects can be satisfied. And network games is to enrich our spiritual life, with the advent

of the computer, we also have the more fun, from the beginning of the mine, until now all kinds of

large-scale online games, computer games has gradually become indispensable in the life of

entertainment. In computer games, the stand-alone game can play without Internet, and now the

games development based on the HTML5 almost are stand-alone games.

This paper is to realize the basic process and method of game development based on HTML5

by chess the paper, the chess game based on HTML5 is a way to move the previous

entertainment of life onto the network, and can also play chess game on the web h the

various tags and functions of the HTML5 to achieve chess games, such as achieving operate the

game parts by canvas tags . This chess game can through the mouse control of the pieces to achieve

game process, can be selected, click on the button to start the game, can achieve real chess game in

the process of function, eat, undo, determine the outcome of the other. The chess to the judgment

and the concrete realization of the way such as chess rules, game strategy is by JavaScript prepared

to achieve, finally through the CSS to modify the layout of the game interface text style and game

components and so , modify, and run games on Dreamweaver, and finally, by modifying

and testing on the different browsers, the game needs to be perfected.

【Key words】 web games HTML5 Chinese chess JavaScript

- II -

重庆邮电大学本科毕业设计（论文）

目 录

前 言 .................................................................................................................................................. 1

第一章 HTML5概述 ....................................................................................................................... 2

第一节 HTML5的发展历史 .................................................................................................... 2

一、HTML5的演变 ............................................................................................................. 2

二、HTML5的革新 ............................................................................................................. 2

第二节 HTML5的优势 ............................................................................................................ 3

一、HTML5的新标签 ......................................................................................................... 3

二、HTML5的新功能 ......................................................................................................... 4

第三节 本章小结 ....................................................................................................................... 4

第二章 基于HTML5的游戏 .......................................................................................................... 6

第一节 准备工作 ....................................................................................................................... 6

一、什么游戏 ........................................................................................................................ 6

二、绘制部件 ........................................................................................................................ 6

第二节 JavaScript、CSS特性 .................................................................................................. 6

一、JavaScript ....................................................................................................................... 6

二、 7

第三节 HTML5游戏 ................................................................................................................ 8

第四节 本章小结 ....................................................................................................................... 8

第三章 基于HTML5的象棋游戏开发 .......................................................................................... 9

第一节 中国象棋游戏 ............................................................................................................... 9

一、中国象棋 ........................................................................................................................ 9

二、 象棋规则 .................................................................................................................... 10

第二节 开发工具 ..................................................................................................................... 11

第三节 象棋游戏部件的绘制 ................................................................................................. 12

第四节 页面布局调整和信息定义 ......................................................................................... 13

第五节 本章小结 ..................................................................................................................... 13

第四章 功能性JavaScript和主页 ................................................................................................. 14

第一节 象棋AI ....................................................................................................................... 14

第二节 bill脚本 ...................................................................................................................... 15

第三节 play脚本 ..................................................................................................................... 15

第四节 common脚本 .............................................................................................................. 16

- III -

重庆邮电大学本科毕业设计（论文）

第五节 页面生成 ..................................................................................................................... 17

第六节 本章小结 ..................................................................................................................... 17

第五章 测试 .................................................................................................................................... 19

第一节 测试的目的和意义 ..................................................................................................... 19

第二节 测试内容 ..................................................................................................................... 19

一、界面测试 ...................................................................................................................... 19

二、按钮测试 ...................................................................................................................... 20

三、功能测试 ...................................................................................................................... 20

第三节 本章小结 ..................................................................................................................... 21

结 论 ................................................................................................................................................ 22

致 谢 ................................................................................................................................................ 23

参考文献 ............................................................................................................................................ 24

附 录 ................................................................................................................................................ 25

一、英文原文： ......................................................................................................................... 25

二、英文翻译： ......................................................................................................................... 31

三、工程设计图纸： ................................................................................................................. 35

四、源程序： ............................................................................................................................. 36

1、HTML5按钮主要代码： ............................................................................................. 36

2、CSS主要代码................................................................................................................ 36

3、AI脚本主要代码 .......................................................................................................... 37

4、common脚本信息定义代码 ......................................................................................... 38

5、bill脚本写入棋谱代码 ................................................................................................. 40

6、play脚本定义代码 ........................................................................................................ 41

- IV -

重庆邮电大学本科毕业设计（论文）

前 言

HTML5是HTML的第5次重大修改，在不断的改进中，于2014年10月29日定制完成，相比前几个版本的超文本标记语言，HTML5对我们来说无疑是全新的。HTML5的新增元素让她在网页的功能性上更加全面和完善。而正因为如此，HTML5在基于以前的超文本标记语言有何新颖之处，又会为网络世界带来何种改变，在文中，我用基于HTML5的象棋游戏有所阐述。

在日新月异的科技生活中，无论是虚拟世界观的网络游戏，还是在现实生活中就地取材的意趣游戏，电脑游戏已然成为人们不可或缺的娱乐方式。而网络上的象棋游戏则是将生活中已有的娱乐方式展现到电脑上的其中之一。相交玩游戏的不同方式，网页游戏则是其中之一，而做网页游戏有用Flash，或是HTML4加XML等。基于HTML5的游戏相比之下则是更有优势，在全新的标准之下，能实现Flash的视觉效果，又不要Flash游戏所需要的大量内存，在功能性上更加全面，而不会想HTML4加XML游戏那般局限。

尽管HTML5给我们带来的好处在我们浏览网页时似乎并没有很直观的感受，但是网页上更加绚丽的图片效果，一些网页细微的界面改变，一些潜在的功能变化，无疑是HTML5带来的好处。

- 1 -

重庆邮电大学本科毕业设计（论文）

第一章 HTML5概述

第一节 HTML5的发展历史

一、HTML5的演变

随着计算机行业的发展，各种计算机技术也是日新月异的变化着，人工智能技术，感知型无人机，新型机器人等等，在不断的革新。而作为万维网的核心语言，超文本标记语言（HTML）也完成了第五次重大修改，即HTML5[1]。而我们平时浏览的集文字图片动画为一体的网页也是由HTML编写的，通过连接完成网页之间的跳转和切换。

最初的超文本标记语言与1993年首次以英特网草案的形式发布出来，在20世纪90年代中，HTML经过了大幅发展，从HTML2.0版到3.2版和4.0版，直至1999年的4.01版后，在业界普遍认知中，HTML的发展已穷途末路[2]。

在Web标准的焦点转移到XML（可扩展标记语言）和XHTML（可扩展超文本标记语言）上时，HTML5草案前身名为Web Applications 1.0，于2004年被WHATWG（Web Hypertext Application Technology Working Group）提出。于2006年WHATEG与W3C正式合作，在2007年被W3C接纳，并成立了新的HTML工作团队，而在双方经过8年来不懈努力，在2014年10月29日，HTML标准规范终于最终制定完成，并公开发布。

二、HTML5的革新

相比HTML4而言，HTML5取消了