[Mugeda HTML5技术教程之15]案例分析：制作移动教育课件 - mugedatech

本邮件内容由第三方提供，如果您不想继续收到该邮件，可 点此退订 。

[Mugeda HTML5技术教程之15]案例分析：制作移动教育课件 - mugedatech  阅读原文»

本文档要分析的案例是一个一氧化碳还原氧化铜的教育小课件，从中可以体会一些Mugeda API的用法和使用Mugeda动画制作移动教育课件的方法。Mugeda为移动教育领域和移动数字出版领域提供理想的教育课件/微课程和交互动画内容制作方案，在PC上制作相关内容的Flash创作人员可无障碍使用Mugeda制作适合平板电脑和智能手机的课件和数字出版物。

课件内容：

一氧化碳还原氧化铜实验课件。课件动画的前半段是实验设备的安装过程动画；后半段是交互部分，在这部分学生可以通过点击按钮的步骤来完成实验，有点燃酒精灯1，点燃酒精灯2，通入CO，然后是停止实验的步骤，有关闭两个酒精灯，和关闭CO。该实验有一定的危险性，必须严格按照正确实验步骤操作，否则会有爆炸（酒精灯1在通入CO前点燃就存在爆炸危险）和一氧化碳中毒（酒精灯2在通入CO之后点燃或者在关闭CO之前关闭都存在CO中毒的危险）的危险。该课件通过动画的形式模拟操作过程，在学生真实操作实验前，先通过动画来模拟会减少因为不熟练而产生危险的可能。互动操作后，会根据学生操作的步骤判断实验步骤是否正确，如果正确给出鼓励的画面，如果错误，给出错误的警告，并显示正确的实验操作步骤。

课件动画演示：

https://cn.mugeda.com/client/preview_css3.html?id=01f00e3a

设计思路：

该课件相对于游戏来说逻辑比较简单，主要就是记录下点击按钮的顺序，当操作完成后检查记录下来的操作顺序来判断结果是否正确。

关键点：

1.给按钮等元件实例设置segment

例如：

for(var i = 0; i < 3;i++)

{

button = scene.getObjectByName("button" + i);

button.scene.setSegment("off", 0, 0, false);

button.scene.setSegment("on", 1, 1, false);

button.scene.playSegment("off");

}

2.判断结果

点击按钮后将按钮相应的数值加入到数组中。

if(buttonStatus[key] !== 1)//判断该按键是否已被按

{

buttonStatus[key] = 1;

order[order.length] = key;//将该操作加入数组

//相应的操作，比如设置该操作对应的效果

}

最后判断结果时按照数组中的值的顺序判断结果

if(order[0] == 2 && order[1] == 0 && order[2] == 1 && order[3] == 1 && order[4] == 0 && order[5] == 2)

{

success.scene.playSegment("on");//结果正确则播放成功元件实例

}

else

{

help.alpha = 1;

fail.scene.playSegment("on");//否则播放失败元件实例

}

3.重新开始时，重设元件实例的segment状态

window.restart = function()

{

help.alpha = 0;

order = [];

buttonStatus = [0,0,0];

CuO.scene.playSegment("static");

blueFire.scene.playSegment("off");

turbid.scene.playSegment("off");

bubble.scene.playSegment("off");

action[0].scene.playSegment("off");

action[1].scene.playSegment("static");

action[2].scene.playSegment("static");

for(var i = 0; i < 3;i++)

{

button.scene.playSegment("off");

};

success.scene.playSegment("off");

fail.scene.playSegment("off");

}

总结，本案例分析重点介绍用到的Mugeda API的接口用法，从中体会Mugeda动画可以实现的功能和应用领域。下一节，我们将做案例分析：制作跨屏互动应用。

本文链接：http://www.cnblogs.com/mugeda/p/3544054.html，转载请注明。

【javascript基础】创建对象 - Allenxing  阅读原文»

前言

今天从家里回到了学校，在家呆了十天，胖了几斤的重量，又折腾回学校了，春节回家真是艰辛的路途。随便扯扯我的往返行程：为了省钱我没有选择直飞到长春往返都是到北京转的，这样我和女朋友可以节省4000块左右。1月24号深圳-飞机-北京(飞机晚点1个小时)，到北京已经凌晨两点多，机场大巴就剩两个了，做一个大巴到了市里在打的到同学那100块没了，到同学那(天通苑附近)都三点了，吃饭喝酒(一瓶牛栏山+2瓶啤酒)到了五点，睡觉到十点，起床去打了两个小时的篮球，回来没吃饭地铁去车站，差一点没有赶上动车去长春，晚上九点多到了长春，打车去长春理工同学那住，晚上要了肯德基外卖，100块又没了，十二点睡觉三点起床赶车回松原下乡参加同学婚礼，下午1点回来做汽车回家。哎，折腾死人了，放假在家天天叔叔大爷家轮流吃饭，天天打麻将......2月6号四点半起床赶车去市里做火车去长春为了赶上10点25分的车去北京，九点左右到了北京，坐机场块钱去首都机场，坐飞机直飞香港，到香港凌晨3点多，出战坐大巴去深圳湾回深圳，到宿舍8点多。感觉一直都是在赶车，好累，有钱就直飞，哼。

就扯到这，今天和大伙一起学习javascript中的对象和创建对象的一些方式。

对象

javascript中什么是对象呢，javascript中一切都是对象，任何对象的都是基于Object的，确切的说每一个对象都是基于一个引用类型创建的，这个引用类型可以是原生的引用类型也可以是我们自己创建的，这些引用类型是基于Object的。最简单的创建对象的方法是

var person = new Object();
person.name = "hainan";
person.age = "25";

直接new出来一个Object对象，之后给这个对象添加属性和方法。

属性类型

在第五版的javascript中，定义了在内部使用的特性，描述了属性的各种特征，这些特性是javascript引擎使用的，在javascript中我们不能使用它们，为了区别将他们放在了两对方括号中，属性类型分为两种：数据属性和访问器属性。

数据属性

• [[Configurable]] 表示能否通过delete删除属性，默认为true
• [[Enumerable]] 表示能否通过for-in枚举属性，默认为true
• [[Writable]] 表示能否修改属性的值，默认为true
• [[Value]] 表示这个属性的值，默认为undefined

访问器属性

• [[Configurable]] 表示能否通过delete删除属性，默认为true
• [[Enumerable]] 表示能否通过for-in枚举属性，默认为true
• [[Get]] 读取属性是调用的函数，默认值为undefined
• [[Set]] 写入属性时调用的函数，默认值为undefined

ECMAScript5中的属性修改时通过Object.defineProperty()这个方法，三个参数分别为对象，属性名，描述符对象。直接看例子，value特性

var person = {};
Object.defineProperty(person,"name",{configurable:true,value:"hainan"})
console.log(person.name);//hainan
//等价于var person = {name : "hainan"}

再看看writable

var person = {};
Object.defineProperty(person,"name",{configurable:true,value:"hainan",writable:false});
person.name = "allenxing";//修改属性
console.log(person.name);//hainan 严格模式下出现错误

下面看看configuration特性

var person = {};
Object.defineProperty(person,"name",{configurable:false,value:"hainan"});
delete person.name;//删除属性
console.log(person.name);//hainan 严格模式下出现错误

configuration属性修改成不可以配置的，就是指为false时，就不能再把它修改成可配置的了，看看例子

var person = {};
Object.defineProperty(person,"name",{configurable:false,value:"hainan"});
Object.defineProperty(person,"name",{configurable:true,value:"hainan"});
//TypeError: Cannot redefine property: name

enumerable特性

var person = {};
Object.defineProperty(person,"name",{configurable:true,value:"hainan"});
for(var pro in person){
console.log(pro);
}
//不输出
//在chrome下默认的enumeration默认为false

var person = {};
Object.defineProperty(person,"name",{configurable:true,value:"hainan",enumerable:true});
for(var key in person){console.log(key)}
//"name"

再看一下访问器属性

var person = {
name : "hainan",
age : 25
}
Object.defineProperty(person,"year",{
get : function(){
return this.age + 1;
},
set :function(value){
this.age = value + 10;
}
});
console.log(person.year);//26
person.year= 10;
console.log(person.age);//20

ECMAScript5还有一个方法Object.defineProperties()可以定义多个属性，用法如下

var person = {}
Object.defineProperties(person,{
name : {value : "hainan"},
age : {value : 25},
year : {
get :function(){
return this.age + 1;
},
set : function(value){
this.age = value +10;
}
}
});
console.log(person.year);//26
person.year = 10;
console.log(person.age);//25 注意这里

这里我也不知道为啥age的值没有改变，但是下面这样就可以改变了

var person = {name :"hainan",age:25}
Object.defineProperties(person,{
year : {
get :function(){
return this.age + 1;
},
set : function(value){
this.age = value + 10;阅读更多内容