学员作品:90后的童年记忆 - 皮卡丘之《z 酷噜镇》

90 后少年时期的动画片少不了数码宝贝的陪伴,但是由于时间的久远或者种种原因,我们已经忘记了这些制作精良的动画片,为了找回初心妙味北京 JS 实体班学员在学习中期的检测中,组成了开发小组,制作了这个游戏:皮卡丘之《z 酷噜镇》

项目小组:

  • 项目小组组长:
    • 马雪琦
  • 组员:
    • 于跃
    • 陈志凯
    • 陈弘扬
    • 杨丽春
    • 袁帅
    • 秦瑜坤

开发周期:一周

项目地址:http://project.microbu.com/161114/youxi/

应用技术:

  • 简易登录注册验证
  • 二维数组的寻路算法
  • 购买页面每个模块的数据交互以及各个模块的数据衔接
  • 浏览器的 hash 操作,血量攻击力的运算
  • 操作使用 jquery 特效插件

功能说明:

项目的开始我们就进入了一张非常炫酷的画面,太空粒子的高速移动,好似带领我们进行了时光穿梭,双击鼠标后进入登录页面,时空定格在了数码宝贝世界的大门,选择游客登录,开始我们的“Z酷噜镇”征程吧~

亮点功能一:王者之路

  • 点击王者之路我们可以进入我们曾经熟悉的红白机游戏界面;按键盘上下左右方向键,npc走动遇怪(蓝色小人是怪,黄色小人是 npc);
  • 说明:控制人物行走遇怪等需求,在这里游戏使用二维数组的寻路算法;而地图用的是复杂的多个二位数组;

遇到怪时,我们设定空格键进入打斗画面(皮卡丘十万伏特^_^),点击下面的技能进行打斗,当 npc 打不过的时候可以点击逃跑,重新遇怪。

亮点功能二:友谊商店

  • 当点击友谊商店的时候进入商店,可以进行购买物品;

  • 点击物品会出现;

  • 点击购买,就可以在主界面背包出现购买的物品,扣除相应的货币;

  • 在背包里面的物品可以点击使用,相应的数量会减少;
  • 说明:体力钻石这部分需要注意的是与冒险章节这一部分的衔接,且行动判断需放在函数最上部,如体力||钻石等不足,则 Return 出去,以防出现 Bug。可以先写出效果,等后期进行整体串套衔接。

亮点功能三:右侧边栏以及上边栏

  • 点击上边栏三个使用的时候,体力、钻石以及金币会相应减少;
  • 点击侧边栏的固定交换、学习机鉴定、神秘商店、消息、成长计划以及活动会相应出现各自的背景以及动能;
  • 说明:侧边栏:屏幕右下角有 Div,点击时旋转自身,达到视频中动画效果(transform-rotate),此时重叠在一起的多个 div 陆续向上/左运动.弹出的多个div背景均有透明度,其上覆一张 img 即可,点击时有 scale 效果。

项目地址:http://project.microbu.com/161114/youxi/

这就是 妙味 JS 实体班马雪琦小组 学习中期的检测作品,有没有勾起了童年的那些回忆呢?当然,作品中还有很多功能还需要不断的完善优化啦~

作为学习中期检测,该作品也主要凸显团队配合和知识点的应用以及作品创意,启蒙学员在毕业后走进工作岗位,快速高效的融入到工作团队协同开发中,为正式工作打下基础

各位看官,你想不想也自己做上一个这样的作品呢?前端的世界很精彩,前端的世界无限大,你要不来一起来“玩”?!

如果你在学习探索中遇到问题,不妨来妙味社区和我们一起交流:

>>妙味技术交流社区

妙味 QQ 技术交流群:626927936


广而告之:

我们眼中最强悍的 WEB 前端课程大纲 现已上线,目前新班招募中…

2018 年开班信息一览:

>> 北京 3 月份零基础班:《WEB 前端工程师就业课程》 - 西二旗辉煌国际校区
>> 上海 3 月份零基础班:《WEB 前端工程师就业课程》 - 七宝·宝龙城校区

>> 北京 3 月份 JavaScript 班:《JS 高级全栈工程师课程》 - 西二旗辉煌国际校区
>> 上海 3 月份 JavaScript 班:《JS 高级全栈工程师课程》 - 七宝·宝龙城校区

>> 北京 3 月 10 日周末班:《Vue 系统修炼与精彩实战周末班》 - 西二旗辉煌国际校区
>> 上海 3 月 10 日周末班:《Vue 系统修炼与精彩实战周末班》 - 七宝·宝龙城校区

>> 北京 4 月份周末班:《React+redux 高阶实战项目周末班》 - 西二旗辉煌国际校区
>> 上海 4 月份周末班:《React+redux 高阶实战项目周末班》 - 七宝·宝龙城校区

相关链接:

>>我们眼中最强悍的前端课程大纲,是什么样的?
>>年终岁末,妙味实体班就业简报

想要咨询报名的童鞋,可以跟我们的客服 MM 们联系哦,名额有限,心动不如行动,速度约起来吧~


课程咨询:

咨询QQ:2852509866

微信咨询:miaov-class

电话咨询:010-57269690

妙味网友
请登录后留言,请登录注册
 
 
 
 
 
联系我们

点我咨询QQ客服

010-57269690

在线微信客服
客服1
客服在线时间

工作日:9:30~18:00

周六:10:00~17:00

妙味公众号