Web应用设计 - Luomohe/WebProject GitHub Wiki

交互设计

主界面


说明:游戏主界面,可以查看排行,奖杯,相关游戏推介,开始游戏以及音效开启关闭和社交分享。主界面中央有驴子的卡通形象以及各个功能的按钮,展示游戏主任务以及提供给用户实现各个功能的接口(他们的功能下面详细介绍)。

游戏运行界面


说明:用户可以通过键盘控制驴子左右移动。地图也会随着驴子所到达的高度不停地变换(从树林,到低空、高空、太空等),而跳跃的驴子也会随不同的速度效果。在游戏运行的时候在右下角会有一个暂停按钮,用于暂停游戏。

暂停界面


说明:在按下暂停按钮后,跳转到暂停界面。背景保持游戏暂停时的画面,中央出现驴子形象以及回到主界面和继续游戏按钮。两按钮分别用于回到主界面和恢复游戏。

游戏中的道具效果以及云的效果实现

说明:再触发各种道具后,驴子形象会变为拥有各种道具的形象(如带滑翔器、飞碟、气球的驴子,弹簧加速的驴子)。再触发不同的云后也会出现相应的效果(如脆弱的消失)。
### 游戏结束界面 ![](http://d.pcs.baidu.com/thumbnail/a931f05037f65a18cbff89b45044f0b0?fid=389406673-250528-430898135415498&time=1435154400&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-sju9IQA%2fLRkRXs4KF%2by8PBXYP6c%3d&expires=8h&prisign=unknow&chkbd=0&chkv=0&size=c1600_u900&quality=90)
说明:在游戏失败后,会跳到游戏结束界面。界面上半部有失败的驴子形象,下半部有查看排行榜、奖杯、相关游戏推介、开始新游戏的按钮,并在屏幕中央显示本次游戏得分。

# 展示设计 说明:在游戏的各个界面都会出现不同的驴子卡通形象,让用户自然记住应用主题。在每个不同的界面也配上了不同的背景音乐,让用户得到更好的体验。还在不同的地方提供的很多功能按钮。(这些在上一部分都已提到)
# 内容以及功能设计 主要可以分为游戏成就和社交、游戏运行控制、游戏内容和效果三个部分。
游戏成就会记录玩家游戏的最好成绩并讲不同玩家的成绩进行排名并公布;另外,游戏还有成就系统,在玩家完成不同的固定任务后会得到相应的奖杯;最后,游戏还会进行相关游戏的推介。
游戏控制主要就是实现与玩家之间的交互。玩家点击界面上的相应按钮会返回相应的界面或相应的动作,玩家还可通过键盘控制游戏中的驴子,进行游戏中相应功能的触发。
内容与效果主要是游戏运行中的一些游戏运行效果以及相关的触发特效。驴子:拥有加速度,在触碰云朵后获得固定的加速度,再触发道具后获得相应的道具效果(展示设计中已说明)。在屏幕底部未触到云朵跳转到游戏失败界面。云朵:7种云朵,5中不同形象的普通云朵(固定不动),1种移动云朵,1种脆弱云朵(触碰一次后消失)。道具:触碰不同的道具获得不同的道具特效(展示设计中已说明)。
P.S服务端的部分不会做,只实现了js+css+html部分的
⚠️ **GitHub.com Fallback** ⚠️