山东省技能大赛青岛选拔赛-世赛选拔项目46样题（网站技术）

CLIENT_SIDEClientSide

Submittedby:竞赛样卷竞赛样卷注意：样题与最终比赛试题相似但不相同。比赛时间：240分钟介绍：近年来，互联网已成为我们日常生活中不可或缺的一部分，使信息的传播成为取之不尽的内容和互动的来源。每天，游戏的使用都在这个宇宙中占据了突出的地位，使数百万人能够快速而免费地获得乐趣和娱乐。考虑到这些概念，您决定开发一个小游戏，它可以在最常见的Web浏览器上运行，并使您有可能在网页设计和开发技能上传播您的才华。这场比赛将被称为星球大战。您应该设计游戏，使用HTML和CSS开发布局，并使用JavaScript及其开源库开发客户端编程。有些媒体文件以压缩文件的形式提供给您。如果需要，您可以创建更多介质并修改介质中的任何内容。要在不同的分辨率下使用，您的游戏需要开发为960x600像素的平板电脑分辨率。但是，如果游戏是在大屏幕上打开的，游戏必须位于屏幕的中央(水平和垂直)。项目和模块的描述《StarBattle》游戏使用的元素如下：Mainspaceship（玩家飞船）:由玩家控制的元素。Planetsinbackground（背景中的行星）:从右向左移动的元素，给人以宇宙飞船在太空中移动的印象。Enemyspaceships（敌方宇宙飞船）:玩家需要摧毁才能获得分数的元素。Asteroids（小行星）:玩家需要摧毁才能获得分数的元素。Friendlyspaceships（友方宇宙飞船）:玩家不应破坏的元素，否则玩家将失去分数。Fuelicon（燃料图标）:玩家需要收集以增加燃料等级的元素。FuelCounter（燃料计数器）:显示可用燃料数量的元素。它必须是一个数字和图形元素，它应该是动画时，燃料减少，当用户获得更多的燃料。ScoreCounter（得分计数器）:显示用户摧毁小行星和敌方宇宙飞船得到多少分的元素。Timer（计时器）:表示宇宙飞船飞行时间的元素。SoundButton（声音按钮）:启用和禁用游戏中声音的元素。FontSizeButtons（字体大小按钮）:增加和减小字体大小的元素。Pause/Continuebutton（暂停/继续按钮）:暂停/继续游戏按钮。Logo:在游戏中添加提供的LOGO。Shot（射击）:飞船射击的子弹。布局：必须包含三个界面，并且：GameInstructions（游戏说明）:游戏的第一个界面显示给用户的说明和“StartGame”按钮。游戏说明包含在媒体文件中Gameboardlayout（游戏板布局）:该设计必须在游戏屏幕上呈现上述所有14个元素。RankingTablepresentation（排名表展示）:本设计必须展示游戏和排名的标志，按位置、名称、分数和时间的顺序排列，并在表格上显示“StartGame”按钮。开发游戏应用程序的初始标记(HTML+CSS)。当访问应用程序时，游戏被呈现给用户，并带有游戏指令和按钮“StartGame”。这些说明必须以动画的方式呈现。“StartGame”按钮必须有活动和悬停效果。处于悬停状态的按钮的背景必须为：#f19e0d。活动状态必须遵循媒体文件中提供的名为涟漪的示例。您应该将下面描述的元素绘制为包含在您的游戏中。创建表示相同视觉样式的元素。Mainspaceship(controlledbyplayer)主宇宙飞船(由玩家控制)TimerIcon计时器图标Soundbutton声音按钮Fontsizebuttons字体大小按钮Pause/continuebutton暂停/继续按钮Fuelcounter燃料计数器Fuelicon燃料图标在适用于HTML5和CSS3规则的W3C标准中，HTML和CSS代码必须是有效的。游戏功能:按下初始画面中的“StartGame”按钮，开始游戏。行星应该是动画的，从右到左移动，以给人一种宇宙飞船在太空中移动的印象。计时器从零开始，以秒为单位显示宇宙飞船移动的时间。燃料计数器开始递减，每秒1分。比赛开始时，有15分燃料(15秒)。燃料的最大容量为30分(飞行30秒)。比分从零开始。当用户按下空格键时，飞船就会开火，用户不能一直按空格键连续多次射击，即每次按空格键只能射击一次。主飞船的射击只能摧毁一个目标。射击不能穿过一个目标并击中其他元素。用户可以使用箭头键事件在屏幕上移动飞船。向上箭头键将主宇宙飞船向上移动。向下箭头键将主宇宙飞船向下移动。向左箭头键将主宇宙飞船向左移动，向右箭头键将主宇宙飞船向右移动。不可能把宇宙飞船从屏幕上飞走。在飞行过程中，飞船需要摧毁出现在太空中的敌方飞船和小行星。如果宇宙飞船与小行星元素或宇宙飞船元素相撞，该元素将被摧毁，燃料必须减少15分。宇宙飞船和小行星需要呈现在任意位置，并以动画的方式从右向左飞行。敌方宇宙飞船必须射击(从右到左)。玩家飞船必须躲避这些子弹；否则被子弹击中，燃料计数器应该减少15分。敌人的宇宙飞船一发子弹击毁。每摧毁一艘敌方宇宙飞船，分数增加5分。如果用户摧毁一艘友方飞船，则分数减少10分。这个游戏允许负分。小行星必须用两发子弹摧毁。摧毁每一颗小行星，分数增加10分。在飞行过程中，主飞船需要收集燃料。燃料应该以动画的方式从屏幕顶部随机水平放置。每收集一个燃料，燃料计数器就会增加15个点。一点燃料相当于1秒的飞行时间。在飞行过程中，用户可以通过点击暂停按钮或按键盘上的字母“p”来暂停游戏。暂停游戏时，必须停止所有交互和声音。如果用户再次单击暂停按钮，或再次按下字母“p”，游戏将从暂停的那一刻开始继续。背景中的行星需要呈现动画，才能给人以运动的感觉。行星必须以不同的速度运动，较大的行星必须比较小的行星运动得更快，从而产生视差效应。在背景中包括至少5个不同大小的行星。如果燃料计数器达到零，游戏就结束了。当游戏结束时，动画、声音、交互和计时器计数器停止，游戏将在表单域“Name”中收集用户的名字。用户填写“Name”字段，然后点击按钮“Continue”。应禁用“Continue”按钮，直到用户填写“Name”字段。用户名、游戏时间和分数需要保存在本地。并使用这些变量：name:用户名称time:使用以秒为单位的时间score:使用整数的得分游戏允许点击“StartGame”按钮重新启动游戏，点击“StartGame”按钮，游戏说明将再次呈现给用户。排名需要根据分数来排序，如果分数相同则按游戏时长递减顺序来排序。如果多个用户具有相同的分数，并且同时拥有相同的时间，那么他们在排名中将得到相同的位置。为了增加游戏的互动性，需要使用一些音效：background.mp3:在飞行中循环使用;destroyed.mp3:当一艘宇宙飞船(友方或敌方)或小行星被摧毁时使用；shoot.mp3:当玩家飞船射击时播放。利用你的天赋尽可能增加游戏的可用性，为用户提供更好的体验。选手指南您可以修改提供的文件并创建新的媒体文件，以确保正确