模塊C-正式題6.23

1、第 46 屆世界技能大賽武漢市選拔賽網(wǎng)站設(shè)計(jì)與開發(fā)賽項(xiàng)模塊C 前端游戲UI及功能實(shí)現(xiàn)第46屆世界技能大賽網(wǎng)站設(shè)計(jì)與開發(fā)項(xiàng)目武漢市選拔賽組委會二零一九年 五月Version: 2.0Date:2019.6.2110 of 10參賽須知一、選手須憑本人身份證原件（或帶照片的社會保障卡、公安局核發(fā)的機(jī)動車駕駛證、初中職學(xué)校在校生學(xué)生學(xué)生證等有效證件原件）進(jìn)入賽場，證件個(gè)人信息須與報(bào)名信息一致，否則不得參加比賽。（以上證件復(fù)印件無效）二、選手參加考試，遲到三十分鐘以上不得入場。三、選手應(yīng)愛護(hù)賽場設(shè)施設(shè)備，操作規(guī)范，注意安全。違反安全操作規(guī)定造成的損失由考生負(fù)責(zé)。四、選手在比賽中嚴(yán)禁使用各類通訊工具。五

2、、選手必須嚴(yán)格遵守考場有關(guān)規(guī)定，嚴(yán)禁作弊或代考，自覺服從裁判長、裁判員、考場工作人員的管理。六、選手著裝、用品等在外觀上不應(yīng)顯示選手所在單位等個(gè)人信息。七、選手參加比賽，應(yīng)穿戴整潔，衣冠不端者不可入內(nèi)。八、禁止在競賽期間對賽場設(shè)施、設(shè)備、賽項(xiàng)題目或項(xiàng)目的其他組成部分進(jìn)行攝影、攝像。九、本項(xiàng)目沒有特別安全規(guī)定，請注意賽場的用電安全。非賽場管理人員未經(jīng)允許，不能隨意接拉電源和用電設(shè)備。十、技能競賽場地禁止使用的材料和設(shè)備： 額外的軟件。 平板電腦。 存儲盤（數(shù)據(jù)存儲設(shè)備）。 不能使用任何非賽方提供的內(nèi)置存儲功能的設(shè)備。十一、賽場監(jiān)考工作人員有權(quán)禁止選手在比賽中智能穿戴設(shè)備的使用。比賽注意事項(xiàng)1.選

3、手在上交時(shí)，通過FTP上交作品，并自行檢查是否上傳成功。2.選手提前離場時(shí)，需舉手示意，監(jiān)考裁判記錄選手離場時(shí)間。3.比賽時(shí)間結(jié)束時(shí)，所有選手必須停止手上的所有操作。4.超過規(guī)定時(shí)間后完成的內(nèi)容將不予評分。模塊C 前端游戲UI及功能實(shí)現(xiàn)比賽時(shí)間：180 分鐘一、任務(wù)描述近年來，互聯(lián)網(wǎng)已成為我們?nèi)粘Ｉ钪胁豢苫蛉钡牟糠郑ヂ?lián)網(wǎng)信息傳播內(nèi)容呈現(xiàn)海量性且具有互動性。游戲在日常生活中扮演著主要角色，讓無數(shù)的人們能夠快速免費(fèi)獲取快樂。二、具體任務(wù)你的任務(wù)是在常用瀏覽器網(wǎng)頁中開發(fā)一款小游戲來展示W(wǎng)eb設(shè)計(jì)和開發(fā)的能力。這款小游戲被稱為“星球大戰(zhàn)”。開發(fā)這款游戲?qū)婕暗绞褂肏TML和CSS布局以及客戶端編

4、程（JavaScript和開源庫）來實(shí)現(xiàn)游戲功能。提供的媒體文件在一個(gè)壓縮包中。你可以為這款游戲創(chuàng)建新的媒體，也可以對其進(jìn)行任何修改。游戲?qū)⒃谄桨咫娔X（分辨率為1024768像素（寬x高）上進(jìn)行開發(fā)。如果電腦屏幕較大，游戲必須放置在屏幕中心位置（水平和垂直方向）。三、UI設(shè)計(jì)和布局要求（1）星球大戰(zhàn)游戲使用元素要求如下： 玩家飛船：由用戶控制。 行星：從右邊移到左邊模擬飛機(jī)在空中移動的現(xiàn)象。 隕石：飛機(jī)需要閃避的元素。 能量：飛機(jī)需要收集能量來增加能量槽。 能量槽：顯示有多少能量。 敵方飛船：飛機(jī)需要閃避的元素。 友方飛船：飛機(jī)需要閃避的元素。 分?jǐn)?shù)計(jì)數(shù)器：顯示游戲分?jǐn)?shù)。 計(jì)時(shí)器：顯示游戲已進(jìn)

5、行時(shí)間。 聲音按鈕：開啟和取消游戲聲音。 字體大小按鈕：通過按鈕來控制字體的增大和減小。 暫停/繼續(xù)按鈕：通過按鈕暫停/繼續(xù)游戲。 logo：在游戲中添加logo。 （2）游戲界面布局：該設(shè)計(jì)內(nèi)容必須包括以下元素：logo，飛船，行星，能量，能量槽，分?jǐn)?shù)計(jì)數(shù)器，計(jì)時(shí)器，聲音按鈕，字體大小按鈕，暫停/繼續(xù)按鈕。（3）排行榜呈現(xiàn)方式：該設(shè)計(jì)內(nèi)容必須包括呈現(xiàn)游戲logo，并以排名、姓名、分?jǐn)?shù)和時(shí)間的順序進(jìn)行排列，“Start Game(游戲開始)”按鈕與排行榜同時(shí)出現(xiàn)。（4）游戲說明：窗口提供游戲說明和“Start Game(游戲開始)”按鈕，游戲說明包含在媒體文件中, 游戲說明必須以動畫形式呈現(xiàn)。

6、游戲說明和“Start Game(游戲開始)”按鈕。游戲說明必須以動畫形式呈現(xiàn)。（5）所有按鈕必須有活動和懸停效果，懸停狀態(tài)下的按鈕背景必須是#f39c12. 活動狀態(tài)必須按照波紋示例，波紋示例在媒體文件中提供。（6）HTML和CSS有效代碼必須遵從W3C標(biāo)準(zhǔn)中提供的HTML5和CSS3規(guī)則。四、游戲邏輯任務(wù)要求（1）在初始屏幕上按下“Start Game(游戲開始)”按鈕，游戲開始，飛船開始以動畫的方式飛行，行星從右邊移到左邊模擬飛機(jī)在空中移動的現(xiàn)象，游戲計(jì)時(shí)器開始啟動并顯示游戲進(jìn)行時(shí)間，能量槽以每秒一個(gè)點(diǎn)開始減少。游戲開始時(shí)，有10點(diǎn)能量可供玩家飛船飛行10秒。能量最大容量為30個(gè)點(diǎn)（飛行

7、30秒）。（2）用戶可使用方向鍵移動飛船，左方向鍵使飛船向左邊移動，右方向鍵使飛船向右移動，上方向鍵使飛船向上移動，下方向鍵使飛船向下移動。飛船在游戲屏幕上有效區(qū)域內(nèi)才可以飛行。飛船不能在任何方向離開游戲屏幕。（3）游戲期間，玩家飛船需要避開敵方飛船和友方飛船。如果玩家飛船碰撞到其他飛船或隕石，能量減少10個(gè)點(diǎn)，其他飛船或隕石以動畫的形式被摧毀。其他飛船、隕石、行星以動畫的形式隨機(jī)出現(xiàn)，從右向左移動。飛船應(yīng)該總能避開除行星之外的所有物體（例如，不會出現(xiàn)聚集成墻的隕石或飛船導(dǎo)致玩家飛船無法飛行）（4）飛行期間，飛船需要收集空中降落的能量。每收集一個(gè)能量，能量槽即可增加10個(gè)點(diǎn)（飛行10秒）。玩家

8、飛船和敵方飛船可以發(fā)射子彈，玩家按下空格鍵發(fā)射子彈（每接一下空格發(fā)射一顆子彈，按住空格不可連發(fā)），敵方飛船自動發(fā)射子彈，敵方子彈擊中玩家，能量槽減少 5點(diǎn)能量，玩家子彈擊中敵方飛船可將之摧毀，游戲分?jǐn)?shù)并增加10分；玩家子彈擊中并摧毀友方飛船，游戲分?jǐn)?shù)減少10分，玩家子彈摧毀隕石，游戲分?jǐn)?shù)增加10分，隕石需要玩家子彈擊中三次才能被摧毀。分?jǐn)?shù)計(jì)數(shù)器初始值為0。（5）能量以動畫的形式在空中自由降落（從屏幕頂部開始出現(xiàn)）。（6）游戲期間，用戶可以點(diǎn)擊暫停按鈕或者字母p鍵來暫停游戲。當(dāng)游戲暫停了，所有的動作和聲音都必須停止。如果用戶可以再次點(diǎn)擊暫停按鈕或者字母p鍵，游戲繼續(xù)。（7）背景里的行星以動畫的形

9、式呈現(xiàn)，給人一種行星在移動的感覺，背景里必須包含五種不同的行星，以行星的大小及移動速度產(chǎn)生透視效果，近處的行星大移動速度快，遠(yuǎn)處的行星小移動速度慢。（8）如果能量槽為0，則游戲結(jié)束。（9）當(dāng)游戲結(jié)束時(shí)，動畫和游戲計(jì)時(shí)器停止，游戲?qū)⑹占痷sername(用戶名稱)到網(wǎng)頁窗口中。用戶填寫網(wǎng)頁表單，然后點(diǎn)擊“continue(繼續(xù))”按鈕?！癱ontinue(繼續(xù))”按鈕在用戶填寫網(wǎng)頁表單后可用，否則失效。（10）游戲提供用戶排名及“Start Game(游戲開始)”按鈕，點(diǎn)擊按鈕即可重新開始游戲。（11）排名順序按照獲得的游戲分?jǐn)?shù)和游戲時(shí)間進(jìn)行降序排列。如果多個(gè)用戶擁有相同的游戲分?jǐn)?shù)和游戲時(shí)間，他

10、們名次相同。（12）為了增加游戲的互動性，使用以下音效： background.mp3:飛行時(shí)的背景音樂 hit.mp3:玩家飛船撞擊其他物體時(shí)播放 star.mp3:玩家飛船獲取能量時(shí)播放 finish.mp3:能量槽為0時(shí)播放（游戲結(jié)束） destroyed.mp3:物體被摧毀時(shí)播放 shoot.mp3:玩家發(fā)射子彈時(shí)播放（13）發(fā)揮你的天賦來增強(qiáng)游戲娛樂性，盡可能給用戶提供較好的體驗(yàn)。（14）為了促進(jìn)游戲可操作性，游戲字體大小可實(shí)現(xiàn)增大或減小的操作（包括游戲時(shí)間、分?jǐn)?shù)計(jì)數(shù)器、能量槽和排行榜）（15）游戲聲音可以禁止或者開啟。如果聲音被禁止，所有聲音都應(yīng)該消失。如果聲音開啟，所有聲音都應(yīng)該

11、播放。（16）游戲正常運(yùn)行時(shí)，瀏覽器控制臺中不可以出現(xiàn)JavaScript錯誤和信息。（17）HTML/CSS 和JavaScript 代碼要求整潔，便于維護(hù)，且使用正確的縮進(jìn)和有效注釋，各注釋不能少于5條。（18）使用谷歌瀏覽器和火狐瀏覽器游戲都可以正常運(yùn)行。谷歌瀏覽器來檢驗(yàn)游戲需求，火狐瀏覽器來檢查游戲兼容性。五、FTP提交(1). 媒體文件在壓縮包中。你可以修改提供的文件，也可以創(chuàng)建新的媒體文件，來確保功能正確或改善應(yīng)用程序。如果覺得有必要你可以使用jQuery and jQuery UI組件。(2). 作品文件夾為C，確認(rèn)主頁文件是index.html。(3). 作品請先在本機(jī)上測試，最終上交通過FTP完成，并可以在服務(wù)器上正常運(yùn)行游戲。(4). 所有選手的FTP地址全部為：(5). FTP賬號已提前粘貼到各選手的操作工位電腦屏幕前，請自行輸入。(6). 將模塊C的所有文件及文件夾存到一個(gè)統(tǒng)一的文件C中，然后通過FTP上傳，并可以在服務(wù)器上進(jìn)行測試。測試地址為：/FTP賬號/C(7). 各選手作品源碼和文件夾中不得透露任何關(guān)于選手所在單位等個(gè)人信息，一經(jīng)發(fā)現(xiàn)取消比賽資格并上報(bào)上級部門。六、媒體文件說明名稱描