智游网项目分析 省赛获奖_第1页
智游网项目分析 省赛获奖_第2页
智游网项目分析 省赛获奖_第3页
智游网项目分析 省赛获奖_第4页
智游网项目分析 省赛获奖_第5页
已阅读5页，还剩14页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《物联网Web前端开发基础》课程

智游网项目分析【任务9-8】智游网页面开发项目介绍页面效果：（不含游戏部分）【任务9-8】智游网页面开发准备工作使用VSCode编辑器创建一个新项目，从完整源代码中将images图片素材目录复制到这个新项目中。分析一下页面结构，页面从上到下一共分为4部分。【任务9-8】智游网页面开发准备工作【任务9-8】智游网页面开发顶部导航在结构图中，顶部导航整体是一个通栏，在通栏内有个container布局容器，用于限定内容宽度为1000px，在容器内放左、右两个链接区域。【任务9-8】智游网页面开发顶部导航动手编写代码，完成顶部导航的开发。【任务9-8】智游网页面开发头部区域分析头部区域的组成部分。头部区域分为左、右两部分，左边是网站LOGO，右边有一个搜索框。头部区域整体是一个通栏，内容放在container容器中，网站LOGO和搜索框分布在容器内的左右两边。【任务9-8】智游网页面开发头部区域动手编写代码，完成头部导航的开发。【任务9-8】智游网页面开发头部区域主体区域分为左右两部分，左侧显示2048的游戏画面，右侧是相关游戏推荐。左侧的2048游戏，我们将在后面的任务中完成，本节先完成右侧的相关游戏推荐。【任务9-8】智游网页面开发头部区域动手编写代码，完成主体区域的开发。【任务9-8】智游网页面开发底部区域对底部区域的页面效果进行分析。底部区域整体是一个通栏，通栏里有个container容器，用于包裹内容。底部区域的内容分为上下两部分，上部分是友情链接，下部分是网站的信息和提示语。【任务9-8】智游网页面开发底部区域动手编写代码，完成底部区域的开发。【任务9-9】智游网游戏开发需求分析按键盘的上（↑）、下（↓）、左（←）、右（→）控制数字的移动。

每移动一次，所有的数字方块都会往移动的方向靠拢，然后系统会在空白的地方随机出现一个数字（2或4）方块。

相同数字的方块在移动的过程中会叠加，通过不断的叠加，最终拼凑出2048这个数字就算成功。【任务9-9】智游网游戏开发需求分析【任务9-9】智游网游戏开发需求分析游戏界面构成2048游戏页面是由标题、分数和游戏操作区组成。

游戏操作区是由4×4的棋盘格子和数字格组成。

数字格是由数字和背景色格子组成。

数字的颜色有黑色和白色。

数字格的背景色，根据数字值的不同而不同。

游戏结束时的页面由提示信息（文字和分数）和“重新开始”按钮组成。【任务9-9】智游网游戏开发需求分析游戏规则游戏操作键为：上（↑）下（↓）左（←）右（→）。数字格子移动的条件是，当操作方向的其他格子是空或相邻两个格子的数值相同时才可以移动。

值相同的数字格子叠加后，在分数区域显示对应分值（相同数值的累加值）。当玩家成功叠加出2048的数字格子后，游戏就算顺利通关了。当数字填满所有格子，并且相邻的格子也无法移动的话，游戏结束。【任务9-9】智游网游戏开发需求分析涉及的相关技术游戏界面的设计：HTML和CSS。

游戏的功能实现：JavaScript和jQuer

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论