基于html的會(huì)飛的字游戲移動(dòng)端的設(shè)計(jì)與實(shí)現(xiàn)

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

目錄

1引言.......................................................................................................................1

1.1項(xiàng)目開發(fā)背景...........................................................................................1

1.2開發(fā)技術(shù)簡介...........................................................................................1

1.2.1HTML簡介......................................................................................1

1.2.2HTML的運(yùn)行原理..........................................................................1

1.2.3HTML頁面的組成..........................................................................2

1.3開發(fā)工具簡介............................................................................................2

1.4項(xiàng)目開發(fā)技術(shù)路線....................................................................................2

2需求分析...............................................................................................................3

2.1功能需求描述............................................................................................3

2.2非功能需求描述........................................................................................4

2.3需求用例建模...........................................................................................4

2.3.1用戶登錄的用例............................................................................5

2.3.2調(diào)查表模板的用例......5

2.3.3游戲模板的用例............................................................................7

2.3.4游客模板的用例............................................................................8

2.3.5用戶協(xié)議模板的用例......................................................................9

3系統(tǒng)概要設(shè)計(jì).....................................................................................................10

3.1系統(tǒng)設(shè)計(jì)原則..........................................................................................10

3.2系統(tǒng)框架設(shè)計(jì)..........................................................................................10

3.3系統(tǒng)功能設(shè)計(jì)..........................................................................................11

3.3.1用戶登錄模板功能設(shè)計(jì)................................................................11

3.3.2調(diào)查表模板功能設(shè)計(jì)....................................................................11

3.3.3游戲模板功能設(shè)計(jì)........................................................................11

II

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

3.3.4游客模板功能設(shè)計(jì)........................................................................12

3.3.5用戶協(xié)議模板功能設(shè)計(jì)................................................................12

4系統(tǒng)詳細(xì)設(shè)計(jì).....................................................................................................12

4.1游戲系統(tǒng)模塊設(shè)計(jì)..................................................................................12

4.1.1用戶登錄模塊說明.......................................................................13

4.1.2用戶登錄模塊詳細(xì)設(shè)計(jì)...............................................................13

4.2調(diào)查表模板設(shè)計(jì)......................................................................................15

4.2.1調(diào)查表模板說明...........................................................................15

4.2.2調(diào)查表模板詳細(xì)設(shè)計(jì)...................................................................15

4.3游戲模板設(shè)計(jì)..........................................................................................16

4.3.1游戲模板說明...............................................................................16

4.3.2游戲模板詳細(xì)設(shè)計(jì).......................................................................16

4.4游客模板設(shè)計(jì)..........................................................................................18

4.4.1游客模板說明...............................................................................18

4.4.2游客模板詳細(xì)設(shè)計(jì).......................................................................19

4.5用戶協(xié)議模板設(shè)計(jì)..................................................................................20

4.5.1用戶協(xié)議模板說明.......................................................................20

4.5.2用戶協(xié)議模板詳細(xì)設(shè)計(jì)...............................................................20

5系統(tǒng)實(shí)現(xiàn).............................................................................................................21

5.1用戶登錄模塊實(shí)現(xiàn)..................................................................................21

5.1.1用戶登錄模塊界面設(shè)計(jì)...............................................................21

5.1.2用戶登陸界面核心代碼...............................................................21

5.2調(diào)查表模板實(shí)現(xiàn)......................................................................................23

5.2.1調(diào)查表模板界面設(shè)計(jì)...................................................................23

5.2.2調(diào)查表界面核心代碼...................................................................23

5.3游戲模板實(shí)現(xiàn)..........................................................................................24

5.3.1游戲模塊界面設(shè)計(jì).....................................................................24

5.3.2游戲模塊核心代碼.....................................................................24

III

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

5.4游客模版實(shí)現(xiàn)..........................................................................................28

5.4.1游客模板界面設(shè)計(jì).......................................................................28

5.4.2游客模板核心代碼.......................................................................29

5.5用戶協(xié)議模板實(shí)現(xiàn)..................................................................................29

5.5.1用戶協(xié)議模板界面設(shè)計(jì)...............................................................29

5.5.2用戶協(xié)議模板核心代碼...............................................................29

6系統(tǒng)測(cè)試.............................................................................................................30

6.1用戶登錄功能測(cè)試.................................................................................30

6.2調(diào)查表模板功能測(cè)試..............................................................................31

6.3游戲模板功能測(cè)試..................................................................................32

6.4游客模板功能測(cè)試..................................................................................32

6.5用戶協(xié)議模板功能測(cè)試..........................................................................33

7設(shè)計(jì)小結(jié).............................................................................................................33

參考資料.................................................................................................................35

IV

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

基于HTML的會(huì)飛的字游戲移動(dòng)端的設(shè)計(jì)與

實(shí)現(xiàn)

1引言

隨著2018年的秋天，我國得到第一個(gè)關(guān)于英雄聯(lián)盟游戲比賽的勝利之后，

全世界把電子競技這個(gè)項(xiàng)目加入到了運(yùn)動(dòng)會(huì)里，變成了一項(xiàng)體育競技項(xiàng)目，從

而是的電子競技在大家的事業(yè)中出現(xiàn)，這也是使我想做游戲設(shè)計(jì)與開發(fā)的萌芽

時(shí)刻。

1.1項(xiàng)目開發(fā)背景

隨著時(shí)代的發(fā)展，信息技術(shù)、網(wǎng)頁開發(fā)技術(shù)、數(shù)據(jù)庫技術(shù)的不斷發(fā)展完善，

網(wǎng)絡(luò)進(jìn)程的加快，,游戲就是在這樣一個(gè)背景下產(chǎn)生發(fā)展起來的。伴隨著電子競

技的不斷發(fā)展，玩游戲的人員也越來越狀大，注冊(cè)用戶可以在網(wǎng)上搜索購買到自

己想要的各種游戲，初步讓人們體會(huì)到了網(wǎng)絡(luò)游戲給人們帶來那種工作之后放

松一下的途徑。我的畢業(yè)設(shè)計(jì)也就正是一個(gè)游戲的設(shè)計(jì)與開發(fā)。

1.2開發(fā)技術(shù)簡介

隨著網(wǎng)絡(luò)游戲如今的發(fā)展，是我產(chǎn)生了想要設(shè)計(jì)和開發(fā)一款屬于自己的游

戲，一開始是因?yàn)榭吹搅艘粋€(gè)實(shí)列，就是飛燕大佬一個(gè)人用8年時(shí)間做出了一

款輸入自己的游戲，然后我又去看了關(guān)于他的采訪，所以才下定決心畢業(yè)設(shè)計(jì)

選擇移動(dòng)端游戲的開發(fā)與設(shè)計(jì)。

1.2.1HTML簡介

超文本標(biāo)記語言（HyperTextMarkupLanguage），縮寫為HTML，標(biāo)準(zhǔn)通

用標(biāo)記語言下的一個(gè)應(yīng)用。HTML是一種標(biāo)記語言（markuplanguage），是網(wǎng)

頁制作所必備的工具。

1.2.2HTML的運(yùn)行原理

HTML是部署在服務(wù)器上的文本文件，根據(jù)HTTP協(xié)議，瀏覽器發(fā)出請(qǐng)求

給服務(wù)器，服務(wù)器做出響應(yīng)，給瀏覽器返回一個(gè)HTML，瀏覽器解釋執(zhí)行

1

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

HTML，從而顯示內(nèi)容

1.2.3HTML頁面的組成

<html>此元素可告知瀏覽器其自身是一個(gè)HTML文檔

<head>標(biāo)簽的內(nèi)容對(duì)用戶來說是看不見的.

<body>,所有打開頁面時(shí)我們能看見的東西,都寫在<body>中.

<script>,js引用文件

1.3開發(fā)工具簡介

HTML是用來描述網(wǎng)頁的一種語言。

HTML指的是超文本標(biāo)記語言(HyperTextMarkupLanguage)

HTML不是一種編程語言，而是一種標(biāo)記語言(markuplanguage)

標(biāo)記語言是一套標(biāo)記標(biāo)簽(markuptag)

HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁

1.4項(xiàng)目開發(fā)技術(shù)路線

前端開發(fā)是創(chuàng)建Web頁面或app等前端界面呈現(xiàn)給用戶的過程。前端開發(fā)

通過HTML，CSS及JavaScript以及衍生出來的各種技術(shù)、框架、解決方案，來

實(shí)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互。它從網(wǎng)頁制作演變而來，名稱上有很明顯的

時(shí)代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中，網(wǎng)頁制作是Web1.0時(shí)代的產(chǎn)物，早期網(wǎng)站

主要內(nèi)容都是靜態(tài)，以圖片和文字為主，用戶使用網(wǎng)站的行為也以瀏覽為主。

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展和HTML5、CSS3的應(yīng)用，現(xiàn)代網(wǎng)頁更加美觀，交互效

果顯著，功能更加強(qiáng)大。

Canvas是HTMLS中新增的用來進(jìn)行圖形圖像繪制的元素，其規(guī)范在2015

年11月發(fā)布，其提供了硬件加速機(jī)制，可以實(shí)現(xiàn)高效的繪圖功能，可以說是

HTMLS元素中功能最強(qiáng)大的一個(gè)。Canvas元素放置的頁面上，相當(dāng)于在頁面上

放置一塊“畫布”，但其只是一塊透明的區(qū)域，要對(duì)其進(jìn)行操作還需要使用Canvas

元素的繪圖環(huán)境對(duì)象，繪圖環(huán)境對(duì)象提供了全部的繪制功能，而Canvas元素本

身是繪圖對(duì)象的容器。Canvas元素有兩種繪圖環(huán)境，一種是2d繪圖環(huán)境，一種

是3d繪圖環(huán)境，目前2d繪圖環(huán)境(HTMLCanvas2dContext)標(biāo)準(zhǔn)已經(jīng)制定完成，

瀏覽器對(duì)2d繪圖環(huán)境的支持非常完善，3d繪圖環(huán)境的標(biāo)準(zhǔn)還在制定當(dāng)中，本文

采用的技術(shù)是2d繪圖環(huán)境。通過Canvas的繪圖環(huán)境提供的API可在Canvas繪

2

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖表面上進(jìn)行圖形圖像的繪制，而且可對(duì)繪制在其中的圖像進(jìn)行像素級(jí)別的操

作，可通過如下的方式獲取Canvas繪圖環(huán)境對(duì)象。

varcontext=canvasElement.getContext("2d")

獲取到Canvas的繪圖環(huán)境對(duì)象之后可通過Canvas繪圖環(huán)境對(duì)象的圖形和

圖像API進(jìn)行繪制操作，其中主要的繪制圖形圖像的API介紹如表2-1所示，

通過使用這些API，結(jié)合動(dòng)畫循環(huán)控制邏輯，可制作出動(dòng)畫，為HTMLS游戲提

供渲染支持。另外，采用Canvas進(jìn)行繪制動(dòng)畫時(shí)，無需使用雙緩沖，因?yàn)楦鞔?/p>

瀏覽器廠商在實(shí)現(xiàn)Canvas元素的時(shí)候，都采用了雙緩沖機(jī)制，所以開發(fā)者自己

手工實(shí)現(xiàn)雙緩沖反而會(huì)降低其繪制性能。

表(1-1)Canvas繪圖對(duì)象主要API

方法描述

beginPath(開始一條新路徑，并清空所有子路徑

closePath()如果當(dāng)前子路徑是打開的，則關(guān)閉它

stroke()根據(jù)繪圖屬性對(duì)所有子路徑進(jìn)行描邊

clip(設(shè)定剪輯區(qū)域

向當(dāng)前路徑中增加一條子路徑，并指定第一個(gè)點(diǎn)為

moveTo(x,y)(x,y)

如果當(dāng)前路徑中沒有子路徑，那么與moveTo方法一

lineTo(x,y)樣，否則將指定的(x,y)點(diǎn)添加進(jìn)子路徑中

dra

wlmage(image,sx,sy,sw,sh,dx,d

y,dw,dh)根據(jù)指定的參數(shù)，向canvas中繪制指定的圖像

2需求分析

2.1功能需求描述

1.避免不必要的復(fù)雜性

2.支持已有內(nèi)容

3.解決現(xiàn)實(shí)的問題

4.內(nèi)容模型

5.平穩(wěn)退化

3

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.2非功能需求描述

主要包括可靠性、安全性、可維護(hù)性、可擴(kuò)展性、可測(cè)試性等

2.3需求用例建模

圖（2-1）所用需求的用例

玩家如果有賬戶的話就輸入用戶名和密碼,如果玩家沒有賬戶的話就可以

點(diǎn)擊注冊(cè)來進(jìn)行賬號(hào)的注冊(cè),要是不想注冊(cè)的話,還能點(diǎn)擊游客登錄,當(dāng)然游客

登錄不會(huì)記錄下來,當(dāng)玩家進(jìn)入游戲界面之后就可以輸入給自己的加油詞了,然

后點(diǎn)擊屏幕開始玩游戲,玩家每通過一個(gè)障礙物屏幕上方的數(shù)字就會(huì)發(fā)生變化,

這就是玩家所通過的障礙物數(shù)量,當(dāng)玩家用完自己輸入的加油詞之后就會(huì)顯示

出游戲結(jié)束的頁面.

4

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.3.1用戶登錄的用例

圖（2-2）用戶登錄的用例

玩家通過手動(dòng)輸入用戶名和密碼老進(jìn)行登錄,當(dāng)輸入完之后就可以跳轉(zhuǎn)至

游戲界面開始玩游戲.通過對(duì)圖(2-2)用例圖的進(jìn)一步的細(xì)化分析，得到每個(gè)用

例的描述表。用戶登錄用例表如表(2-1)所示

表(2-1)用戶登錄用例描述

5

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.3.2調(diào)查表模板的用例

圖（2-3）調(diào)查表的用例

通過對(duì)圖(2-3)用例圖的進(jìn)一步的細(xì)化分析，得到每個(gè)用例的描述表。調(diào)查

表用例如表(2-2)所示

表(2-2)調(diào)查表用例描述

6

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.3.3游戲模板的用例

圖（2-4）游戲的用例

通過對(duì)圖(2-4)用例圖的進(jìn)一步的細(xì)化分析，得到每個(gè)用例的描述表。游戲

模板用例如表(2-3)所示

表(2-3)游戲模板用例描述

7

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.3.4游客模板的用例

圖（2-5）游客模板的用例

通過對(duì)圖(2-5)用例圖的進(jìn)一步的細(xì)化分析，得到每個(gè)用例的描述表。用戶

注冊(cè)用例如表(2-4)所示

表(2-4)游客登陸的用例描述

項(xiàng)目描述

用例名稱游客登陸

用例標(biāo)識(shí)號(hào)01

參與者玩家,管理員

簡要說明玩家點(diǎn)擊游玩便可以不用賬戶游玩游戲

前置條件玩家打開游客界面

基本事件流點(diǎn)擊游玩

其他事件流在點(diǎn)擊游玩之前玩家可以點(diǎn)擊關(guān)閉網(wǎng)頁

異常事件流提示錯(cuò)誤信息

后置條件進(jìn)入游戲頁面

8

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.3.5用戶協(xié)議模板的用例

圖（2-6）用戶協(xié)議模板的用例

通過對(duì)圖(2-6)用例圖的進(jìn)一步的細(xì)化分析，得到每個(gè)用例的描述表。用戶

注冊(cè)用例如表(2-5)所示

表(2-5)用戶協(xié)議模板的用例描述

項(xiàng)目描述

用例名稱用戶協(xié)議

用例標(biāo)識(shí)號(hào)01

參與者玩家,管理員

簡要說明玩家點(diǎn)擊確認(rèn)

前置條件玩家打開用戶協(xié)議界面

基本事件流點(diǎn)擊確認(rèn)

其他事件流在點(diǎn)擊確認(rèn)之前玩家可以點(diǎn)擊關(guān)閉網(wǎng)頁

異常事件流提示錯(cuò)誤信息

后置條件進(jìn)入登錄頁面

9

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

3系統(tǒng)概要設(shè)計(jì)

3.1系統(tǒng)設(shè)計(jì)原則

利用用戶輸入的詞進(jìn)行游戲,每成功經(jīng)過一個(gè)通道得一分,得分顯示再屏幕

上方,使得用戶知道自己成功的數(shù)量,直到用戶輸入的詞用完,用戶輸入的詞用完

之后就回顯示游戲結(jié)束,可以點(diǎn)擊屏幕再一次玩這個(gè)游戲.

3.2系統(tǒng)框架設(shè)計(jì)

系統(tǒng)模塊化結(jié)構(gòu)設(shè)計(jì)工作是在系統(tǒng)分析階段對(duì)子系統(tǒng)劃分的基礎(chǔ)上，在

進(jìn)一步地劃分，將它逐層的分解成多個(gè)大小相同、功能單一、具有一定獨(dú)立性

的模塊，以便程序設(shè)計(jì)工作的同時(shí)，有加強(qiáng)了數(shù)據(jù)庫之間的聯(lián)系，使系統(tǒng)更加

的完美。根據(jù)游戲的需求分析和用例建模分析，本文確定了游戲系統(tǒng)的主要功

能模塊，包括用戶登錄、、游戲模板和游客模板等。游戲系統(tǒng)的功能結(jié)構(gòu)圖如

圖3-1所示，本系統(tǒng)共有四大主要功能模塊。

圖（3-1）系統(tǒng)框架設(shè)計(jì)

10

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

3.3系統(tǒng)功能設(shè)計(jì)

3.3.1用戶登錄模板功能設(shè)計(jì)

圖（3-2）用戶登錄流程圖

表(3-1)用戶登錄相關(guān)功能描述

功能名稱用戶登錄

功能概述提供一個(gè)賬戶給用戶

輸入內(nèi)容賬號(hào)、密碼

輸出內(nèi)容跳轉(zhuǎn)至游戲頁面

用戶輸入用戶名和密碼,點(diǎn)擊登錄按鈕就可以跳轉(zhuǎn)至游戲界面進(jìn)行游戲

3.3.2調(diào)查表模板功能設(shè)計(jì)

用戶填寫調(diào)查表的問題,然后點(diǎn)擊提交之后就會(huì)跳轉(zhuǎn)至登陸頁面

表(3-2)調(diào)查表頁面相關(guān)功能描述

功能名稱調(diào)查表

功能概述提供一個(gè)調(diào)查表給用戶

輸入內(nèi)容用戶對(duì)游戲的評(píng)價(jià)

輸出內(nèi)容跳轉(zhuǎn)至登陸界面

3.3.3游戲模板功能設(shè)計(jì)

表(3-3)游戲相關(guān)功能描述

功能名稱游戲界面

功能概述提供一個(gè)供用戶游玩的游戲界面

11

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

輸入內(nèi)容加油詞

系統(tǒng)處理每成功越過一個(gè)障礙物得一分

輸出內(nèi)容得分，游戲結(jié)束

初始界面的設(shè)計(jì),提高畫面的審美,多一點(diǎn)細(xì)節(jié),反正看起來舒服就行了,設(shè)計(jì)

每次點(diǎn)屏幕所動(dòng)的角度和頻率.寫出得分代碼和界面的大小.

設(shè)置碰撞多少此之后游戲結(jié)束,做一下字體背景的一些優(yōu)化,優(yōu)化一下上下

管子中間的距離,優(yōu)化頂管與底管,設(shè)置出藍(lán)天,白云,房子和樹,還需要設(shè)計(jì)一下地

面的效果,和顏色.最后設(shè)計(jì)一下對(duì)角圖形,上邊框,下邊框,中間的風(fēng)景,和背光處.

3.3.4游客模板功能設(shè)計(jì)

表(3-4)游客頁面相關(guān)功能描述

功能名稱游客游玩

功能概述為用戶提供免費(fèi)游玩

輸出內(nèi)容游戲界面

這個(gè)木塊的設(shè)計(jì)主要就是設(shè)置給沒有賬戶的玩家開辟的一個(gè)快捷通道,可以

直接跳轉(zhuǎn)至游戲頁面進(jìn)行游戲

3.3.5用戶協(xié)議模板功能設(shè)計(jì)

表(3-5)用戶協(xié)議模板相關(guān)功能描述

功能名稱用戶協(xié)議

功能概述提供一個(gè)用戶協(xié)議給用戶

輸入內(nèi)容點(diǎn)擊確認(rèn)

輸出內(nèi)容跳轉(zhuǎn)至登陸界面

4系統(tǒng)詳細(xì)設(shè)計(jì)

4.1游戲系統(tǒng)模塊設(shè)計(jì)

4.1.1用戶登錄模塊說明

這個(gè)頁面主要是給有賬戶的玩家提供一個(gè)登錄的頁面,這個(gè)頁面暫時(shí)還沒有

12

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

完善好

4.1.2用戶登錄模塊詳細(xì)設(shè)計(jì)

使用UML序列圖對(duì)需求分析中各子功能的用例進(jìn)行分析與設(shè)計(jì)以下圖(4-1)

為用戶登錄板塊的時(shí)序圖.

圖(4-1)用戶登錄模板的時(shí)序圖

13

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖(4-2)用戶登錄系統(tǒng)的類圖

表(4-1)用戶登錄板塊相關(guān)類及方法描述表

類名id

描述用戶名

屬性key

方法獲取玩家所輸入的用戶名

類名password

描述密碼

屬性key

方法獲取玩家所輸入的密碼

14

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

4.2調(diào)查表模板設(shè)計(jì)

4.2.1調(diào)查表模板說明

主要給玩家提供一個(gè)反饋建議的界面,玩家在游玩之后可以評(píng)價(jià)一下游戲或

者給我們一些建議.

4.2.2調(diào)查表模板詳細(xì)設(shè)計(jì)

圖4-3調(diào)查表模板的類圖

表(4-2)調(diào)查表模板相關(guān)類及方法描述表

類名id

描述用戶名

屬性key

方法獲取玩家所輸入的用戶名

類名password

描述密碼

15

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

屬性key

方法獲取玩家所輸入的密碼

4.3游戲模板設(shè)計(jì)

4.3.1游戲模板說明

給用戶提供一個(gè)游戲面板,輸入加油詞之后點(diǎn)擊屏幕就可以開始游戲,根據(jù)

用戶輸入的用戶詞來決定用戶所能失誤的次數(shù),當(dāng)用戶把自己的加油詞用光時(shí)就

是游戲結(jié)束之時(shí),當(dāng)然用戶每通過一個(gè)障礙物屏幕上方的得分就會(huì)發(fā)生變化.

4.3.2游戲模板詳細(xì)設(shè)計(jì)

使用UML序列圖對(duì)需求分析中各子功能的用例進(jìn)行分析與設(shè)計(jì)以下圖4-4

為游戲設(shè)計(jì)板塊的時(shí)序圖.

圖(4-4)游戲界面功能的時(shí)序圖

16

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖(4-5)游戲系統(tǒng)的類圖

表(4-3)游戲板塊相關(guān)類及方法描述表

類名id

描述用戶名

屬性key

方法獲取玩家的用戶名

類名password

描述密碼

屬性key

方法獲取玩家的密碼

類名Fraction

描述得分

屬性

方法玩家通過的障礙物的數(shù)量

17

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖(4-6)游戲系統(tǒng)的流程圖

4.4游客模板設(shè)計(jì)

4.4.1游客模板說明

游客登錄功能：游客登錄是指用戶可以選擇以游客身份登錄游戲，而無需

進(jìn)行賬號(hào)注冊(cè)。在登錄頁面，用戶可以選擇游客登錄選項(xiàng)，然后直接進(jìn)入游戲。

游客登錄不需要用戶提供個(gè)人信息，不涉及賬號(hào)的創(chuàng)建和密碼的設(shè)置。

游客登錄的主要目的是為了提供一種便捷的登錄方式，讓用戶能夠快速進(jìn)

入游戲，盡快體驗(yàn)游戲的樂趣。游客登錄適用于那些不想花費(fèi)時(shí)間填寫注冊(cè)信

息或暫時(shí)不需要個(gè)人化功能的用戶。游客登錄允許用戶在匿名狀態(tài)下進(jìn)行游戲，

玩家可以享受游戲的基本功能，但不具備數(shù)據(jù)的保存和同步等個(gè)性化功能。

18

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

游客登錄功能在某些情況下具有一定的優(yōu)勢(shì)，例如對(duì)于首次接觸游戲的用

戶，他們可以通過游客登錄快速了解游戲內(nèi)容，決定是否要進(jìn)行注冊(cè)和創(chuàng)建個(gè)

人賬號(hào)。此外，游客登錄也為用戶提供了一種隱私保護(hù)的方式，因?yàn)樗恍枰?/p>

用戶提供個(gè)人信息。

需要注意的是，游客登錄通常具有一定的限制和局限性，如無法保存游戲

進(jìn)度和個(gè)人數(shù)據(jù)，無法參與排行榜等。因此，游客登錄通常被視為一種臨時(shí)的

登錄方式，而建議用戶在長期使用游戲時(shí)進(jìn)行賬號(hào)注冊(cè)，以獲得更多的功能和

個(gè)人化服務(wù)。

4.4.2游客模板詳細(xì)設(shè)計(jì)

圖(4-7)游客登陸板塊的類圖

表(4-4)游客登陸板塊相關(guān)類及方法描述表

類名id

描述游客id

屬性

方法玩家使用游客身份進(jìn)入

19

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

4.5用戶協(xié)議模板設(shè)計(jì)

4.5.1用戶協(xié)議模板說明

主要給玩家提供一個(gè)用戶協(xié)議的界面,玩家在游玩之前可以閱讀一下需要注

意的用戶協(xié)議.

4.5.2用戶協(xié)議模板詳細(xì)設(shè)計(jì)

圖(4-8)用戶協(xié)議模板的類圖

表(4-5)用戶協(xié)議板塊相關(guān)類及方法描述表

類名id

描述用戶名

屬性key

方法

類名password

描述密碼

屬性key

方法

20

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

5系統(tǒng)實(shí)現(xiàn)

5.1用戶登錄模塊實(shí)現(xiàn)

5.1.1用戶登錄模塊界面設(shè)計(jì)

圖(5-1)用戶登錄界面

5.1.2用戶登陸界面核心代碼

步驟1:用戶登錄界面設(shè)計(jì)

<divclass="pass">

<p>會(huì)飛的字</p>

<spanstyle="display:flex">用戶名:</span>

<inputstyle="display:flex;"type="text"placeholder="請(qǐng)輸入用戶名">

<spanstyle="display:flex">密碼:</span>

<inputstyle="display:flex;margin-top:3px;"type="text"

21

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

placeholder="請(qǐng)輸入密碼">

<ahref="zhuce.html">快速注冊(cè)</a>

<ahref="yk.html"style="margin-left:20px;">游客登陸</a>

<ahref="index.html"><buttonclass="btn">登錄</button></a>

</div>

<divclass="mid">

<p>ps:請(qǐng)輸入正確的用戶名和密碼</p>

<p>要注意游戲時(shí)間，不要沉迷于游戲</p>

<p>要注意游戲費(fèi)用，不要貪圖快樂</p>

<p>當(dāng)然本游戲沒有消費(fèi)渠道,嘿嘿!</p>

</div>

步驟2:css文件設(shè)置樣式

html{font-size:32vw;

background:linear-gradient(totop,yellow,green),no-repeat;

height:100%;}

.pass{font-size:14px;margin:0auto;width:1.7rem;height:1.55rem;

margin-top:200px;margin-left:100px;text-align:center;

}

p{text-align:center;font-size:20px;font-style:oblique;color:skyblue;}

a{text-decoration:none;}

button{margin-top:20px;margin-left:10px;}

.btn{color:green;background-color:yellow;transition:color1s}

.btn:hover{color:yellow;background-color:green;}

.mid{margin-top:50px;text-align:center;}

.midp{font-size:15px;color:red;}

22

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

5.2調(diào)查表模板實(shí)現(xiàn)

5.2.1調(diào)查表模板界面設(shè)計(jì)

圖(5-2)調(diào)查表界面

5.2.2調(diào)查表界面核心代碼

步驟1:調(diào)查表界面設(shè)計(jì)

<div>

<p>用戶調(diào)查表</p>

</div>

<div>

<p>1.請(qǐng)問這款游戲是不是你喜歡的類型的游戲?</p>

<p>

<inputtype="checkbox">

是我喜歡的類型

<inputtype="checkbox">

不是我喜歡的類型

</p>

23

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

</div>

步驟2:css文件設(shè)置樣式

.wb{width:300px;height:150px;}

.tj{width:100px;margin-top:10px;}

5.3游戲模板實(shí)現(xiàn)

5.3.1游戲模塊界面設(shè)計(jì)

圖(5-3)游戲界面

5.3.2游戲模塊核心代碼

該模塊主要任務(wù)是加入游戲開始，核心代碼如下：

#進(jìn)入開始voidDrawMa

#輸入加油spanid="textInputSpan"}

#橫向坐標(biāo)j=(x+intervall2)/interval;

#縱向坐標(biāo)i=行+intervall2)/interval;}

//演示設(shè)置的常規(guī)屬性varcanvasContainer;

//畫布文本屬性varword="SAKRI";}

//管子碰撞if(!isHit&&checkTubesCollision()){

//游戲結(jié)束gameState=GAME_OVER;}

24

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

步驟1：開始的界面設(shè)計(jì)

<divid="canvasContainer"></div>

<spanid="textInputSpan">

輸入你的加油詞:

<inputid="textInput"maxlength="10"type="text"width="150"/>

<buttononclick="changeText()">走你!</button>

</span>

<scriptsrc="js/index.js"></script>

步驟2：定義一個(gè)函數(shù)

圖(5-4)游戲得分界面

(function(window){

varSakri=window.Sakri||{};

window.Sakri=window.Sakri||Sakri;

Sakri.MathUtil={};

//用于度的弧度和度的弧度

Sakri.MathUtil.PI_180=Math.PI/180;

25

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

Sakri.MathUtil.ONE80_PI=180/Math.PI;

//預(yù)計(jì)算弧度為90、270和360的值

Sakri.MathUtil.PI2=Math.PI*2;

Sakri.MathUtil.HALF_PI=Math.PI/2;

//返回介于1和0之間的數(shù)字

Sakri.MathUtil.normalize=function(value,minimum,maximum){

return(value-minimum)/(maximum-minimum);

};

//將歸一化數(shù)字映射到值

Sakri.MathUerpolate=function(normValue,minimum,maximum){

returnminimum+(maximum-minimum)*normValue;

};

//將一個(gè)值從一個(gè)集合映射到另一個(gè)集合

Sakri.MathUtil.map=function(value,min1,max1,min2,max2){

returnSakri.MathUerpolate(Sakri.MathUtil.normalize(value,min1,

max1),min2,max2);

};

Sakri.MathUtil.getRandomNumberInRange=function(min,max){

returnmin+Math.random()*(max-min);

};

Sakri.MathUtil.getRandomIntegerInRange=function(min,max){

returnMath.round(Sakri.MathUtil.getRandomNumberInRange(min,

max));

};

}(window));

步驟3:設(shè)置特定屬性

26

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖(5-5)游戲運(yùn)行界面

functionstartDemo(){

canvas.addEventListener('touchstart',handleUserTap,false);

canvas.addEventListener('mousedown',handleUserTap,false);

varlogoText="會(huì)飛的字";

if(!logoCanvas){

logoCanvas=document.createElement("canvas");

logoCanvasBG=document.createElement("canvas");

}

createLogo("會(huì)飛的字",logoCanvas,logoCanvasBG);

if(!gameOverCanvas){

gameOverCanvas=document.createElement("canvas");

gameOverCanvasBG=document.createElement("canvas");

}

createLogo("游戲結(jié)束",gameOverCanvas,gameOverCanvasBG);

createGr