【摘要】:《新媒体应用技术》是为网络与新媒体专业学生打造的系列技术课程之一,也是专业核心课程。通过本课程的学习,学生能够熟悉网络与新媒体领域常用技术种类及软件工具,具备需求分析与竞品分析能力、原型图设计能力;掌握图像处理软件Photoshop CS6基本操作,具备包装设计、广告设计、网页首页设计、微信表情包设计的能力;掌握视频编辑软件Premiere CS6基本操作,具备基本网络视频筛选与获取,具备剪辑广告视频能力;掌握IH5平台基本操作技巧,具备独立制作互动类H5作品的能力,具备推广宣传H5作品能力。毕业后能够在新媒体网络类公司或企事业新媒体宣传部门工作,从事图像设计、视频后期剪辑相关工作,或参与网络产品研发、网络产品推广、网络产品销售等相关工作。IH5设计制作与推广宣传:使用IH5平台,制作互动类H5产品,制作动效及互动按钮,应用原创图像及微视频素材,并生成二维码及网址,在手机端及电脑端进行推广宣传。未来,学生再通过一般专业课超媒体交互设计的学习之后,可以为企事业单位,定制高端互动类H5作品。
支持CAJ、PDF文件格式,仅支持PDF格式
|
||||||||||
|
|
|||||||
|
|
||||||||||
|
|
||||||||||
|
基于HTML5的超级玛丽游戏的demo,方向键左右控制移动,方向键上控制跳跃,该游戏基于本人开发的HTML5游戏框架cnGameJS(详情点击这里:)。
请用最新版本浏览器查看。
该游戏demo主要包含的元素有:,,,,以及,我将一步步进行分析讲解。
我们首先要有一个游戏对象,代表一个关卡。该对象有如下三个方法:initialize,update和draw。它们分别的功能是初始化,更新所有游戏元素和绘制所有游戏元素。在游戏开始前,必须先加载所有图片资源,之后就启动游戏循环,并调用游戏对象的初始化参数:
由于需要键盘的方向键产生玛丽的移动,因此我们需要检测键盘方向键是否有按下,我们可以采用cnGameJS的isPressed(keyName)检测键盘的输入:
这样就可以通过不同的键盘输入使玛丽进行不同的行为。
cnGameJS里封装了矩形和矩形的碰撞检测,因此我们可以利用来作为游戏对象与对象间的碰撞检测,这里的碰撞检测复杂点,分别检测了玛丽和敌人或石头的碰撞,并跟进情况改变玛丽的速度和加速度。
1:玛丽与敌人碰撞,根据玛丽Y方向速度判断敌人die或者玛丽die。
2:玛丽和石头碰撞,使玛丽Y方向速度为0,Y方向加速度为0.
3:玛丽离开石头:恢复重力加速度。
这里的动画主要是指玛丽在移动时脚部的动画,我们可以在玛丽停止时使用图片,移动时使用动画。所谓的动画其实就是一张大图片内的帧动画,例如我们可以首先准备 一张这样的图片:
之后只要使其每次显示不同位置的玛丽,即可完成动画:
游戏循环就是在资源加载后启动的循环,它接收用户传入的fps,从而计算出循环间隔,每次循环更新帧和绘制帧,生成游戏动画:
所谓的场景,就是玛丽移动的时候,玛丽保持在画布中央而背景相反方向移动的实现对象。场景对象不仅仅移动背景,还会把非玩家的游戏对象同样根据玩家的速度以相反方向移动:
最后附上游戏以及cnGameJS框架的源码下载:
欢迎转载,请标明出处: