山東省技能大賽青島選拔賽-世賽選拔項目46樣題（網(wǎng)站技術(shù)）

CLIENT_SIDEClientSide

Submittedby:競賽樣卷競賽樣卷注意：樣題與最終比賽試題相似但不相同。比賽時間：240分鐘介紹：近年來，互聯(lián)網(wǎng)已成為我們?nèi)粘Ｉ钪胁豢苫蛉钡囊徊糠郑剐畔⒌膫鞑コ蔀槿≈槐M的內(nèi)容和互動的來源。每天，游戲的使用都在這個宇宙中占據(jù)了突出的地位，使數(shù)百萬人能夠快速而免費地獲得樂趣和娛樂?？紤]到這些概念，您決定開發(fā)一個小游戲，它可以在最常見的Web瀏覽器上運行，并使您有可能在網(wǎng)頁設(shè)計和開發(fā)技能上傳播您的才華。這場比賽將被稱為星球大戰(zhàn)。您應(yīng)該設(shè)計游戲，使用HTML和CSS開發(fā)布局，并使用JavaScript及其開源庫開發(fā)客戶端編程。有些媒體文件以壓縮文件的形式提供給您。如果需要，您可以創(chuàng)建更多介質(zhì)并修改介質(zhì)中的任何內(nèi)容。要在不同的分辨率下使用，您的游戲需要開發(fā)為960x600像素的平板電腦分辨率。但是，如果游戲是在大屏幕上打開的，游戲必須位于屏幕的中央(水平和垂直)。項目和模塊的描述《StarBattle》游戲使用的元素如下：Mainspaceship（玩家飛船）:由玩家控制的元素。Planetsinbackground（背景中的行星）:從右向左移動的元素，給人以宇宙飛船在太空中移動的印象。Enemyspaceships（敵方宇宙飛船）:玩家需要摧毀才能獲得分?jǐn)?shù)的元素。Asteroids（小行星）:玩家需要摧毀才能獲得分?jǐn)?shù)的元素。Friendlyspaceships（友方宇宙飛船）:玩家不應(yīng)破壞的元素，否則玩家將失去分?jǐn)?shù)。Fuelicon（燃料圖標(biāo)）:玩家需要收集以增加燃料等級的元素。FuelCounter（燃料計數(shù)器）:顯示可用燃料數(shù)量的元素。它必須是一個數(shù)字和圖形元素，它應(yīng)該是動畫時，燃料減少，當(dāng)用戶獲得更多的燃料。ScoreCounter（得分計數(shù)器）:顯示用戶摧毀小行星和敵方宇宙飛船得到多少分的元素。Timer（計時器）:表示宇宙飛船飛行時間的元素。SoundButton（聲音按鈕）:啟用和禁用游戲中聲音的元素。FontSizeButtons（字體大小按鈕）:增加和減小字體大小的元素。Pause/Continuebutton（暫停/繼續(xù)按鈕）:暫停/繼續(xù)游戲按鈕。Logo:在游戲中添加提供的LOGO。Shot（射擊）:飛船射擊的子彈。布局：必須包含三個界面，并且：GameInstructions（游戲說明）:游戲的第一個界面顯示給用戶的說明和“StartGame”按鈕。游戲說明包含在媒體文件中Gameboardlayout（游戲板布局）:該設(shè)計必須在游戲屏幕上呈現(xiàn)上述所有14個元素。RankingTablepresentation（排名表展示）:本設(shè)計必須展示游戲和排名的標(biāo)志，按位置、名稱、分?jǐn)?shù)和時間的順序排列，并在表格上顯示“StartGame”按鈕。開發(fā)游戲應(yīng)用程序的初始標(biāo)記(HTML+CSS)。當(dāng)訪問應(yīng)用程序時，游戲被呈現(xiàn)給用戶，并帶有游戲指令和按鈕“StartGame”。這些說明必須以動畫的方式呈現(xiàn)。“StartGame”按鈕必須有活動和懸停效果。處于懸停狀態(tài)的按鈕的背景必須為：#f19e0d?；顒訝顟B(tài)必須遵循媒體文件中提供的名為漣漪的示例。您應(yīng)該將下面描述的元素繪制為包含在您的游戲中。創(chuàng)建表示相同視覺樣式的元素。Mainspaceship(controlledbyplayer)主宇宙飛船(由玩家控制)TimerIcon計時器圖標(biāo)Soundbutton聲音按鈕Fontsizebuttons字體大小按鈕Pause/continuebutton暫停/繼續(xù)按鈕Fuelcounter燃料計數(shù)器Fuelicon燃料圖標(biāo)在適用于HTML5和CSS3規(guī)則的W3C標(biāo)準(zhǔn)中，HTML和CSS代碼必須是有效的。游戲功能:按下初始畫面中的“StartGame”按鈕，開始游戲。行星應(yīng)該是動畫的，從右到左移動，以給人一種宇宙飛船在太空中移動的印象。計時器從零開始，以秒為單位顯示宇宙飛船移動的時間。燃料計數(shù)器開始遞減，每秒1分。比賽開始時，有15分燃料(15秒)。燃料的最大容量為30分(飛行30秒)。比分從零開始。當(dāng)用戶按下空格鍵時，飛船就會開火，用戶不能一直按空格鍵連續(xù)多次射擊，即每次按空格鍵只能射擊一次。主飛船的射擊只能摧毀一個目標(biāo)。射擊不能穿過一個目標(biāo)并擊中其他元素。用戶可以使用箭頭鍵事件在屏幕上移動飛船。向上箭頭鍵將主宇宙飛船向上移動。向下箭頭鍵將主宇宙飛船向下移動。向左箭頭鍵將主宇宙飛船向左移動，向右箭頭鍵將主宇宙飛船向右移動。不可能把宇宙飛船從屏幕上飛走。在飛行過程中，飛船需要摧毀出現(xiàn)在太空中的敵方飛船和小行星。如果宇宙飛船與小行星元素或宇宙飛船元素相撞，該元素將被摧毀，燃料必須減少15分。宇宙飛船和小行星需要呈現(xiàn)在任意位置，并以動畫的方式從右向左飛行。敵方宇宙飛船必須射擊(從右到左)。玩家飛船必須躲避這些子彈；否則被子彈擊中，燃料計數(shù)器應(yīng)該減少15分。敵人的宇宙飛船一發(fā)子彈擊毀。每摧毀一艘敵方宇宙飛船，分?jǐn)?shù)增加5分。如果用戶摧毀一艘友方飛船，則分?jǐn)?shù)減少10分。這個游戲允許負(fù)分。小行星必須用兩發(fā)子彈摧毀。摧毀每一顆小行星，分?jǐn)?shù)增加10分。在飛行過程中，主飛船需要收集燃料。燃料應(yīng)該以動畫的方式從屏幕頂部隨機水平放置。每收集一個燃料，燃料計數(shù)器就會增加15個點。一點燃料相當(dāng)于1秒的飛行時間。在飛行過程中，用戶可以通過點擊暫停按鈕或按鍵盤上的字母“p”來暫停游戲。暫停游戲時，必須停止所有交互和聲音。如果用戶再次單擊暫停按鈕，或再次按下字母“p”，游戲?qū)臅和５哪且豢涕_始繼續(xù)。背景中的行星需要呈現(xiàn)動畫，才能給人以運動的感覺。行星必須以不同的速度運動，較大的行星必須比較小的行星運動得更快，從而產(chǎn)生視差效應(yīng)。在背景中包括至少5個不同大小的行星。如果燃料計數(shù)器達(dá)到零，游戲就結(jié)束了。當(dāng)游戲結(jié)束時，動畫、聲音、交互和計時器計數(shù)器停止，游戲?qū)⒃诒韱斡颉癗ame”中收集用戶的名字。用戶填寫“Name”字段，然后點擊按鈕“Continue”。應(yīng)禁用“Continue”按鈕，直到用戶填寫“Name”字段。用戶名、游戲時間和分?jǐn)?shù)需要保存在本地。并使用這些變量：name:用戶名稱time:使用以秒為單位的時間score:使用整數(shù)的得分游戲允許點擊“StartGame”按鈕重新啟動游戲，點擊“StartGame”按鈕，游戲說明將再次呈現(xiàn)給用戶。排名需要根據(jù)分?jǐn)?shù)來排序，如果分?jǐn)?shù)相同則按游戲時長遞減順序來排序。如果多個用戶具有相同的分?jǐn)?shù)，并且同時擁有相同的時間，那么他們在排名中將得到相同的位置。為了增加游戲的互動性，需要使用一些音效：background.mp3:在飛行中循環(huán)使用;destroyed.mp3:當(dāng)一艘宇宙飛船(友方或敵方)或小行星被摧毀時使用；shoot.mp3:當(dāng)玩家飛船射擊時播放。利用你的天賦盡可能增加游戲的可用性，為用戶提供更好的體驗。選手指南您可以修改提供的文件并創(chuàng)建新的媒體文件，以確保正確