妙味JS中级班课后练习之:玩转卡牌

上回发了一个 JS 基础班阶段测试题,大家关注度颇高,>>详情戳这里

有些小伙伴们做过测试题后,还会问我们:

经过了 JS 基础阶段测试题,那你们的 JS 中级阶段测试题呢?也发出来看看喽~

的确,学习就像是升级打怪, 每个阶段,都应该有相应的通关标准, 不过这个小怪物嘛,也不能老是做测试题啊, 到了中级阶段,必须得用作品来证明才行。

从今天开始,我们陆续向大家展示 JS 中级阶段的学员课后练习, 看看这些练习是怎么制作出来的的。

一般来说,学到 JS 中级阶段, 讲师们就把班上的同学分成小组, 同学们以小组形式、规定的时间内,开始准备作品, 这些作品从策划、设计,再到代码分工、功能组合……全部都由小组成员共同完成, 然后讲师们再进行评比,优胜者可获赠奖品。

现在就来看看,今天给大家呈现的,是什么样的作品:


一个基于 CSS3 属性的卡片动态效果展示 - 201611届JS全栈班

作品说明:

这是一个关于卡牌展示、抽取、小游戏作品,动画效果细腻,每个场景切换都有过渡效果,每一处都展现了学员们的良苦用心。打开页面在加载 loading 后是对作品引用介绍的弹窗。作品有 5 个页面,分别是首页,卡牌展示页,卡牌抽取页,卡牌对战小游戏,卡牌翻转小游戏。

目前实现的效果主要有:卡牌的展开与折叠

翻转卡片游戏:

模拟抽卡系统:

关于卡牌,还有另一组学员也做了类似效果,各有巧妙:


两件作品的线上展示地址:


由于只完成了 JS 中级阶段的学习,所学知识有限。有些需要用到后边的知识,性能和效果会更好,所以难免会有许多问题,在体验上的问题和 bug 也在所难免。因此在后边的 JS 学习中,希望他们不断改进,期待他们做出更完善的作品。

JS 中级阶段课程阶段示意图:

>>JS课程大纲详情


下期 JS 班课后练习预告:

  • canvas 粒子
  • 元素周期表

课程咨询:

  • 咨询QQ:2852509866、2852509867、2852509868
  • 电话:010-57269690

打开微信扫描二维码,关注妙味课堂最新动态:

妙味网友
请登录后留言,请登录注册