51CTO下载-HTML5游戏开发

nullHTML5游戏开发HTML5游戏开发北京神奇时代 张哲分享内容分享内容体验HTML5小游戏 体验“三国时代OL”网游 HTML5优势和不足 移动设备上的HTML5（iphone） Application Cache 3个实例（css3，div，box2d） QA时间休闲小游戏休闲小游戏开心网 人人 新浪微游戏三国时代OL三国时代OL体验三国时代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等HTML5HTML5“Next,I‘d like to talk about App Store. Before I do that,I want to make something clear.We support two platforms.HTML5 -- it's a completely open, uncontrolled platform. And we fully support it.”HTML5大势所趋HTML5大势所趋跨平台，用JS，大大降低开发成本 各浏览器厂商的支持， 发展迅速 HTML5是社交游戏发展的未来，尤其是针对智能手机而言 与原生客户端的比较，易于推广，更新方便 与Flash比较，不需要Plug-in就能执行，Adobe已放弃移动 HTML5并不是一帆风顺HTML5并不是一帆风顺PC上有Flash，Unity，而HTML5很难改变 国内网络环境，用GPRS下载时间过长， (application cache) 浏览器的兼容性问，实现不同 支持HTML5的手机用户，玩家比例小 原生APP的竞争，功能少 性能问题，实现问题 iphone上的HTML5iphone上的HTML5nullOffline 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 CacheApplication Cache为什么用Application Cache 如何更新 Appliction CacheAppliction Cache ... CACHE MANIFEST # version v1   # 指明缓存入口 CACHE: index.html style.css images/logo.png scripts/main.js   # 以下资源必须在线访问 NETWORK: login.php var appCache = window.applicationCache;     if (appCache.status == window.applicationCache.UPDATEREADY) { appCache.swapCache(); window.location.reload(); // 得到最新版本缓存列表，并且成功下载资源，更新缓存到最新 } 实例分析实例分析UI+页面切换特效 CSS Animation, CSS Transform 可滑动的输入器 DIV, CSS, Touch Event Box2DIphone赢在用户体验 Iphone赢在用户体验 JQuery Mobile 1.0 releasedJQuery Mobile 1.0 releasedhttp://jquerymobile.com三国时代OL三国时代OLCSS3CSS3.slide.in { -webkit-animation-name: slideinfromright; -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 350ms; } @-webkit-keyframes slideinfromright { from { -webkit-transform: translateX(100%); to { -webkit-transform: translateX(0); } $(currentPage).addClass("slide in");CSS3CSS3.splash{ border:5px solid #dedede; -webkit-animation-name: splashAnim; -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 1s; -webkit-animation-iteration-count:infinite; } @-webkit-keyframes splashAnim { from { border-color: #eeee00;} to { border-color: #000000;} }SliderSliderSliderSlidersliderBar = document.createElement("div"); 一组Div+CSS组成 sliderBar.ontouchmove = function(evt) { sliderBarMove(evt); } sliderBarMove : function(evt) { x = evt.touches[0].pageX; sliderBar.style.left = x + "px"; onChange(); } sliderMin，sliderMax，onChange()Box2d+html5的初探Box2d+html5的初探Box2d 是一个很著名的模拟真实物理的引擎.有C++,java,FLASH等语言版本,现在顺应HTML5大环境提供了javascript版本(http://box2d-js.sourceforge.net/) ,现有的版本是依据Box2DFlashAS3_1.4.3.1版本而来.所以实现方式和FLASH版几乎一致 。 Box2d+html5的初探创建一个世界: var worldAABB = new b2AABB(); worldAABB.minVertex.Set(-1000, -1000); worldAABB.maxVertex.Set(1000, 1000);(世界大小) var gravity = new b2Vec2(0, 300);(重力) var doSleep = true; world = new b2World(worldAABB, gravity, doSleep); 创建一个小鸟 circleSd = new b2CircleDef(); (一个圆形形状) circleBd.angularDamping = 0.05;(角阻尼) circleSd.density = 1;(密度) circleBd.position.Set(150, 380); (设置坐标) circleSd.radius = 20;(半径) circleBody = world.CreateBody(circleBd); circleSd.restitution = 0.6;(恢复) (世界中创建) circleSd.friction = 0;(摩擦) circleSd.userData = new Sprite(aniMgr); //自定义一个精灵类 circleBd = new b2BodyDef(); (一个刚体) circleBd.AddShape(circleSd);(把之前的形状邦定在刚体上) circleBd.linearDamping = 0;(线性阻尼) Box2d+html5的初探Box2d+html5的初探运行世界 var timeStep = 1.0 / 60; var iteration = 10; world.Step(timeStep, iteration); 操作设置(鼠标或是屏幕触摸): A)选中世界中的刚体 var body = getBodyByTouch(touchX,touch Y,world); 从世界中寻找与触摸点相交的刚体 if (body&&mouseJoint==null) { var md = new b2MouseJointDef(); 创建触摸点关节 md.body1 = world.m_groundBody;   设置body1为无碰撞检测形状的静态刚体 md.body2 = body;设置body2为当前被检测到被点击的刚体  md.target.Set(touchX, touchY);设置触摸点关节的最初世界位置 md.maxForce = 30000 * body.m_mass; // 设置触摸点关节的力度 md.timeStep = timeStep; // 设置触摸点关节的时间步 mouseJoint = world.CreateJoint(md);在世界中创建这个触摸节点关节对象 body.WakeUp();如果当前被触摸的刚体处于休眠状态，则唤醒。 } Box2d+html5的初探Box2d+html5的初探 B） 移动刚体 if (mouseJoint) { ……坐标的限定逻辑处理 var p2 = new b2Vec2(新坐标X, 新坐标y); mouseJoint.SetTarget(p2); //更新触摸节点关节的目标位置 } C）释放 if (mouseJoint!=null) { world.DestroyJoint(mouseJoint); 移除触摸节点关节 mouseJoint = null; } Box2d+html5的初探Box2d+html5的初探绘制世界 function drawWorld(world, context) { context.save(); context.lineWidth = 1; for ( var j = world.m_jointList; j; j = j.m_next) { drawJoint(j, context); } for ( var b = world.m_bodyList; b; b = b.m_next) { for ( var s = b.GetShapeList(); s != null; s = s.GetNext()) { drawShape(s, context); } } context.restore(); }Box2d+html5的初探Box2d+html5的初探绘制小鸟 原型绘制就改用Context 来实现大多数都是线的方式来绘制，具体实现可以参考其它版本的原型绘制 对于具体描绘一个实在的小鸟 是要在drawShape中进行。 由于之前的小鸟绑定在一个圆形的shape，从类型（shape.m_type）中是可以获得的（b2Shape.e_circleShape） 通过 shape.GetUserData()获得之前的绑定自定义的精灵类 利用var pos = shape.m_position得到坐标pos.x, pos.y. 来更新小鸟的坐标 利用shape.GetBody().GetRotation() 更新小鸟自转的弧度。 Box2d+html5的初探Box2d+html5的初探 当然还可以给小鸟加上一些粒子效果，至于粒子系统网上有很多了 就不一一介绍了。 由于box2d运行效率受浏览器执行javascript的效率来决定，所以在PC上的效率远高于手机端，不过由于html5的快速发展 android和ios 以及其它第三方浏览器的不断进步 ，相信不久的将来可以利用box2d创建更加优秀的游戏。Box2d+html5的初探谢谢,QA时间谢谢,QA时间@张哲_James QQ:1241007862