SlideShare a Scribd company logo
1 of 6
H t ml5 环 保 小 游 戏
        挑食的垃圾桶




垃圾翻翻看            挑食的垃圾桶
                 (道具版)

                 淘宝数字业务部UED-盛赉(韩升)
垃圾翻翻看
• jQuery框架          -     DOM操作                 -      MC元件控制
•    localStorage     -    本地存储              -      SharedObject




                                                     区块游戏

                               推荐文章: 短地址:http://tinyurl.com/cmwzmxk
                                      http://www.blogjava.net/sl2cj/articles/46875.html




•   演示地址:http://tinyurl.com/8aaueou
挑食的垃圾桶
•   想法来源-app丢纸团(创意Top10)
•   游戏策划-关卡设计-环保融入
•   用户体验-手势触摸
                                      性能




•   演示地址:http://tinyurl.com/7unz8mz
挑食的垃圾桶(道具版)
•   游戏可玩性-道具设计
•   天气下雨特效-canvas

•   视觉效果-冲击力




•   演示地址: http://tinyurl.com/77q9qkv
下面是两个游戏的演示视频.

挑食de垃圾桶
http://www.tudou.com/listplay/09Asx2Do738/_Gu-tcA_5Q0.html

垃圾翻翻看
http://www.tudou.com/listplay/09Asx2Do738/Dqt4tcXX3O8.html




                                                      盛赉(韩升)
                                                      mail: hansheng.sl@taobao.com
END THANKS!




       盛赉(韩升)
       mail: hansheng.sl@taobao.com

More Related Content

Viewers also liked

Social Monitoring Tools -- Considerations and Selection
Social Monitoring Tools -- Considerations and SelectionSocial Monitoring Tools -- Considerations and Selection
Social Monitoring Tools -- Considerations and SelectionKathy Herrmann
 
FlexNet Connect April 2013 Datasheet
FlexNet Connect April 2013 DatasheetFlexNet Connect April 2013 Datasheet
FlexNet Connect April 2013 DatasheetFlexera
 
How to separate the f2 e and sde in web development for_taobao
How to separate the f2 e and sde in web development for_taobaoHow to separate the f2 e and sde in web development for_taobao
How to separate the f2 e and sde in web development for_taobaotaobao.com
 
Mars attack 20100730
Mars attack 20100730Mars attack 20100730
Mars attack 20100730taobao.com
 
Vragen paneldiscussie
Vragen paneldiscussieVragen paneldiscussie
Vragen paneldiscussieMijnZorgnet
 
Zhvillimet dhe parashikimet e ekonomise se kosoves
Zhvillimet dhe parashikimet e ekonomise se kosovesZhvillimet dhe parashikimet e ekonomise se kosoves
Zhvillimet dhe parashikimet e ekonomise se kosovesMenaxherat
 

Viewers also liked (7)

Social Monitoring Tools -- Considerations and Selection
Social Monitoring Tools -- Considerations and SelectionSocial Monitoring Tools -- Considerations and Selection
Social Monitoring Tools -- Considerations and Selection
 
FlexNet Connect April 2013 Datasheet
FlexNet Connect April 2013 DatasheetFlexNet Connect April 2013 Datasheet
FlexNet Connect April 2013 Datasheet
 
How to separate the f2 e and sde in web development for_taobao
How to separate the f2 e and sde in web development for_taobaoHow to separate the f2 e and sde in web development for_taobao
How to separate the f2 e and sde in web development for_taobao
 
Mobile html5 v2
Mobile html5 v2Mobile html5 v2
Mobile html5 v2
 
Mars attack 20100730
Mars attack 20100730Mars attack 20100730
Mars attack 20100730
 
Vragen paneldiscussie
Vragen paneldiscussieVragen paneldiscussie
Vragen paneldiscussie
 
Zhvillimet dhe parashikimet e ekonomise se kosoves
Zhvillimet dhe parashikimet e ekonomise se kosovesZhvillimet dhe parashikimet e ekonomise se kosoves
Zhvillimet dhe parashikimet e ekonomise se kosoves
 

Similar to Html5环保小游戏

遊戲引擎超簡單入門
遊戲引擎超簡單入門遊戲引擎超簡單入門
遊戲引擎超簡單入門小均 張
 
瀏覽器講古
瀏覽器講古瀏覽器講古
瀏覽器講古Bob Chao
 
07 funny sango td and cocos2d-x
07   funny sango td and cocos2d-x07   funny sango td and cocos2d-x
07 funny sango td and cocos2d-x乐费 胡
 
OpenLab.Taipei #2 PORTA2030
OpenLab.Taipei #2 PORTA2030OpenLab.Taipei #2 PORTA2030
OpenLab.Taipei #2 PORTA2030Rex Tsai
 
Gamification 遊戲化是在 Play 蝦米 Game
Gamification 遊戲化是在 Play 蝦米 GameGamification 遊戲化是在 Play 蝦米 Game
Gamification 遊戲化是在 Play 蝦米 GameBob Chao
 
從雛形到設計-了解您的使用者在想什麼
從雛形到設計-了解您的使用者在想什麼從雛形到設計-了解您的使用者在想什麼
從雛形到設計-了解您的使用者在想什麼Souyi Yang
 
The Overview of Web Design
The Overview of Web DesignThe Overview of Web Design
The Overview of Web DesignBenny Chak
 
HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程Souyi Yang
 
一場與程式設計的邂逅
一場與程式設計的邂逅一場與程式設計的邂逅
一場與程式設計的邂逅建宇 陳
 
高雄和春資工系-Axure RP基礎課程
高雄和春資工系-Axure RP基礎課程高雄和春資工系-Axure RP基礎課程
高雄和春資工系-Axure RP基礎課程Souyi Yang
 
成大心理系-Prototyping方法
成大心理系-Prototyping方法成大心理系-Prototyping方法
成大心理系-Prototyping方法Souyi Yang
 
Graphic programming in js
Graphic programming in jsGraphic programming in js
Graphic programming in jsjay li
 
iOS app security
iOS app security  iOS app security
iOS app security Hokila Jan
 
SELF TOKEN 區塊鏈前瞻科技於文化娛樂產業之發展現況 以亞洲首部區塊鏈電影《聖人大盜》及全球各地應用為例 @ Ministry of Culture
SELF TOKEN 區塊鏈前瞻科技於文化娛樂產業之發展現況 以亞洲首部區塊鏈電影《聖人大盜》及全球各地應用為例 @ Ministry of CultureSELF TOKEN 區塊鏈前瞻科技於文化娛樂產業之發展現況 以亞洲首部區塊鏈電影《聖人大盜》及全球各地應用為例 @ Ministry of Culture
SELF TOKEN 區塊鏈前瞻科技於文化娛樂產業之發展現況 以亞洲首部區塊鏈電影《聖人大盜》及全球各地應用為例 @ Ministry of CultureJu Chun Ko
 
列印玩桌游
列印玩桌游列印玩桌游
列印玩桌游傑森 林
 
數位、連結、城市
數位、連結、城市數位、連結、城市
數位、連結、城市TH Schee
 
Cocos2d x presentation cocoachina-王哲
Cocos2d x presentation cocoachina-王哲Cocos2d x presentation cocoachina-王哲
Cocos2d x presentation cocoachina-王哲csdnmobile
 
區塊鏈 (比特幣背後的關鍵技術) -- 十分鐘系列
區塊鏈  (比特幣背後的關鍵技術)   -- 十分鐘系列區塊鏈  (比特幣背後的關鍵技術)   -- 十分鐘系列
區塊鏈 (比特幣背後的關鍵技術) -- 十分鐘系列鍾誠 陳鍾誠
 

Similar to Html5环保小游戏 (20)

遊戲引擎超簡單入門
遊戲引擎超簡單入門遊戲引擎超簡單入門
遊戲引擎超簡單入門
 
瀏覽器講古
瀏覽器講古瀏覽器講古
瀏覽器講古
 
07 funny sango td and cocos2d-x
07   funny sango td and cocos2d-x07   funny sango td and cocos2d-x
07 funny sango td and cocos2d-x
 
OpenLab.Taipei #2 PORTA2030
OpenLab.Taipei #2 PORTA2030OpenLab.Taipei #2 PORTA2030
OpenLab.Taipei #2 PORTA2030
 
Gamification 遊戲化是在 Play 蝦米 Game
Gamification 遊戲化是在 Play 蝦米 GameGamification 遊戲化是在 Play 蝦米 Game
Gamification 遊戲化是在 Play 蝦米 Game
 
從雛形到設計-了解您的使用者在想什麼
從雛形到設計-了解您的使用者在想什麼從雛形到設計-了解您的使用者在想什麼
從雛形到設計-了解您的使用者在想什麼
 
The Overview of Web Design
The Overview of Web DesignThe Overview of Web Design
The Overview of Web Design
 
HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程
 
一場與程式設計的邂逅
一場與程式設計的邂逅一場與程式設計的邂逅
一場與程式設計的邂逅
 
高雄和春資工系-Axure RP基礎課程
高雄和春資工系-Axure RP基礎課程高雄和春資工系-Axure RP基礎課程
高雄和春資工系-Axure RP基礎課程
 
成大心理系-Prototyping方法
成大心理系-Prototyping方法成大心理系-Prototyping方法
成大心理系-Prototyping方法
 
Graphic programming in js
Graphic programming in jsGraphic programming in js
Graphic programming in js
 
我用Django做页游
我用Django做页游我用Django做页游
我用Django做页游
 
iOS app security
iOS app security  iOS app security
iOS app security
 
SELF TOKEN 區塊鏈前瞻科技於文化娛樂產業之發展現況 以亞洲首部區塊鏈電影《聖人大盜》及全球各地應用為例 @ Ministry of Culture
SELF TOKEN 區塊鏈前瞻科技於文化娛樂產業之發展現況 以亞洲首部區塊鏈電影《聖人大盜》及全球各地應用為例 @ Ministry of CultureSELF TOKEN 區塊鏈前瞻科技於文化娛樂產業之發展現況 以亞洲首部區塊鏈電影《聖人大盜》及全球各地應用為例 @ Ministry of Culture
SELF TOKEN 區塊鏈前瞻科技於文化娛樂產業之發展現況 以亞洲首部區塊鏈電影《聖人大盜》及全球各地應用為例 @ Ministry of Culture
 
列印玩桌游
列印玩桌游列印玩桌游
列印玩桌游
 
數位、連結、城市
數位、連結、城市數位、連結、城市
數位、連結、城市
 
Cocos2d x presentation cocoachina-王哲
Cocos2d x presentation cocoachina-王哲Cocos2d x presentation cocoachina-王哲
Cocos2d x presentation cocoachina-王哲
 
HPX_HP25_專案管理:如何言之有物
HPX_HP25_專案管理:如何言之有物HPX_HP25_專案管理:如何言之有物
HPX_HP25_專案管理:如何言之有物
 
區塊鏈 (比特幣背後的關鍵技術) -- 十分鐘系列
區塊鏈  (比特幣背後的關鍵技術)   -- 十分鐘系列區塊鏈  (比特幣背後的關鍵技術)   -- 十分鐘系列
區塊鏈 (比特幣背後的關鍵技術) -- 十分鐘系列
 

More from taobao.com

编辑器设计U editor
编辑器设计U editor编辑器设计U editor
编辑器设计U editortaobao.com
 
淘宝开放产品前端实践
淘宝开放产品前端实践淘宝开放产品前端实践
淘宝开放产品前端实践taobao.com
 
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化taobao.com
 
第三方内容开发最佳实践
第三方内容开发最佳实践第三方内容开发最佳实践
第三方内容开发最佳实践taobao.com
 
编辑器设计Kissy editor
编辑器设计Kissy editor编辑器设计Kissy editor
编辑器设计Kissy editortaobao.com
 
百度前端性能监控与优化实践
百度前端性能监控与优化实践百度前端性能监控与优化实践
百度前端性能监控与优化实践taobao.com
 
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践Node.js在淘宝的应用实践
Node.js在淘宝的应用实践taobao.com
 
Kind editor设计思路
Kind editor设计思路Kind editor设计思路
Kind editor设计思路taobao.com
 
Java script physical engine
Java script physical engineJava script physical engine
Java script physical enginetaobao.com
 
阅读类Web应用前端技术探索
阅读类Web应用前端技术探索阅读类Web应用前端技术探索
阅读类Web应用前端技术探索taobao.com
 
完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索taobao.com
 
张平:JavaScript引擎实现
张平:JavaScript引擎实现张平:JavaScript引擎实现
张平:JavaScript引擎实现taobao.com
 
高力:19楼现有前端架构
高力:19楼现有前端架构高力:19楼现有前端架构
高力:19楼现有前端架构taobao.com
 
李成银:前端编译平台
李成银:前端编译平台李成银:前端编译平台
李成银:前端编译平台taobao.com
 
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具taobao.com
 
张克军:前端基础架构的实践和思考
张克军:前端基础架构的实践和思考张克军:前端基础架构的实践和思考
张克军:前端基础架构的实践和思考taobao.com
 
刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践taobao.com
 
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践taobao.com
 
前端Mvc探讨及实践
前端Mvc探讨及实践前端Mvc探讨及实践
前端Mvc探讨及实践taobao.com
 

More from taobao.com (20)

编辑器设计U editor
编辑器设计U editor编辑器设计U editor
编辑器设计U editor
 
Berserk js
Berserk jsBerserk js
Berserk js
 
淘宝开放产品前端实践
淘宝开放产品前端实践淘宝开放产品前端实践
淘宝开放产品前端实践
 
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
 
第三方内容开发最佳实践
第三方内容开发最佳实践第三方内容开发最佳实践
第三方内容开发最佳实践
 
编辑器设计Kissy editor
编辑器设计Kissy editor编辑器设计Kissy editor
编辑器设计Kissy editor
 
百度前端性能监控与优化实践
百度前端性能监控与优化实践百度前端性能监控与优化实践
百度前端性能监控与优化实践
 
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
 
Kind editor设计思路
Kind editor设计思路Kind editor设计思路
Kind editor设计思路
 
Java script physical engine
Java script physical engineJava script physical engine
Java script physical engine
 
阅读类Web应用前端技术探索
阅读类Web应用前端技术探索阅读类Web应用前端技术探索
阅读类Web应用前端技术探索
 
完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索
 
张平:JavaScript引擎实现
张平:JavaScript引擎实现张平:JavaScript引擎实现
张平:JavaScript引擎实现
 
高力:19楼现有前端架构
高力:19楼现有前端架构高力:19楼现有前端架构
高力:19楼现有前端架构
 
李成银:前端编译平台
李成银:前端编译平台李成银:前端编译平台
李成银:前端编译平台
 
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
 
张克军:前端基础架构的实践和思考
张克军:前端基础架构的实践和思考张克军:前端基础架构的实践和思考
张克军:前端基础架构的实践和思考
 
刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践
 
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
 
前端Mvc探讨及实践
前端Mvc探讨及实践前端Mvc探讨及实践
前端Mvc探讨及实践
 

Html5环保小游戏