Web前端游戏开发2. 游戏流程与框架结构2.1 游戏总体流程2.2 作业基本功能 登录 注册 继续上次游戏 开始新游戏 猴子轮流报数，报到指定编号的猴子淘汰 猴子报数时发出声音 游戏过程中添加猴子，移除猴子2.3 附加功能（如果有的话） 小猴跟随鼠标皇冠移动 给小猴改名 暂停、重启背景音乐 键盘控制小猴登山3. 游戏设计与开发（界面及实现）3.1 使用到的技术列表及其用途（一）HTML5技术使用的标签：1) 标题/文本标签：用于文本的显示2) 链接标签：用于文字超链接跳转3) 图像标签：用于图片的显示4) 列表标签：用于首页的气泡动画展示5) 容器标签：用于分区和元素的添加，作为容器6) 表单：用于登陆注册的表单7) 音频：用于控制背景音乐的开始和暂停以及猴子报数声音的发出8) 画板：用于制作键盘控制猴子登山页面的动画（二）CSS3技术使用的属性：1) Background：用于定义元素的背景颜色或背景图片2) Font：定义文字的字体、大小和阴影3) Link：设置跳转的链接4) ul：设置列表元素的颜色形状等5) margin/border/padding/content：调整元素的布局6) display、visibility：控制元素的显示和隐藏7) position：使用了relative/adsolute/fixed给元素定位8) float：设置元素的浮动9) 伪类：控制链接跳转前后的不同样式，按钮点击后的效果10) 边框/圆角：登录注册以及按钮的样式设置11) 动画：登陆注册界面的气泡上升动画，开始页面的猴子晃动动画，以及猴子报数时气泡出现的动画和登上山顶的动画12) 旋转移动：猴子围圈（三）JS技术1) Window.location.href 页面跳转及带参跳转2) Ajax xmlHttp和后端服务器连接，使用request请求发送数据到后端并请求后端数据3) JQuery：音乐的播放和暂停4) Canvas：键盘控制小猴登山5) Js控制html：控制音乐的播放和暂停6) Js事件：鼠标进入、鼠标移出、点击、双击、拖放、键盘监听7) Js子节点：动态添加修改移除html对象8) Js控制css：动态修改css类9) 计时器：设置定时循环执行和延时执行，用于控制动画效果（四）后端服务器设计1）后端服务器使用python的flask框架，连接本地mysql数据库，进行数据的存储和读取数据库设计monkey表：保存用户的信息，以及用户退出前保存的游戏数据monkey_info表：保存用户的猴子信息，包括猴子编号，名称和是否被淘汰的信息3）前后端接口设计 /login 登录输入：用户名，密码返回值：登录是否成功的信息 /register 注册输入：用户名，密码返回值：注册是否成功及错误信息（用户名已存在等） /set_monkey 设置游戏初始值输入：用户名，猴子数量，淘汰编号返回值：初始化是否成功 /save 保存游戏数据输入：用户名，猴子数量，淘汰编号，当前留在场上的猴子数，当前留在场上的猴子序列，当前报到的猴子编号，当前报到的猴子数，猴子信息列表返回值：保存是否成功 /load 加载上一次游戏信息输入：用户名返回值：用户名，猴子数量，淘汰编号，当前留在场上的猴子数，当前留在场上的猴子序列，当前报到的猴子编号，当前报到的猴子数，猴子信息列表 /reset重新开始新游戏，将当前用户的，猴子数量和淘汰编号都设为-1输入：用户名返回值：重置是否成功3.2 登录界面（界面截图，核心技术，主要代码）界面截图： 核心技术：表单，css动画，ajax访问后端，超链接跳转主要代码：（1）表单：（2）css为不同type的input标签设置设置外观：（3）css设置背景图片的显示模式：（4）css为标签设置动画效果：（5）css为标签内的指定子节点设置显示效果：（6）ajax访问后端：（7）超链接跳转页面：3.3 注册界面（界面截图，核心技术，主要代码）界面截图： 核心技术：表单，css动画，ajax访问后端，超链接跳转核心代码：（1）判断用户是否存在： （2）判断两次输入密码是否相同： 3.4 游戏开始界面（界面截图，核心技术，主要代码）界面截图：（1）选择是否继续游戏或开始新游戏页面 （2）选择新游戏后输入猴子的总数和报数的最大数字 核心技术：表单，css动画，ajax访问后端，超链接跳转主要代码：（1）页面间传参： 3.5 游戏界面（界面截图，核心技术，主要代码）界面截图： 核心技术：css动画，css旋转位移，ajax访问后端，超链接跳转，计时器，json，js事件，js对象，随机数，子标签子节点，媒体音乐，jQuery，js动态设置html和css主要代码：（1） 解析json数据： （2） 为每只猴子创建js对象： （3） 使用随机数随机生成猴子名字： （4） js动态创建子标签并设置属性 （5） css使图片旋转实现猴子围圈 （6） js设置计时器实现自动报数 （7） js动态增删子节点 （8） 报数主体流程 说明：首先判断场上是否只剩下一只猴子，如果是就停止报数，游戏结束，留下的猴子是大王。如果剩余猴子多于一只则继续游戏。While循环跳过已淘汰的猴子，循环中猴子的顺序号curMon增加，报数的顺序号curNum不变。直到curMon增加至一只未淘汰的猴子时跳出循环，该猴子报数完毕后，curMon和curNum各加一，等待下一次报数函数在计时器中的调用。（9） jQuery设置css （10） html媒体标签 （11） js延时执行方法 3.6 游戏暂停界面（界面截图，核心技术，主要代码）界面截图： 核心技术：ajax访问后端，超链接跳转， json， js对象，随机数，js鼠标事件，js点击事件，js拖拽事件主要代码：（1） js拖拽事件-拖拽添加猴子，拖拽删除猴子 （2） js鼠标事件-鼠标经过显示待选特效 （3） js点击事件-鼠标点击切换淘汰和未淘汰状态 （4） 父节点子节点-动态修改css和内容 （5） js双击事件-双击后显示猴子改名输入框 3.8获胜猴子戴上王冠（界面截图，核心技术，主要代码）界面截图： 核心技术：元素定位，获取鼠标位置，计时器，动态改变css主要代码：（1） 获取某个html元素的定位 （2） 获取滚动条距离顶端的距离 （3） 获取鼠标位置 （4） 在鼠标位置绘制王冠图片 （5） 猴子跟随鼠标移动实现 说明：首先判断鼠标是否已将王冠给猴子戴上。如果没有，再判断鼠标在x轴的位置是否与猴子重合，如果重合，函数不执行，猴子停止移动。如果未重合，判断鼠标在猴子的哪一边，贴对应方向的猴子图片，并将猴子位置向该方向移动一定距离。在计时器中自动重复执行该函数，使猴子逐渐向鼠标位置移动。3.7获胜猴子登山界面（界面截图，核心技术，主要代码）界面截图： 核心技术：canvas画布，键盘监听事件，计时器主要代码：（1） 在画布上绘制图片和文字 （2） 计时器控制画布绘制-实现动画效果 （3） 键盘监听获取左右按键信息 （4） 猴子登山实现 说明：键盘右键点击就将猴子下一步的位置x轴上的值增加，否则就减少，然后先绘制背景的山再绘制猴子，实现猴子再画布上被键盘控制左右移动。判定猴子的位置已经位于山脚下后，每次猴子的x值不变，y值减少，使猴子的位置升高，同时背景的山的图片位置向左移动，实现猴子爬山的动画效果。判定猴子到达山顶位置的高度后，使用计时器，循环增大猴子的大小，当猴子足够大时，使用另一个计时器在画布上绘制王冠的图，并循环增大王冠的y值，使王冠下落，直至戴在猴子头上。