本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法。(一)游戏规则: 1、开始游戏时,手机出现在最上面一行的任意一格; 2、开始游戏时,彩色石头随机从上往下落,填满所有的方框,相同的三个石头不能相邻的排在一列或者一行; 3、手机从上移动到最下面一行的任意一格,就算胜利,或游戏时间结束,消除的石头数量超过30个也算胜利。(...
今天我们开始我们的第一个Mugeda动画作品,并通过它来看看制作Mugeda动画的一些通用流程。在开始制作之前,请确保你已经拥有一个Mugeda网站的账号。如果还没有,你可以登录
www.mugeda.com
免费注册一个。简单来讲,制作一个Mugeda动画内容,包含有如下几个步骤:1. 添加元素(图片、文字等)到舞台;2. 为添加的元素定义动画;3. 定义和用户的交互行为(例如点击跳转等);4. 导出或发布内容;在这个例子中,我们制作一个简单的...
在广告主的需求中,有很多情况下需要在动画中添加一些外部链接。这份文档就在Mugeda动画中添加外部链接的方式,做一下梳理。1.通过点击触发的链接就是要用户点击屏幕来触发链接的情况,这是推荐使用的方式。因为存在流量的考虑,不需要任何点击就跳转的操作,在有些移动设备上是不被支持的,所以我们推荐的触发跳转链接的方式是通过点击触发。实现的方式是:在舞台上选中一个物体对象,在动作中选择“链接”,输入框中写入完整的链...
1,HTML5/jQuery雷达动画图表图表配置十分简单分享一款很特别的HTML5图表,它是利用HTML5和jQuery的雷达动画图表,图表数据在初始化的时候带有一定动画。在线演示源码下载2,HTML5模拟牛顿力学碰撞的小球介绍一款HTML5模拟物理实验,这次模拟的是HTML5牛顿力学实验,高空挂几个小球来回摆动,互相撞击,来模拟力的传动。在线演示源码下载3,HTML5的画布烟花特效场景十分华丽一款基于HTML5 Canvas实现的烟花特效,我们只需在黑色的画...
最近想弄一个网页,把自己学HTML5过程中做的部分DEMO放上去做集合,但是,如果就仅仅做个网页把所有DEMO一个一个排列又觉得太难看了。就想,既然学了canvas,那就来折腾下浏览器,做个小小的开场动画吧。开场动画的效果,想了一会,决定用粒子,因为觉得粒子比较好玩。还记得以前我写的第一篇技术博文,就是讲文字图片粒子化的:文字图片粒子化 , 那时就仅仅做的是直线运动,顺便加了一点3D效果。运动公式很简单。所以就想这个开场...
mugeda动画平台还可以用来制作跨屏互动的动画应用,比如在PC端的大屏幕上显示动画的主界面,同时会显示出供手机扫描的二维码,手机扫描后会在手机上显示手机端动画界面。通过手机就可以和PC端的显示界面跨屏互动操作。这种动画应用在类似一些商场搞活动,或者户外宣传等常见可以使用。可以制作一对一玩的跨屏互动应用,也可以制作一对多玩(多个玩家同时玩)的跨屏互动应用。为了更好的理解跨屏互动应用的使用,本文档将通过一个简...
匀速运动:指的是物体在一条直线上运动,并且物体在任何相等时间间隔内通过的位移都是相等的。其实就是匀速直线运动,它的特点是加速度为0,从定义可知,在任何相等的时间间隔内,速度大小和方向是相同的。 1 <head>2 <meta charset=‘utf-8‘ />3 <style>4 #canvas {5 border: 1px dashed #aaa;6 }7 </style>8 <script>9 window.onload = function () {
10var oCanvas = docume...
想看更多的兄弟连免费教程那就来搜狐视频吧--一键直达http://my.tv.sohu.com/user/255804947
或者咨询微信号:xdljybaby 兄弟连云课堂,兄弟连官方论坛海量资源等你看http://bbs.itxdl.cn
HTML5课程内容
兄弟连新版HTML5视频教程-第一章 HTML5高级API.mp4
链接: https://pan.baidu.com/s/1i4GwI2L 密码: aczc
兄弟连新版HTML5视频教程-第二章01HTML5地理位置信息服务介绍,百度地图服务, 步行路线规划。
链接: https://pan.baidu...
web app不比PC,有性能和流量方面的考虑,离线应用越来越重要,虽然浏览器有缓存机制,但是时常不靠谱,更何况普通情况下html文件是没法缓存的,断网之后一切over。
什么是manifest?
简单来说manifest能让你的应用在无网的情况下也能访问。
它有三大优势:
1、离线浏览,无网情况下也能正常访问;
2、更快的加载速度,缓存在本地访问速度自然更快;
3、减轻服务请求压力,文件缓存后不需要再次请求,只需要请求需要更新的文件。
如...
简介 离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制,但它们并不可靠,也不一定总能起到预期的作用。HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题。 使用缓存接口可为您的应用带来以下三个优势: 离线浏览 – 用户可在离线时浏览您的完整网站 速度 – 缓存资源为本地资源,因此加载速度较快。 服务器负载更少 – 浏览器只会从发生了更改的服务器下载资源。 应用缓存(又称 ...
打开一个网页,加载完后,如果突然断网了,那么你刷新后那页面就没了。 有没有想过,刷新后页面还是刚刚才页面,在新窗口中再打开一个页面,输入相同的网址,在断网的状态下打开还是原来那个页面。。HTML5的离线应用正提供了这样一个功能。 在页面中的数据加载时,你可以自己设定一些要缓存的图片、flash、css、js、html等文件,等下次不能联网的情况下,你可以用那些缓存的文件。这就是HTML5的离线应用。 其实它实现起来很简单。 ...
前面已经总结了主要的API扩展,下面几个扩展只有在专用的场合才会发挥最大的作用,这里简单了解一下。下面这些特性无一例外,IE均不支持。应用缓存和服务端消息在其他的主流浏览器中都是支持的。桌面通知目前只有Chrome支持。 应用缓存 很多时候,我们需要缓存一些不经常改变的页面来提高访问速度;而且对于某些应用,我们也希望在离线的情况下也可以使用。在HTML5中,你可以通过一个称之为“应用缓存”的技术很方便的实...
如果想使用该api,必须保证服务器端配置相应的mime类型。 拿tomcat为例,在打开Tomcat 6.0\conf\web.xml文件,在文件的最后面添加如下内容 代码如下: <mime-mapping> manifest <mime-type>text/cache-manifest</mime-type> </mime-mapping> 尤其注意,extension的value是manifest,所以以后配置缓存文件的后缀必须跟他一样。 使用缓存是必须如下格式 代码如下: ... cache.mainfest是在服务器端配置的文件 格式如下 代码如下: ...
我们在使用offline cache的时候,有时候可能会更新资源,如js,css或者图片的 更新。但是在没有更新以前用户已经缓存了旧版本的资源,当在次访问的时候 他使用的还是旧版本的资源,如何才能让用户及时的更新缓存资源呢? 更新缓存资源主要有两种方法,通过修改配置文件的版本号或者调用js完成更新 js更新方法 代码如下: if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { window.applicationCache.up...
使用Application Cache缓存了页面及静态资源,发现用ajax请求数据,或者加载未缓存的资源时,无法加载,报错如下: CAUTION:Provisional headers are shown, 解决方法: manifest.appcache配置文件中NETWORK:需要配置*, CACHE MANIFEST # 2015-02-21 v1.0.2 /test.html NETWORK: * 星号来指示所有为缓存的其他文件都需要因特网连接