HTML 5 的手机游戏html5跨平台游戏设计都有哪些

手机上玩得更爽
扫描关注微信订阅号
精品小游戏
安卓的亲们有福啦
扫描下载安卓版APP
节省流量同步更新
游戏分类:
109207人玩过
10?很简单吗,没多少人能做到的
77741人玩过
轻松到10的神人可以试试这个
3152人玩过
脸盲与眼力中级测试
9749人玩过
只要功夫深,见缝能插针
12121人玩过
从一堆大头人中找出真正的媚娘
12598人玩过
智商大考验,很少人能行喔!
9077人玩过
经典的打企鹅游戏
5018人玩过
用IQ浇灌花儿
5321人玩过
成长类小游戏
7163人玩过
用最短的时间从1点到50
6904人玩过
点击同色块消除,碰壁即失败!
4744人玩过
只能一气哈成,很考验智慧噢
6537人玩过
看看你的左右脑是不是一样强
6055人玩过
一款跑酷游戏,很考验反应
7677人玩过
经典的消除类游戏组团来袭啦
3609人玩过
我们来了,单身狗快让道!
3579人玩过
火爆朋友圈的游戏,大家来比比吧
3421人玩过
女生喜欢的连线游戏
微信扫描马上玩
Copyright (C) 2014 -
All Rights ReservedHilo,一套HTML5跨终端的互动游戏解决方案。内核极简,提供包括DOM,Canvas,Flash,WebGL等多种渲染方案,满足全终端和性能要求。支持多种模块范式的包装版本以及开放的扩展方式,方便接入和扩展。提供对2D物理,骨 ...
切水果游戏曾经是一款风靡手机的休闲游戏,今天要介绍的就是一款网页版的切水果游戏,由JavaScript和HTML5实现,虽然功能和原版的相差很大,但是基本的功能还是具备了,还是模仿挺逼真的。有一定JavaScript水平的朋 ...
月薪十万,每周工作五天,日均工作 6 小时,有着五周的旅行假,如此充分的时间和高额的收入,有足够的条件在业余时间研发出一款精美的独立游戏——看了国外独立开发者的生存现状,国内同行们真是一把辛酸泪。 ... ...
吃豆游戏可以说是我们80,90后共同的回忆录,作者利用canvas重新写了这个游戏,代码分两部分,游戏引擎和游戏主程序,引擎用来类的定义,管理动画场景,事件定义等等……游戏主程序主要组织业务逻辑,游戏效果也很炫 ...
HTML5凭借它的开放性和强大的编程能力,取代Flash是必然趋势。你会看到,越来越多的界面设计精美、效果很酷的HTML5游戏不断涌现出来。这篇文章推荐的15款HTML5游戏把技术发挥到了极致,用事实证明,HTML5可以创建出 ...
一直想自己做点小东西,直到最近看了本《HTML5游戏开发》,才了解游戏开发中的一点点入门知识。本篇就针对学习的几个样例,自己动手实践,做了个FlappyBird,源码共享在度盘 ;也可以参考github,里面有更多的游戏样 ...
随着HTML5发展及大型发行商支持,2D游戏变得越来越多,得益于Unity和在线2D游戏资源商店的出现;最近,海外开发者推荐了10个顶级在线2D游戏资源网站,有些是商业版,还有些是免费的,希望对从事2D游戏的开发者们能够 ...
以《围住神经猫》为代表HTML5游戏在朋友圈爆红后,不少人认为这一标准在2015年迎来一次大爆发。可眼下市场上能被人们想起的HTML游戏仍未出现。为什么HTML5游戏在这个爆发之年没有爆发,背后到底有着怎样的原因? ...
想挑战下自己实现个100行JS的3D小游戏,折腾了一番最终采用 Hightopo 搞了个3D贪吃蛇游戏,算了算JS代码还只有90来行,终于满足了自己的小小心愿写完这篇可以满意去睡觉了。 ...
之前分享过很多不错的HTML5游戏,效果都非常炫酷,比如HTML5最新经典俄罗斯方块游戏插件就非常经典,今天要介绍的是一款基于HTML5的赣极方棋游戏,这有点像斗兽棋和中国象棋的结合,可以根据动物之间的实力来吃掉对 ...
Powered by分享开发HTML5手机游戏的5个注意要点
发布时间: 11:15:25
游戏邦注:本文作者是Scott Hyman,其曾任职于Creat Studios、Vivendi Games Mobile和JAMDAT,在业内已有18年经验,现任职于MocoSpace,领导该公司内部的游戏工作室。
过去2年,我们都见证手机和社交游戏的兴起:两大游戏类型既各自发展,同时也开始互相渗透,融入HTML5技术。
手机社交游戏有自己的用户基础,日益蓬勃发展。
这个新兴游戏类型兼容网页社交游戏和本土应用的优点,但这两种内容无法完美结合。除非游戏搭载手机社交网络,否则将很难吸引玩家好友参与。
面对数百万潜在用户,以及饱和游戏市场态势,手机游戏开发商既拥有机遇,也面临挑战。想要避免在游戏行业受挫,HTML5游戏开发商应牢记下述5点建议。
1. 在制作完善的作品中,多数玩家都不会察觉内容是基于浏览器
随着HTML5技术不断成熟,基于浏览器的游戏让人觉得越来越像基于应用的丰富体验。随着Android和iPhone设备的升级,其差异性越来越小。
2. 不要盲目迷信神奇高端技术
目前最好还是瞄准低端HTML5浏览器。HTML5优点多多并不意味着你需把握其所有特性。很多用户目前依然使用低端手机,这些设备无法处理设计师和工程师所构想的尖端理念。开发商应提供能够运作于所有设备的稳固游戏机制。
3. 尺寸至关重要:注意屏幕效果
我们很容易忽略PC和智能手机浏览器之间的差异(游戏邦注:虽然其差异显而易见)。切勿让玩家为准确点击按键或链接,反复放大或缩小界面。
手机社交游戏首先是手机游戏,其次才是社交游戏。提供保持粘性的工具很重要,但记住杂乱屏幕也会令用户感到沮丧。
4. 屏幕更小,注意持续时间更短
手机内容开发商面临的另一挑战是玩家注意持续时间非常短;手机玩家通常会在30-90秒内就给新游戏下结论,而网页游戏新玩家则会玩过几分钟后才下定论。
注意你不仅需和其他游戏竞争,也要和文本信息、好友呼吁及Lady Gaga最新视频角逐。确保游戏能够快速吸引用户,否则他们就会转投其他更富趣味的内容。
5. 时间就是金钱:探索能促使玩家持续互动的渠道,同时提供长短期玩法选择
提供能够快速爆发的玩法,同时确保玩家持续参与,这是手机游戏的最佳运作状态。找准二者平衡点是开发商面临的最大挑战,但若能实现,其将获得丰厚回报。
向玩家交错呈现短期和长期玩法循环内容是个两全其美之策。他们会更迫不及待地参与你的游戏,不论是呆在公交站台的短短5分钟,还是拥有好几小时空闲,能够舒服坐在家里的沙发消遣。
例如,Zynga就巧妙设计其多款Ville游戏(游戏邦注:《Farmville》、《Cityville》和《Frontierville》),玩家既能在忙碌一天中抽出几分钟进行休闲,也能沉浸其中数个小时。许多MocoSpace内容都提供各自玩法循环机制,旨在充分利用玩家使用手机设备的各种情境。
自身经验总结
随着HTML5 WebKit不断深入市场,手机社交游戏有望获得较高粘性。手机社交游戏和当前基于应用的内容究竟谁主沉浮,还有待继续观望。
以下是MocoSpace Games平台的若干综合数据:
* 日体验时长:500万分钟
* 玩家日平均体验时长:29分钟
* 日平均访问次数:82万次
* 手机社交游戏总数:14款
* 排名前3的作品:《Street Wars》、《Cute or Boot》和《开心农场》
最后,若你需要资金,MocoSpace将给予帮助。
MocoSpace不仅设立200万美元的HTML5游戏开发基金,服务游戏开发和推广,而且还提供各种资源,从AngelList之类的天使投资者,到DeNA和The9之类的主流游戏开发商也均有提供开发基金,推动手机游戏的发展。
这片市场如今开始不断升温,我们是时候填充些创造性火苗,但同时需留心用户需求,避免引火自焚。(本文为游戏邦/编译,如需转载请联系:游戏邦)
MocoSpace’s Scott Hyman on 5 tips for developing HTML5 mobile games
by Scott Hyman
Previously at Creat Studios, Vivendi Games Mobile and JAMDAT, amongst others, Scott brings eighteen years of industry experience to MocoSpace. He heads the company’s internal game studio.
We’ve all witnessed the growth of mobile and social gaming over the past two years: the two genres have continued to evolve independently, while also coming together and embracing the power of HTML5.
Mobile browser-based social games have found an audience and are thriving.
This new gaming category draws from the strength of both web social gaming and native mobile apps, but the two do not overlap perfectly. Unless the game is featured on a mobile social network, the engagement of friends may prove difficult.
With the potential to reach millions of people, but faced with a glut of games on the market, the mobile game developer is faced with great opportunity, as well as great challenges. To avoid getting burned in the business of gaming, HTML5 game developers should keep in mind the following five tips.
1. In a well-built game, most customers won’t know it’s browser-based
As HTML5 techniques continue to improve, browser-based games feel more and more like rich, app-based experiences. With each new update to Android and iteration of the iPhone, users will soon have no distinction between the two. That said, take heed of tip no. 2.
2. Don’t be tempted (yet) by fancy, higher-end tech
For now, build for lower-end HTML5 browsers. Just because HTML5 is chock-full of goodness doesn’t mean that you have to utilise everything it can do. Many consumers are still lugging around lower-end browser phones that can’t handle every cutting-edge concept designers and engineers can dream up. Focus on delivering a solid game mechanic that can comfortably run on most devices.
3. Size does matter: Be aware of screen real estate
While it may seem obvious, it can be easy to lose sight of the difference between a PC and a smartphone browser. Don’t make players zoom in and out just to be able to accurately click on buttons or links.
Mobile social games are mobile games first and social games second. Give players the tools to keep connected and engaged, but remember that screen clutter leads to player frustration.
4. Smaller screen, shorter attention span
Another challenge for mobile developers is the shorter attention s mobile game players are likely to pass judgment on new titles in as little as 30 to 90 seconds, while players of new web-based games may take several minutes before making any decisions.
Realise that you’re competing not only with other games, but also with text messages, calls from the best friend, and Lady Gaga’s latest video. Be sure to engage users quickly, or they’ll move on to something more exciting.
5. Time is money: Find ways for users to engage socially while providing short and longer-term gameplay option
Mobile games work best when they can provide quick bursts of gameplay along with longer periods of engagement. Finding this balance may be the greatest trick of all, but it’s sure to pay handsomely when accomplished.
Work to establish short and longer-term gameplay loops to give players the best of both worlds. They’ll be more eager to play your game, whether they have five minutes at the bus stop or a couple of hours to relax on the couch at home.
For example, Zynga designed its Ville games (Farmville, Cityville, Frontierville) to allow players to check in for a few minutes during a busy day, or to provide hours of engagement. Many of our titles at MocoSpace offer multiple gameplay loops to take advantage of the variety of circumstances where players use their mobile phones.
Our lessons
As HTML5 WebKit phones continue to grab market share, unexpected opportunities for high engagement with mobile browser-based social games will arise. How well they compete with the current app-based markets remains to be seen.
For background, here are some general statistics we are seeing on the MocoSpace Games platform:
* Minutes played per day: 5 million
* Average minutes played per day per game-playing user: 29
* Average number of sessions per day: 820,000
* Total number of mobile social games: 14 (with many more on the way)
* Top 3 games: Street Wars, Cute or Boot, Happy Farm.
Lastly, if you need funds, they’re available.
Not only has MocoSpace created a $2 million HTML5 Game Development Fund for development and distribution, but there are also a variety of sources, ranging from angel investors like AngelList to major games companies like DeNA and The9, which have all created funds to spur the growth of mobile games.
The market is truly heating up – now’s the time to feed those creative fires, while keeping a finger on the pulse of consumers to avoid getting burned.(Source:)
CopyRight Since 2010 GamerBoom All rights reserved &&闽ICP备&号-1您所在的位置: &
举例阐述制作HTML5手机游戏的7个步骤(1)
举例阐述制作HTML5手机游戏的7个步骤(1)
希望你通过这个粗糙的教程能学习到一些制作HTML5游戏的技巧。我们已经制作了一款非常简单的游戏,它可以在大多数智能手机和浏览器上运行。如果你有兴趣进一步探索手机HTML5游戏的潜力,我建议你多多测试框架,看看什么对你有用。
想用HTML5制作跨平台的手机游戏?不必理会Java或Objective-C?也不用管应用商店?听起来真不可思议!
现在有许多游戏开发者都在挖掘手机HTML手机游戏的潜能。如《Nutmeg》和《Lunch Bug》就是优秀的案例。HTML5游戏的优势在于,使用相同的代码就能让游戏在手机和电脑上运行得一样好。这是否意味着HTML5能够让游戏代码编写成为一件一劳永逸的事?
在你开始编写你自己的&神庙逃亡&或&愤怒的小鸟&以前,以下几点可能会浇灭你的创作热情:
一般说来,手机浏览器的JavaScript引擎表现并不出众。尽管从iOS 6和Chrome的Android测试版的情况上看,它进步得很快。
Android设备的分辨率已经五花八门了,更别说iPhone 4和iPad 3的分辨率和像素密度也在不断提高。
但愿你不介意没有声音的游戏&&手机浏览器的声音支持很差。延迟是主要问题,大部分设备只支持一种声道。iOS甚至要等到用户主动开启才会加载声音。
现在,作为网页开发者的你已经习惯于处理浏览器的这些缺陷。所以,一些技术问题是难不倒你的,对吧?另外,这些表现和声音问题都是暂时的。毕竟手机浏览器进步飞快,这些问题很快就会变成历史。
在本教程中,你将通过制作一款比较简单的游戏来了解这些基本问题以及解决办法。
iphone(from smashingmagazine)
这是一款相当简单的游戏:玩家要做的就是点击从屏幕底部浮起来的白色圆形,不要让它们通过。你可以把这些白色圆形想象成漂浮上升的泡泡,你要在它们飞上天以前刺破它们。所以,我把这款小游戏叫作《POP》。
我们的制作过程可以分成如下7个步骤:
1、设置视图,以适合大多数手机屏幕的尺寸;
2、使用canvas API在屏幕上绘制图形;
3、捕捉触击事件;
4、制作基本的游戏循环;
5、引入游戏&实体&;
6、添加碰撞检测和一些简单的数学计算;
7、修饰外观,即添加少量特效。
1、设置视图
背景故事就随便了。
正如前面提到的,不同的设备具有不同的分辨率和像素密度。这意味着我们必须调整画布以适应不同的视图。这就可能损失游戏的外观质量,但我们有一个小技巧,也就是先使用小画布,然后按比例放大,这么做后的画面效果就好多了。
我们先写一段基本的HTML代码:
&!DOCTYPE&HTML&&lang=&en&&&&charset=&UTF-8&P&&name=&viewport&&content=&width=device-width,&user-scalable=no,&initial-scale=1,&maximum-scale=1,&user-scalable=0&P&&&name=&apple-mobile-web-app-capable&&content=&yes&&&&name=&apple-mobile-web-app-status-bar-style&&content=&black-translucent&&&&type=&text/css&&body&{&margin:&0;&padding:&0;&background:�}&canvas&{&display:&&margin:&0&&background:&#&}&&&&&&&//&all&the&code&goes&here&&&&
这个meta视图标签的作用是,命令浏览器禁止用户缩放画面,以及按完全尺寸渲染,而不是收缩页面。随后的带apple-前缀的meta标签允许游戏被加入书签。在iPhone上,加入书签的应用不会显示页面底部的在工具条上,因此节省了大片空间。
看看以下代码:
//&namespace&our&game&var&POP&=&{&//&set&up&some&initial&values&WIDTH:&320,&HEIGHT:&&480,&//&we&ll&set&the&rest&of&these&//&in&the&init&function&RATIO:&&null,&currentWidth:&&null,&currentHeight:&&null,&canvas:&null,&ctx:&&null,&init:&function()&{&//&the&proportion&of&width&to&height&POPPOP.RATIO&=&POP.WIDTH&/&POP.HEIGHT;&//&these&will&change&when&the&screen&is&resized&POPPOP.currentWidth&=&POP.WIDTH;&POPPOP.currentHeight&=&POP.HEIGHT;&//&this&is&our&canvas&element&POP.canvas&=&document.getElementsByTagName(&canvas&)[0];&//&setting&this&is&important&//&otherwise&the&browser&will&//&default&to&320&x&200&POPPOP.canvas.width&=&POP.WIDTH;&POPPOP.canvas.height&=&POP.HEIGHT;&//&the&canvas&context&enables&us&to&//&interact&with&the&canvas&api&POPPOP.ctx&=&POP.canvas.getContext(&2d&);&//&we&re&ready&to&resize&POP.resize();&},&resize:&function()&{&POP.currentHeight&=&window.innerH&//&resize&the&width&in&proportion&//&to&the&new&height&POPPOP.currentWidth&=&POP.currentHeight&*&POP.RATIO;&//&this&will&create&some&extra&space&on&the&//&page,&allowing&us&to&scroll&past&//&the&address&bar,&thus&hiding&it.&if&(POP.android&||&POP.ios)&{&document.body.style.height&=&(window.innerHeight&+&50)&+&&px&;&}&//&set&the&new&canvas&style&width&and&height&//&note:&our&canvas&is&still&320&x&480,&but&//&we&re&essentially&scaling&it&with&CSS&POPPOP.canvas.style.width&=&POP.currentWidth&+&&px&;&POPPOP.canvas.style.height&=&POP.currentHeight&+&&px&;&//&we&use&a&timeout&here&because&some&mobile&//&browsers&don&t&fire&if&there&is&not&//&a&short&delay&window.setTimeout(function()&{&window.scrollTo(0,1);&},&1);&}&};&window.addEventListener(&load&,&POP.init,&false);&window.addEventListener(&resize&,&POP.resize,&false);&
首先,我们要给游戏创建一个命名空间&POP&。优秀的开发者不会污染整个命名空间的。比较好的做法是在程序的开头部分就声明所有变量。大部分变量 是很容易理解的:canvas表示HTML中的canvas元素;ctx使我们可以通过JavaScript canvas API来访问它。
在POP.init,我们获得canvas元素的引用,调整canvas元素的尺寸为480 &
320。resize函数会在调整大小和加载事件时启用,从而按比例调整canvas的style属性(游戏邦注:高度和宽度)。实际上,canvas仍 然是相同的尺寸,只是已经通过CSS放大了。试一试调整你的浏览器大小,看看canvas的缩放效果。
如果你在你的手机上实验,你会发现地址栏仍然可见。解决这个问题的做法是:对文件添加额外像素,然后向下滚动以隐藏地址栏,如下:
//&we&need&to&sniff&out&Android&and&iOS&//&so&that&we&can&hide&the&address&bar&in&//&our&resize&function&POP.ua&=&navigator.userAgent.toLowerCase();&POPPOP.android&=&POP.ua.indexOf(&android&)&&-1&?&true&:&&POP.ios&=&(&POP.ua.indexOf(&iphone&)&&-1&||&POP.ua.indexOf(&ipad&)&&-1&&)&?&true&:&&
以上代码搜索userAgent,如果存在则标记。在调用POP.resize()以前,把它添加到POP.init后面。
然后,在resize函数中,如果android或ios为true,我们就把文件的高度再增加50像素&&这就足以隐藏地址栏了。
//&this&will&create&some&extra&space&on&the&//&page,&enabling&us&to&scroll&past&//&the&address&bar,&thus&hiding&it.&if&(POP.android&||&POP.ios)&{&document.body.style.height&=&(window.innerHeight&+&50)&+&&px&;&}&
注意,我们的做法只适用于Android和iOS设备;否则,讨厌的滚动条就会出现。另外,我们必须延迟scrollTo,以确保Safari设备不会忽略它。
2、在画布上绘制
我们已经根据视图调整好画布了,接下来我们该在上面画点什么了。
注:在本教程中,我们只使用基本的几何形状。iOS 5和Chrome的Android测试版可以用很高的帧率处理大量子画面。在Android
3.2或以下版本中实验一下,你会发现前者的帧率确实大大提高了。幸运地是,绘制圆形并不需要占用太多内存,所以我们的游戏中可以大量使用圆形,即使是在 老设备上,表现也不会太差。
以下,我们已经添加了一个基本的Draw对象,使我们可以清除屏幕,绘制矩形和圆形,然后添加文本。
//&abstracts&various&canvas&operations&into&//&standalone&functions&POP.Draw&=&{&clear:&function()&{&POP.ctx.clearRect(0,&0,&POP.WIDTH,&POP.HEIGHT);&},&rect:&function(x,&y,&w,&h,&col)&{&POP.ctx.fillStyle&=&col;&POP.ctx.fillRect(x,&y,&w,&h);&},&circle:&function(x,&y,&r,&col)&{&POP.ctx.fillStyle&=&col;&POP.ctx.beginPath();&POP.ctx.arc(x&+&5,&y&+&5,&r,&0,&&Math.PI&*&2,&true);&POP.ctx.closePath();&POP.ctx.fill();&},&text:&function(string,&x,&y,&size,&col)&{&POP.ctx.font&=&&bold&&+size+&px&Monospace&;&POP.ctx.fillStyle&=&col;&POP.ctx.fillText(string,&x,&y);&}&};&
我们的Draw对象有清除屏幕和绘制矩形、圆形及文本的方法。抽象这些操作的好处是,我们不必记忆确切的canvas API调用,而且绘制圆形的代码简单到只有一句。
代码如下:
//&include&this&at&the&end&of&POP.init&function&POP.Draw.clear();&POP.Draw.rect(120,120,150,150,&&green&);&POP.Draw.circle(100,&100,&50,&&rgba(255,0,0,0.5)&);&POP.Draw.text(&Hello&World&,&100,&100,&10,&&#000&);&
把上述代码放在POP.init函数之后。你应该可以看到画布上绘制出许多图形。
3、触击事件
与click事件一样,手机浏览器有捕捉触击事件的方法。
以下代码的重点是touchstart、touchmove和touchend事件。对于标准的click事件,我们可以从e.pageX的 e.pageY中获得座标。触击事件则稍有不同,它们有一个touches集合,其中的各个元素都包含触击座标和其他数据。我们只想要第一次触击,所以我 们要设置一个e.touches[0]。
注:只有版本4以后, Android才支持访问多次触击动作的JavaScript。
当禁用滚动、缩放和其他会中断游戏的活动时,我们还要调用e.preventDefault(); 。
添加以下代码到POP.init函数:
//&listen&for&clicks&window.addEventListener(&click&,&function(e)&{&e.preventDefault();&POP.Input.set(e);&},&false);&//&listen&for&touches&window.addEventListener(&touchstart&,&function(e)&{&e.preventDefault();&//&the&event&object&has&an&array&//&named&&we&just&want&//&the&first&touch&POP.Input.set(e.touches[0]);&},&false);&window.addEventListener(&touchmove&,&function(e)&{&//&we&re&not&interested&in&this,&//&but&prevent&default&behaviour&//&so&the&screen&doesn&t&scroll&//&or&zoom&e.preventDefault();&},&false);&window.addEventListener(&touchend&,&function(e)&{&//&as&above&e.preventDefault();&},&false);&你可能已注意到,以上代码把事件数据传输给Input对象。但我们现在要先定义一下它:&//&+&add&this&at&the&bottom&of&your&code,&//&before&the&window.addEventListeners&POP.Input&=&{&x:&0,&y:&0,&tapped&:false,&set:&function(data)&{&this.x&=&data.pageX;&this.y&=&data.pageY;&this.tapped&=&true;&POP.Draw.circle(this.x,&this.y,&10,&&red&);&}&};&
现在,测试一下。圆形没有出现。这是为什么?有了!因为我们已经缩放画布了,当映射触击到屏幕的位置时,我们必须考虑到这一点。
首先,我们必须从座标中扣除偏移值。
var&offsetTop&=&POP.canvas.offsetTop,&offsetLeft&=&POP.canvas.offsetL&this.x&=&data.pageX&&&offsetL&this.y&=&data.pageY&&&offsetT&
offset_diagram(from smashingmagazine)
然后,考虑到画布已经缩放过了,我们得计算一下实际画布(游戏邦注:仍然是320 & 480)。
var&offsetTop&=&POP.canvas.offsetTop,&offsetLeft&=&POP.canvas.offsetL&scale&=&POP.currentWidth&/&POP.WIDTH;&this.x&=&(&data.pageX&&&offsetLeft&)&/&&this.y&=&(&data.pageY&&&offsetTop&)&/&&
scaled_canvas_diagram(from smashingmagazine)
你开始觉得头疼了吧?那我就给你举个例子。想象一下玩家轻击500 & 750的画布上的座标400,400。我们必须调整这个座标,因为画布的实际尺寸是480 & 320。所以,真正的X座标是400除以比例,即400 & 1.56 = 320.5。
我们当然不是在每一个触击事件发生时计算,而是在调整完画布尺寸后计算座标。在程序的开头部分添加如下代码,以及其他变量声明:
//&let&s&keep&track&of&scale&//&along&with&all&initial&declarations&//&at&the&start&of&the&program&scale:&&1,&//&the&position&of&the&canvas&//&in&relation&to&the&screen&offset&=&{top:&0,&left:&0},&
在我们的调整大小函数中,调整画布的宽高后,我们要记录一下当前的尺寸和偏移量:
//&add&this&to&the&resize&function.&POPPOP.scale&=&POP.currentWidth&/&POP.WIDTH;&POPPOP.offset.top&=&POP.canvas.offsetT&POPPOP.offset.left&=&POP.canvas.offsetL&
现在,我们可以在POP.Input类的set方法中使用它们了:
this.x&=&(data.pageX&&&POP.offset.left)&/&POP.&this.y&=&(data.pageY&&&POP.offset.top)&/&POP.&
别走开,下页内容更精彩
内容导航&第 1 页: &第 2 页:
关于&&&&的更多文章
CocoStudio工具集是开源游戏引擎Cocos2d-x开发团队官方推出的游
北京时间日,苹果在加利福尼亚召开新品发
免费下载+应用内购买(In-App Purchase)已成为移动应用
现在天气渐凉,秋意越来越浓厚了,上周,公司全体组织
SQL(结构化查询语言)是数据库系统的通用语言,利用它可以用几乎同样的语句在不同的数据库系统上执行同样的操作,在数据库系统的
Windows Phone专家
Android开发专家
51CTO旗下网站}

我要回帖

更多关于 html5游戏发布平台 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信