基于Web的五子棋设计与实现Word文档格式.docx

1、1 前言1.1 课题研究背景 在互联网飞速发展的今天，随着电脑的普及，越来越多的人沉浸在电子产品的魅力之中。而互联网的兴起也带动了游戏产业的发展1。现如今，游戏已经融入了人们的生活之中，多数人在学习、工作之余都会选择游戏作为主要的休闲娱乐方式。虽然随着电竞行业的兴起，游戏种类开始多了起来，大到近100G的网游，小到几乎不计内存的网页小游戏，都以不同的姿态吸引着在都市中生活着的人们。但是，在这些游戏之中，网页小游戏以其简单易上手但又不失趣味性，轻便不耗费大量内存的特性，吸引着多数人在选择游戏种类的时候依旧会更倾向于即完即止的网页小游戏。1.2 研究目的与意义随着近年工作繁重，生活节奏越来越快，在

2、这繁忙的生活中，游戏成了主要的休闲娱乐方式。而对于多数游戏而言，web游戏占用内存较小，无需下载，更显轻便。web游戏中人机五子棋的游戏方式，上手快、对局简单、不耗费过多时长、适应年龄广，既放松了大脑，又在不知不觉中增强了逻辑能力。再由于是人机对弈，只有一个人也可以轻松娱乐，不会出现网络诈骗等情形。2 开发技术与环境2.1 开发环境2.1.1 HBuilderHbulider是由DCloud（数字天堂）推出的一款支持html5的Web开发IED。是目前较为流行的前端开发软件。它最大的优势是快。通过完整的语法提示和代码输入法、代码块等，大幅度提升html、js、css的开发效率。2.1.2 Ch

3、rome浏览器Chrome浏览器兼容了最新的html5及css3的所有功能，所以canvas的编写它能够完全支持。而且chrome浏览器不仅启动速度快和页面分析速度较快，而且它执行JavaScript代码的速度也是最快的。因此，它的简介快速最适合前端开发。2.2 开发技术本次五子棋游戏开发中，主要采用了html5中的canvas标签的功能，搭配上前端必要的源生JavaScript脚本，再配上css的渲染编写的。2.2.1 canvas在网页制作中，html是最主要、最基本一种编程语言。它确定了整个页面模块、内容。而随着互联网技术的不断发展、改良，在html5中新出了一个最具特色的标签canva

4、s。canvas在一般的网页界面中或许很少用到，但是很多炫酷多姿的网页效果都少不了canvas。简单来说，canvas就是一只画笔，你可以用它在画布上画出绚烂灵动的图案。它自带的属性方法使得网页制作多了很多可能。在该游戏中，canvas主要用于棋盘和棋子的绘制。 2.2.2 css及css3css主要用于对html页面的排版着色，对整个页面进行修饰。css3是在css的基础上新增的功能，可以完成一些简单的网页动态行为，不用再使用过多的JavaScript代码实现。在该游戏中主要应用于小标签的修饰和行为。2.2.3 JavaScriptJavaScript是一种应用于客户端的脚本语言2，用于给静

5、态的html页面增加动态功能，对浏览器事件的响应。让网页界面显得有活力，更具趣味性。最初，由于各家公司有自己的网页动态功能的编程语言，最终为了统一，制定了JavaScript标准。完整的JavaScript包括了三个部分：ECMAScript、DOM（文档对象模型）、BOM（浏览器对象模型）。相较于其它编程语言，JavaScript作为脚本语言可以在运行过程中逐行进行解释。它的简便还在于对使用的数据类型不会有严格的要求，可以创建对象，也可以使用现有对象，不依赖操作系统，不需要经过服务器对用户行为做出反应。在此游戏中，JavaScript主要用于整个人机对弈的行为方式。3 游戏设计3.1 系统功

6、能设计网页版的五子棋应该具备真实下棋的所有情况。在真实的五子棋下棋过程中，首先要选棋，再判断下棋的先后顺序，然后开始对弈，最后判断输赢。在网页模拟五子棋游戏中同样要有以上的步骤。但是在真实五子棋中，一般情况下，在对弈过程中其实是不允许出现悔棋的，由于此次设计目的在于娱乐放松，所以会在对弈过程中增加悔棋的功能，但是限制连续撤回棋子的数量只能为一颗。所以，在网页版五子棋中，包含了选棋、下棋顺序、对弈、悔棋和赢棋这五个主要功能3。具体设计如图3-1所示。图3-1 游戏功能设计图3.2 界面设计作为网页游戏，既然是在页面呈现，自然需要对html页面进行加工，加工必要的方法便是css。整个五子棋游戏背景

7、采用黑色为主调，因为黑色不会占用多少视觉的关注，玩家眼中除了棋盘不会觉得看到太多障碍物。棋盘使用了标准的木质结构的色调背景图，符合现实中的五子棋棋盘。涉及的相关功能的选项根据其内容，使用不同色调的背景凸显，使得整个界面色彩不会显得太过单一4-5。3.3 页面布局由于本次设计主要以下棋为主，所以主要的棋盘会在整个页面中心位置，而相关的功能按钮和提示等内容会以依附的形式附着于棋盘左右的边线上。3.3.1 棋盘绘制五子棋棋盘的绘制过程就是在白纸上画网格。就像平时在没有充足材料的情况下玩儿下棋游戏一样，需要用笔在画纸上画出一条一条的交叉线，错落成一个又一个的小格子。而在网页中，canvas就模拟了这个

8、过程。由于五子棋的基础材料要求与围棋一样，只是下法不同，所以模拟棋盘依旧是以木质材料为主。遵照标准的五子棋盘15*15绘制。以进30像素为一格，使用canvas绘制线条方法，绘制15条横线，15条竖线，最终组成一格完整的棋盘6。效果如图3-2所示。图3-2 棋盘界面图部分功能详解： 1、棋盘绘制的部分代码for（var i=0;i15;i+） context.beginPath（）; context.moveTo（40,i*30+40）; context.lineTo（460,i*30+40）; context.stroke（）; context.closePath（）;/棋盘竖线 conte

9、xt.moveTo（i*30+40,40）; context.lineTo（i*30+40,460）;2、涉及部分canvas自带的属性方法如表3-1所示。表3.1 canvas的属性方法及其应用对应表方法/属性名作用moveTo（）创建一条路径的起始位置lineTo（）创建一条路径的结束位置stroke（）绘制moveTo（）和lineTo（）方法定义的路径3.3.2 棋子绘制五子棋的棋子由黑白两色构成，纯黑的棋子或者纯白色的棋子都会缺乏立体感，显得生硬。所以采用渐变达到反光的效果使得棋子更有质感7。由于棋盘的间隔是30像素，所有棋子的半径不能大于15个像素，也不能等于15个像素，两个棋子之

10、间也应保持距离，在此游戏中，棋子以13个像素为半径绘制，具体效果如图33所示。图33 棋子形状图Canvas棋子效果主要代码如下：/画棋子function drawChessman（x,y,color,ctx） ctx.beginPath（）; ctx.arc（x*30+40,y*30+40,13,0,2*Math.PI）; var grd=context.createRadialGradient（x*30+40,y*30+40,13,x*30+40,y*30+40,0）; if（color） grd.addColorStop（0,#0A0A0A）; grd.addColorStop（1,#6

11、36766 else#D1D1D1#F9F9F9 ctx.fillStyle=grd; ctx.fill（）; chessmenxy=1;以上涉及的canvas方法、属性如表3-2所示：表3.2 canvas方法属性表arc（）创建弧/曲线createRadialGradient（）创建放射状/圆形渐变对象addColorStop（）规定gradient对象中的颜色和位置fillStyle设置或返回用于填充绘画的颜色、渐变或模式fill（）填充当前的图像（路径）3.3.3 功能选项既然是五子棋游戏，必然是以游戏为主，所以棋盘会占据正中间最大的空间，其它的功能选项，包括选棋、提示、游戏开始按钮、

12、撤回、重新开始都选择了以小方框的形式依附于棋盘左侧，不会显得游戏界面杂乱无章，相对来说紧凑而整洁。具体效果如图3-4所示。图3-4 游戏界面图 由于采用小方框依附的方式，整个方框不能过大，包含的内容必然不能过多，所以部分小方框以标题的形式出现，而具体内容会隐藏在棋盘之下。若要显示其包含的内容，只需移入鼠标，会以滑动的方式显示出来。这个小功能用css及css3就能实现。具体效果如图3-5所示。图3-5 选棋功能效果图在本次五子棋游戏中设有两个提示框，一个红色的提示框提示五子棋规则中的黑子先行。如图3-6所示。还有一个是隐藏的提示框，位于棋盘的右上角的位置，只有在点击步骤不规范，或者悔棋的时候出现。并且根据玩家的点击情况，会有不同的提示内容。如果在没有选棋的情况下点击棋盘，会出现“请选择棋子并点击开始游戏”的字样；在选择了棋子但是没有点击开始游戏的情况下点击棋盘，会出现“请点击开始游戏”的字样；在点击悔棋的情况下会出现“