51CTO下载-HTML5游戏开发.ppt

HTML5游戏开发 北京神奇时代 张哲 分享内容 体验HTML5小游戏 体验“三国时代OL”网游 HTML5优势和不足 移动设备上的HTML5（iphone） Application Cache 3个实例分析（css3，div，box2d） QA时间 休闲小游戏 开心网 人人 新浪微游戏 三国时代OL 体验三国时代OL 采用了哪些HTML5 canvas, application cache, localstorage, audio 结合JS+CSS3+DIV css3 animation, div transform 第三方API JQuery1.6, JQuery Mobile，JQuery tmpl 跨平台 iphone，android，Pad，PC 浏览器 自带，UC，QQ，fireforx，opera等 HTML5 “Next,I‘d like to talk about App Store. Before I do that,I want to make something clear.We support two platforms.HTML5 -- its a completely open, uncontrolled platform. And we fully support it.” HTML5大势所趋 跨平台，用JS，大大降低开发成本 各浏览器厂商的支持， 发展迅速 HTML5是社交游戏发展的未来，尤其是针对智能手机而言 与原生客户端的比较，易于推广，更新方便 与Flash比较，不需要Plug-in就能执行，Adobe已放弃移动 HTML5并不是一帆风顺 PC上有Flash，Unity，而HTML5很难改变 国内网络环境，用GPRS下载时间过长， (application cache) 浏览器的兼容性问题，实现不同 支持HTML5的手机用户，玩家比例小 原生APP的竞争，功能少 性能问题，标准实现问题 iphone上的HTML5 Offline a custom icon, a custom startup screen, a native look-and-feel, and you can use the app even when the phone isn’t connected to the Internet. Debug Go to the Settings.app Safari Developer on your iPhone, then turn on the debug console. This will help you spot potential JavaScript errors. Icon/Startup Screen The icon needs to be 57px x 57px. The startup screen needs to be 320px x 460px Offline Localstorage/webdatabase Screen Size app mode: 320x460. web mode: 320x356 or 320x416(no address bar) 各种问题 Iso4.0性能问题。由于采用Retina,对图象优化。Canvas:先放大再用viewport 0.5scale.Div: transform3D Safari 5采用Nitro JavaScript引擎。苹果表示，Mac版Safari 5运行JavaScript脚本的速度比Safari 4快30%，比Chrome 5.0快3%，几乎达到火狐3.6的两倍。 Android Issues: 480x800主流, 移动模式innerWidth/innerHeight System version. 2.1-2.3 Device Issue. HTC: 屏幕假死 Browser Issue. UC，QQ开战了，(默认+主流浏览器) Audio Issue. Application Cache 为什么用Application Cache 如何更新 Appliction Cache html manifest=test.manifest ... /html CACHE MANIFEST # version v1 ? # 指明缓存入口 CACHE: index.html style.css images/logo.png scripts/main.js ? # 以下资源必须在线访问 NETWORK: login.php var appCache = window.applicatio