【3图】【无非游戏】不懂技术就能制作H5游戏的平台，湖里广告传媒 - 小百姓网
小百姓网提醒您：让您提前汇款或者不见面交易的都是骗子！
区域：　　
联系人：无非创意　()
信息详细内容：
无非创意旗下的「无非游戏」是游戏化、社交化H5营销策划活动制作平台，致力于通过高效的游戏化营销为中小企业商家快速带来有效流量、提升用户忠诚度、 提高活动参与度，让游戏营销的理念变得简单并能快速实现。核心特点：平台提供高度灵活的H5游戏模板，使一个零技术开发背景运营人员，只需3分钟就可以制作发布一个将互动元素与促销方法结合的H5营销活动，大大减少制作时间和成本。通过我们，人人都可以成为营销专家，实现短时间内快速推广企业品牌、产品等。 你只需要关注与营销直接相关的内容，而不需要关注技术开发工作。一、游戏化营销，让营销变得简单有趣&&将产品或品牌巧妙地植入小游戏之中，以简单有趣的互动形式，吸引用户参与以及分享，让品牌或产品通过营销游戏在微信等社交平台上得到广泛传播；二、简易操作流程，不懂技术也能做游戏!&&平台上所有游戏里面的文案、图片、BGM等都可以DIY替换，不懂技术，也能轻松自制H5游戏！同时有多种营销方式选择：口令红包、排行榜、助力分享、优惠劵等等，通过这些营销方式促进H5传播；三、四步轻松完成制作&&Step1:根据活动需要和目的选择合适的游戏或者其他营销模板，进行自助制作；Step2:替换游戏中的图片、音乐和文案等素材，将品牌或者广告相关信息植入到游戏中；Step3:根据选择的营销方式，进行口令红包、抽奖、优惠劵和排行榜等设置；&& 总结起来，无非游戏平台给大家带来的好处有以下几点：&&1）省钱：低价制作发布&&2）省时：操作简单，快速轻松自助制作上线&&3）省力：不需要技术能力要求，一个人就能搞定&&4）省心：完全不用担心服务器压力，有遍布全国的机房和服务器，再大流量也不用怕。
联系我时，请说是在小百姓网上看到的，谢谢。
温馨提示:“【无非游戏】不懂技术就能制作H5游戏的平台”由用户自行发布，信息内容的真实性、准确性和合法性由发布人负责。虽然部分网友认证了账号，但是并不代表没有风险。小百姓网不提供任何保证，亦不承担任何法律责任。
更多相同分类的信息
如果您对这个信息不满意，您可以： 　
无非创意H5
信息管理（编号:）
我还发布了以下信息
赞助商广告
您可能还关注的信息
赞助商广告
相关链接：2周、4个人、10万成本打造月入百万的H5游戏_行业资讯_原创频道_当乐网
2周、4个人、10万成本打造月入百万的H5游戏
10654人浏览
硬件设备、网络条件、软件环境、超级App这四个条件，构成了可以承载 Html5（以下简称H5）的载体基础。 所以在2014年7月，H5游戏爆发了， 但当时的H5游戏并不赚钱，只能通过卖广告位等方式来获利，效果并不好。但很多CP借此开始涉足H5游戏的研发，现在，一些H5游戏已经加入付费系统，并获得了不小的收益。以下为H5引擎开发商白鹭时代CEO陈书艺对游戏葡萄专访的回答内容。H5月流水过百万已不是梦在《神经猫》的构思基础上进行游戏更新，追加社交功能，添加一些类似网游的系统，加入付费，我们就能实现H5游戏的变现了。目前一个成功的例子，就是《愚公移山》，它比《神经猫》重度一些，并尝试了道具付费。游戏属于暴漫风格，玩家点击愚公的房子就可以生孩子，生一堆的孩子就能提高挖掘能力，将大山移走，操作简单趣味性足。《愚公移山》游戏界面就目前反馈来看，用户很喜欢《愚公移山》并愿意为它付费，目前月流水在可达100万左右。其中，仅腾讯QQ空间的玩吧单个渠道，2月份流水达40万，3月即将突破60万，4月估计将突破百万，付费率最低为2%。而在1758渠道，付费率可达7%。目前并未做任何to C的营销推广。而《愚公移山》的开发成本仅耗时两周、调用4人，制作投入仅10万元。此外，我们每月还会发布2～3款新游戏，在人手不多的情况下，我们更愿意将人手用在产品质量的提高上。最近发布的四款产品，在玩吧排行榜中均进入前十，甚至带动了整个平台的用户转化率和付费率。但100万的流水对渠道和大CP来说还是太少，所以我们期待的是真正能爆发起来能挣钱的精品游戏。就如同我们在融资和宣传里对CP说的：所有条件都准备好了，只需要你们做出好游戏了。而要知道，一个爆款的出现是需要时间和运气的，第一批出来的游戏可能赚不到那么多的钱，但这并不代表着H5的可能性就不存在了，有媒体对该现象的消极描对一个刚起步的市场来说并不友好，新的市场是需要大家保护的，与刻意吹捧一样，不深入探讨就直接扼杀同样是不可取的。当初页游的出现也不受端游厂商待见，但CP经过不断的尝试和改进，也酝酿出了亿级流水的产品， 同样，H5也需要一个保护的环境。现在很多原生应用都可以利用H5来变现，但现在它们可能只在卖广告位，出售有限的资源。其实H5给行业带来了新的机会和突破口，但我们行业人需要创新的魄力和足够的耐心来开拓它。就如同我，见证着《愚公移山》从上线第一个月40万，到第二个月60万，到目前的100万左右。又看着它从单纯的小游戏，到添加养成要素，再到添加付费点的整个过程，它是切实地在进步的。而我们还有更好的产品，做出的效果更好。H5即将迎来新的爆点目前，大家可能对H5游戏还存有一些误解，在一些报道中提到的三五万、十几万签一款H5产品是不全面的，正如我们现在签约的绝大多数产品均达到百万级。例如开心网制作的《一统天下》，其投入的费用也达到了千万级，这款游戏在海外已经能做到3000万的月收入，目前他们几十人的制作团队要全部投入到H5版本的制作上，同时借助白鹭引擎还能一次开发原生版和H5版，同时推出两个版本，仅H5版本的投入经费已经至少有几百万了。而目前对H5游戏投入了这么多经费的公司已有4、5家。然而，H5也面临着一些需要突破的现状。除了腾讯QQ空间的玩吧、猎豹等合作伙伴以外，很多渠道只是愿意集成引擎并开放流量测试，暂时处于观望阶段和布局阶段。而市场更需要一个更有说服力的爆款来激活。 但这种格局不会持续太久，当一两款爆款出现以后，渠道肯定会立刻加大投入力度的。乐观估计，这种情况会持续半年左右，悲观地看，一年内无论如何都会爆发。现在一些CP做的游戏已经让我们眼前一亮了，仅《愚公移山》这款产品，到上半年就能做到月流水二、三百万，H5整个盘子的流水过千万完全不是问题，所以这已经足够吸引一些不错的公司去尝试了。当有大公司有大量的资金投入以后，当有足够好的CP进来研发产品的时候，H5就会迎来爆点了。据我们的总结，H5游戏市场现在更需要的是创意，在一个新的平台和领域上，能做出一款什么表现形式的游戏？比如QQ空间可以推一些酷炫的游戏，二次元、音乐游戏等等。在社交群里，可以推一些多人游戏，甚至可以在群里直接互动的游戏。甚至Apple Watch推出以后，可以做一款手势联动电视屏幕的家庭游戏。白鹭推出了一款与Flash player很相似的产品“运行时（runtime）”，它可以基于H5引擎来实现运算加速、软硬件适配、硬件接口调用等功能。所以从理论上来说，上述设想都是可实现的，但创意还需要人来发掘。为此，我们也在将H5引擎推广到全球，以吸引更多的产品创意，供我们借鉴。我觉得我就是在送铁锹的，你挖到金山就分我点，没挖到我就去改进铁锹，希望H5游戏能伴随着这个行业一起发展下去。
作者其他文章
Copyright & 2004- . All Rights Reserved.当乐公司 版权所有
微信扫一扫 当乐更好看
当乐公众号二维码H5营销零基础入门 | 教你制作H5游戏_技术吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：166,953贴子：
H5营销零基础入门 | 教你制作H5游戏收藏
在过去的2016年，H5游戏引领了一股新的营 销 潮 流，玩家因此获得了乐趣与奖品，企业因此提高了知名度与营 业 额，可谓说是开创了新的双赢局面。虽然H5游戏已被大众所熟知，但是从某些角度来说，H5行业仍然属于一个新品类，不管是对于行业企业还是用户企业来说，都还有很大的市场潜力。用户企业想要踏进H5营销的圈子，首先第一步就是要学会制作H5游戏。不过，多亏了互联网技术的进步与发展，企业已经基本可以挥手告别高成本开发游戏的时代了，制作H5游戏成为了一件极其简单的事，只要准备以下三个方面的工作就可以了。一、H5游戏制作平台从整体来看，H5游戏制作主要分为两种类型，一是定制，二是自主制作。专门提 供 定 制 服 务的平台有微娱、嘻游记等，它们针对性强，自然价格也不低；而满 足 企业自主制作的平台主要有凡科互动、开心推等，它们制作简单、成 本 极 低，其中，凡科互动更是一个用户管理及运营平台，能满足企业的多样化营 销 需 求，因此自主制作平台是众多企业心目中的首选。二、简洁有力的文案制作H5游戏时，有哪些部分需要用到文案呢？游戏标题、游戏规则、奖品介绍等都是需要精心准备的，虽然游戏的创新性与趣味性才是吸引用户的关键，但是简洁而又富有诱惑力的文案能为游戏加分不少。另外，游戏的宣传推广文案也是其中一部分，一般企业都是将公众号推文与游戏结合在一起同步发布的。三、高清适宜的图片设计及替换游戏图片是制作H5游戏的重要工作。通常，不同游戏制作平台中的游戏模板的风格都各有差异，而这些模板的风格都只是一个参考，企业可以将其“改头换面”，制作出专属的个性风格，而这个只需要通过替换图片来完成。除了风格适宜之外，游戏图片一定要满足高清的要求，具体像素及大小可以参考平台给出的标准。关于利用自主平台制作H5游戏的主要工作，就是以上这三个方面，但如果是选择 定 制 服 务的话，企业要做的就是沟通、沟通再沟通，确保合作能取得预想的效果。就目前来说，前者更适合中小型企业，后者更适合大型企业，相信随着行业的进步以及服 务 的改善，未来企业有望享受到 性 价 比更高、质量更好的H5游戏制作 服 务。
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或热门游戏：
当前位置： >
> H5小游戏的设计经验与方式方法
H5小游戏的设计经验与方式方法
来源：GameRes&&&&日期： 17:10:01
摘要:既然要做基于H5开发的小游戏，我们就应该了解它具有什么特点和优势。这里分享一些小游戏的设计经验与方式方法。
　　一、导言
　　由于近期主要工作为撰写H5小游戏的策划案，使得对这方面的体会日益加深，所以拿出来和大家分享一下。
　　基于H5开发的小游戏是公司的战略，所以我在这里不会赘述H5这个技术的优劣。只是单纯的分享一些小游戏的设计经验与方式方法。
　　二、H5小游戏的特点
　　既然要做基于H5开发的小游戏，我们就应该了解它具有什么特点和优势。
　　在以往的开发过程中我们了解到，H5小游戏的开发周期较短，扩散性较强，主要通过浏览器呈现内容。这就代表它具有快捷的传播特性，相对于有端手游而言较差的留存，较依赖于网络及相对快捷的体验。这几点特性全部指向一个具有轻量化设计，可快速体验并传播的游戏设计。例如：“神经猫”，“见缝插针”这些易用且扩散性较强的产品。
　　了解了这些特性我们就可以试着总结一下我们基于H5开发的小游戏应具有哪些设计理念。
　　三、针对H5小游戏归结的设计理念
　　1. 我们轻，所以我们快
　　2G、3G的传播速度和不高的wifi覆盖率强迫我们把H5小游戏的体量做小做轻。而这恰恰可以成为优势。轻代表快，信息时代要的就是快。快速的传播可以使小游戏成为信息的载体和吸量的工具。
　　目前的手游趋势较为偏重度。轻量化的游戏和即用即抛的设计理念可能会成为玩家下一阶段的需求。所以H5小游戏的体量越小越好，而规则越简单越好。简单不代表要放弃可玩性，简单是设计理念，换来的是易用性和小体量。例如早些阶段的“打企鹅”，体量小，传播快，易用性强。
　　2.这是一个看脸的时代
　　轻代表需要减少美术资源，一个游戏如果缺少了华丽的特效和精美的原画需要如何迎合这个看脸的时代呢?我目前能给出的答案就是，简洁明亮。就好像你没有精致的五官和完美的身材，但至少你要干干净净，昂头挺胸。我们要的是气质。例如“Cannon
Hero”以及“Halos“简单的背景及元素，明亮的角色及场景。这种美术风格营造的效果较为符合”轻“的理念，简单的美术对应简单的玩法，明亮的色调对应易用且轻松的体验。
　　PS：现阶段，像素是柄利器。
　　3.隐性关卡设计
　　传统游戏的关卡设计主要提供给玩家的为目标性，粘稠度。而小游戏对这两者的依赖性较少，较强的关卡概念设计会破坏小游戏对于“轻“的设计理念，使以轻松为主的小游戏玩家变得具有心理负担。但如果一款游戏不具备层次感也是很糟糕的体验，就像玩了一局没有得分的”
flappy bird “。所以，得分的设计能提升玩家的优越感和些许粘稠，同时也是其他系统设计的判定基础，例如提升游戏难度。
　　隐性的关卡主要突出的是层次感，很多小游戏都会在你得分到达一定阶段时为你自动更换背景图片的颜色。这样简单的设计及美术资源不会过于增大游戏的体量，同时会让你的体验具有层次感，你会明确的知道你已经进入“下一阶段“，而不是傻傻的在一条没有尽头的路上面奔跑。这样简单的设计会凸显游戏的设计感并且提高体验。”小游戏“不代表它”傻简单“。
　　4. 微成长
　　小游戏的载体不只是浏览器，还有平台，这略微改善了小游戏较差留存的通病。试想一下，如果你从朋友圈里点击了一个小游戏，升到了十级。当你玩累了关闭浏览器的时候你的数据也随之消失了，这个体验会让玩家很懊恼。我如果需要保存这款小游戏，除了朋友圈能给我提供下载入口之外，我只能通过浏览器的收藏功能收藏网页。这让原本快捷的设计变得又傻又笨。而现阶段很多平台开放了对小游戏的管理，你可以在平台上管理你玩过的小游戏，这使小游戏也可以做一些成长设计增加增加用户粘稠和留存。例如QQ空间里的“愚公移山“。
　　为什么是微成长?还是那句话，我们要的是“轻“。繁重的成长体系不会增加留存。用户选择小游戏的目的是偏于轻体验的减压，如果追求完整的成长体系，用户会选择有端的手游甚至PC端游戏。
　　微成长可以是放置类的设计，或者只是积累游戏币购买角色的其他形象，有追求总比没目标要好。
　　5.操作惯性
　　小游戏的“轻“使得在玩法设计上偏于没有成功只有失败的设计。例如：”flappy
bird“”围住神经猫“等等，玩家要的是分数产出的炫耀。这使小游戏通常走益智或敏捷路线，这种玩法的小游戏操作惯性尤为重要。简单的做法就是在结束界面放一个大大的重新开始按钮，吸引玩家重复挑战。最重要的是游戏的玩法一定要具有挑战性，且耐玩。例如：”Crazy
Labs“。在游戏失败时不要做明显的标志性结点，这样会削弱惯性，具体的体验就是这个界面给玩家的感觉是游戏失败而不是游戏结束。
　　四、这是一个趋势
　　说了这么多久不太多废话了，趋势就是趋势。腾讯的玩吧，360的H5小游戏专题，墨麟，白鹭等等等等，我不知道这是不是下一个时代，但一定是一个新玩法。
将此文分享给好友
相关阅读：
近日，第二届“专注页游30年”中国网页游戏线下交流会..
“如果你在漓江塔里激战正酣，也请你缓一缓脚步，为他献..
7月10日下午，随着小孩捧起街霸5项目的冠军奖杯，本..
近日，据英国《每日邮报》报道，一种刻板印象认为，男生..
据之前媒体报道，全国首届移动电子竞技大赛决赛将于7月..
从投资手法、布局、结果来看，相比于马云“30亿以下的..
一周之内做一款游戏是不容易的，作为一个完成过30个游..
虚拟现实内容的游戏定价是开发者面临的一项艰难决策，这..
最开始的时候，《炉石传说》只是一个小团队做出来的项目..
5月24日，广电总局发布手游审核新规定的时候似乎并没..用canvas开发H5游戏小记 - 吕大豹 - 推酷
用canvas开发H5游戏小记 - 吕大豹
自神经猫风波之后，微信中的各种小游戏如雨后春笋般目不暇接，这种低成本，高效传播的案例很是受开发者青睐。作为一名前端，随手写个这样的小游戏出来应该算是必备技能吧。恰逢中秋节，部门决定上线一个小游戏，在微信里传播一下与用户互动互动。这任务自然落在了我头上。前段时间用DOM+CSS3写了个小游戏，在Android机器上巨卡无比，有了上次的经验，这次决定用canvas来写。其实这些小游戏在业界也都是canvas来做，已经有很成熟的技术和框架，由于不会频繁修改DOM树，所有的动画都是在一块画布上完成，所以在手机上的效果比DOM要优秀很多。
楼主本人用canvas做游戏的经验为0，只在大学的时候鼓捣过一次，知识全部忘却了。这次也是边学边做，鉴于游戏逻辑比较简单，鼓捣了一天，终于搞出一个能玩的了。在此把实现原理记录一下。也给像我这样的初上手的一些参考资料。
先来说说这个游戏，名字叫玉兔吃月饼，很有中秋的氛围哈~玩法非常简单，用手指触控屏幕来控制一只开着飞碟的兔子移动，天上会不停掉月饼，有好月饼和坏月饼之分，吃到好月饼就得分，吃到坏月饼就挂掉。主要逻辑就这么简单。看一下游戏的截图：
，点击试玩。
下面就把整个游戏的实现细节来说一下，其实整体来看还是没有什么难度的。
游戏舞台的尺寸
先从最基本的来说起。游戏的舞台就是我们的canvas元素，这个元素的尺寸应该如何设置呢？既然要适配各种手机屏幕，那我在css中给它宽高都设为100%不就可以喽。其实这个朴素的想法是错误的，canvas元素的使用与普通的html元素并不相同，它有一个默认尺寸300*150，在css中设置宽高只能改变canvas的显示宽高，而并没有改变画布绘制时的尺寸，所以要为canvas设置绘制的尺寸，必须写在元素标签上。例如，我的canvas元素是这样的：
&div id=&gamepanel&&
&canvas id=&stage& width=&320& height=&568&&&/canvas&
这里你可能要问了，为什么尺寸是320*568呢？这里有必要说一下，我们在做手机端页面时，给iPhone的容器宽度是320px，给Android的容器宽度是360px，这里想要兼容两者，所以只能取最小的320了，否则iPhone出现滚动条是很蛋疼的。至于安卓设备，我们只能委屈它一下了，给一个较窄的宽度，然后让整个容器居中对齐，游戏容器的样式如下：
#gamepanel{
width: 320px;
margin: 0 auto;
height: 568px;
position: relative;
overflow: hidden;
宽度整好了，那height值为568又是什么原因呢？其实我也没有研究过，只是看到别人代码里这么写，就抄过来了。
就在楼主写这篇文章的时候，看到了cocos2d-js生成的canvas是这样的规则：
Android设备：360*640
iphone5：320*568
iphone4：320*480
所以以后在不用框架的时候，可以用js判断来确定canvas的尺寸，这里算是学到的一点小知识。
滚动的背景
& & & 我们有一张天空的图片来做背景，并且要不停向下移动，这样感觉飞碟在不停的向前飞行。如何让背景图片连续不间断的移动呢？
首先定义了一个全局对象gameMonitor，游戏控制需要用到的参数、方法，都定义为它的属性，用来组织游戏的整体逻辑。其中，滚动背景的函数rollBg定义如下：
rollBg : function(ctx){
if(this.bgDistance&=this.bgHeight){
this.bgloop = 0;
this.bgDistance = ++this.bgloop * this.bgS
ctx.drawImage(this.bg, 0, this.bgDistance-this.bgHeight, this.bgWidth, this.bgHeight);
ctx.drawImage(this.bg, 0, this.bgDistance, this.bgWidth, this.bgHeight);
有两个变量bgloop和bgDistance分别记录背景的重绘次数和移动了的距离，每次重绘让bgloop自增，乘以速度就是新的距离。为了实现背景图片的无缝滚动，我们需要调用两次drawImage来绘制两张图片上去，绘制的位置关系如下图所示：
这样才能保证背景滚动的过程中不会闪烁也不会中断。
简易的图片加载器
& & & 由于游戏一开始并没有把所有的图片都加载下来，所以后续要用到的图片，比如飞碟、兔子都是需要延迟加载进来的，所以需要实现一个图片加载器，大体的功能就是让浏览器加载图片，然后在别的代码中调用可以直接使用图片，代码如下：
function ImageMonitor(){
var imgArray = [];
createImage : function(src){
return typeof imgArray[src] != 'undefined' ? imgArray[src] : (imgArray[src] = new Image(), imgArray[src].src = src, imgArray[src])
loadImage : function(arr, callback){
for(var i=0,l=arr. i&l; i++){
var img = arr[i];
imgArray[img] = new Image();
imgArray[img].onload = function(){
if(i==l-1 && typeof callback=='function'){
callback();
imgArray[img].src = img
返回的对象有两个方法，第一个createImage，返回当前数组中对应的图片，如果不存在该图片，则new一个来返回。第二个loadImage接收一个数组和一个回调函数，把数组中的图片路径逐一加载，保存到一个数组中，最后一张图片加载完后执行一个回调函数。
这段代码其实是我从别人代码中偷来的，稍一推敲，就会发现这段代码其实是有问题的：
1. createImage方法，在当前imgArray数组中有所需图片时是没问题的，但是如果没有就需要现加载，在别的地方如果调用了这个方法，那么后面的代码应该是放在img的onload函数中执行才对，否则一旦网络较慢，这个时候可能图片还未加载下来，后续代码会报错。
2. loadImage方法，回调函数的执行是在最后一张图片的onload函数中执行，这也是有可能出问题的，因为浏览器是可以并发请求的，有可能最后一张图片已经加载完了，前面的图片还没加载完（最后一张图片较小，前面的较大，或者是网络的原因），这个时候执行回调的时机也是不准确的。
开发的时候因为时间紧急我没有改良这段代码，只是避开了可能出问题的用法。那么标准的加载图片，或者说资源管理应该是如何进行呢？我相信业界已经有了标准答案，后续我会搞清楚这个问题。以后写游戏就用框架（像cocos2d-js）来管理这些了，原生的要顾及的东西实在是多。
实现飞船的绘制、操控
接下来就开始实现游戏的主体，飞船。用js面向对象的写法（大家都这么叫，姑且这么叫吧），我们编写一个Ship类，属性有宽高、坐标、游戏图片，有一个paint方法来把自己绘制出来，还有一个controll方法来响应用户的操作，代码如下：
function Ship(ctx){
gameMonitor.im.loadImage(['static/img/player.png']);
this.width = 80;
this.height = 80;
this.left = gameMonitor.w/2 - this.width/2;
this.top = gameMonitor.h - 2*this.
this.player = gameMonitor.im.createImage('static/img/player.png');
this.paint = function(){
ctx.drawImage(this.player, this.left, this.top, this.width, this.height);
this.setPosition = function(event){
this.left = event.changedTouches[0].clientX - this.width/2 - 16;
this.top = event.changedTouches[0].clientY - this.height/2;
if(this.left&0){
this.left = 0;
if(this.left&320-this.width){
this.left = 320-this.
if(this.top&0){
this.top = 0;
if(this.top&gameMonitor.h - this.height){
this.top = gameMonitor.h - this.
this.paint();
this.controll = function(){
var _this = this;
var stage = $('#gamepanel');
var currentX = this.left,
currentY = this.top,
move = false;
stage.on('touchstart', function(event){
_this.setPosition(event);
move = true;
}).on('touchend', function(){
move = false;
}).on('touchmove', function(event){
event.preventDefault();
_this.setPosition(event);
代码是一目了然的，paint方法是基础，setPosition其实就是修改飞船的left和top值，并防止移出屏幕，每次移动完后调用paint方法来重现绘制飞船。controll方法则是监听了touch事件，计算得出新的位置。
实现月饼的绘制、移动
& & & 实现了Ship类，接下来该实现月饼了，我们定义为Food类。与Ship类有些不同，Food的示例会有很多个，因为天上在不停掉月饼嘛，而且月饼有好坏之分，所以Food类多了两属性：id和type，用来标识月饼和它的类型。另外，由于Food类会new很多实例出来，所以方法我们定义在prototype上，这样减少每次创建实例时的内存消耗。代码如下：
function Food(type, left, id){
this.speedUpTime = 300;
this.type =
this.width = 50;
this.height = 50;
this.left =
this.top = -50;
this.speed = 0.04 * Math.pow(1.2, Math.floor(gameMonitor.time/this.speedUpTime));
this.loop = 0;
var p = this.type == 0 ? 'static/img/food1.png' : 'static/img/food2.png';
this.pic = gameMonitor.im.createImage(p);
Food.prototype.paint = function(ctx){
ctx.drawImage(this.pic, this.left, this.top, this.width, this.height);
Food.prototype.move = function(ctx){
if(gameMonitor.time % this.speedUpTime == 0){
this.speed *= 1.2;
this.top += ++this.loop * this.
if(this.top&gameMonitor.h){
gameMonitor.foodList[this.id] = null;
this.paint(ctx);
另外还有一点要说的是，月饼的速度是在不断增加的，以此来控制游戏的难道逐渐增高。定义一个speedUpTime&作为加速的时间间隔，默认为300，游戏的帧率为60，所以每隔5秒就会进行一次加速。新创建的月饼实例在初始化的时候，它的速度要和当前屏幕上的月饼速度一致，所以这个speed是动态的，有一个计算公式。
随机产生月饼
& & & 有了Food类后，只要我们调用new Food(type, left ,id)，就会创建出一个月饼。接下来，我们需要在屏幕上以一定的频率随机产生月饼。在gameMonitor中定义一个genorateFood方法，让它来管理月饼的生成，代码如下：
genorateFood : function(){
var genRate = 50; //产生月饼的频率
var random = Math.random();
if(random*genRate&genRate-1){
var left = Math.random()*(this.w - 50);
var type = Math.floor(left)%2 == 0 ? 0 : 1;
var id = this.foodList.
var f = new Food(type, left, id);
this.foodList.push(f);
月饼产生频率genRage默认为50，即不到1秒的时间产生一个月饼，根据实际测试，这个值比较合适。然后把new出来的月饼实例push到gameMonitor的FoodList数组中。FoodList中保存着当前屏幕上的所有月饼，这样，我们每次重绘canvas的时候，只要把foodList中的月饼挨个绘制出来就OK了，同样的道理，当有月饼移出屏幕，或者是被吃掉时，把它从FoodList中删除就OK了。
兔子吃月饼
兔子有了，月饼有了，接下来就该吃了。我们给Ship类添加一个eat方法，表示吃月饼。所谓吃月饼说白了还是做碰撞检测，每次帧刷新的时候，让飞碟与界面上所有的月饼做一次碰撞检测，如果发生了碰撞，判断月饼的类型，好月饼则得分加一，坏月饼则游戏结束。因为飞碟和月饼都是近似圆形，所以按照圆形模型来做碰撞检测就再简单不过了，两圆心的距离小于半径之和，则认为发生了碰撞。Ship的eat方法定义如下：
this.eat = function(foodlist){
for(var i=foodlist.length-1; i&=0; i--){
var f = foodlist[i];
var l1 = this.top+this.height/2 - (f.top+f.height/2);
var l2 = this.left+this.width/2 - (f.left+f.width/2);
var l3 = Math.sqrt(l1*l1 + l2*l2);
if(l3&=this.height/2 + f.height/2){
foodlist[f.id] = null;
if(f.type==0){
gameMonitor.stop();
$('#gameoverPanel').show();
setTimeout(function(){
$('#gameoverPanel').hide();
$('#resultPanel').show();
gameMonitor.getScore();
$('#score').text(++gameMonitor.score);
$('.heart').removeClass('hearthot').addClass('hearthot');
setTimeout(function() {
$('.heart').removeClass('hearthot')
调用的时候，我们把gameMonitor维护的foodList数组传进来即可。同时要注意，当一个月饼被吃掉后，要从该数组中移除，这样下一帧就不会把它绘制出来了。
让游戏run起来
& & & 我们该定义的东西也都差不多了，接下来是让游戏跑起来的时候了！所谓的跑起来，就是让canvas不停的重绘而已，在gameMonitor上定义一个方法run，通过setTimeout来递归调用它，延时时间为1000/60，这样可以维持帧率在60。run方法定义如下：
run : function(ctx){
var _this = gameM
ctx.clearRect(0, 0, _this.bgWidth, _this.bgHeight);
_this.rollBg(ctx);
//绘制飞船
_this.ship.paint();
_this.ship.eat(_this.foodList);
//产生月饼
_this.genorateFood();
//绘制月饼
for(i=_this.foodList.length-1; i&=0; i--){
var f = _this.foodList[i];
f.paint(ctx);
f.move(ctx);
_this.timmer = setTimeout(function(){
gameMonitor.run(ctx);
}, Math.round(1000/60));
_this.time++;
首先我们会执行一次canvas的clearRect方法来把画布清空一下，否则画面会重叠上去。之后绘制背景、飞船、月饼。调用相关的动画方法后，整个游戏就动起来了~
其实在这里我开发的时候遇到了一个纠结的地方，那就是用setTimeout来控制帧刷新，在上篇文章中，我有介绍用requestAnimationFrame也是可以控制帧刷新的，写这个小游戏的时候我一开始也是用了这个方法，但是在测试的时候遇到了一个现象，在iphone4上，当用手指控制飞船移动的时候，帧率就有明显的下降，我不清楚是什么原因造成，后来看别人代码中是setTimeout的，就抄了过来解决问题。所以在此我也抛出一个问题：setTimeout与requestAnimationFrame到底该选择哪个，是否与canvas有关，有大牛知道也望请指点。
通过以上几个步骤，游戏的基本功能就完成了，其他一些游戏流程控制，包括开始、结束、得分计算等在此就不叙述了。总体感觉用canvas做一个小游戏的难度也不算大，不过我写的这个游戏也确实特别简单，可以作为入门的例子。
这次当做多原生canvas的一次学习，以后做游戏的话，我也不打算用原生canvas了，准备学习下cocos2d-js，最近也发布了其正式版本，正是上手的最佳时间。
本游戏的源代码扔在了github上：
本文仓促完成，有些观点和写法可能不正确，如有问题，欢迎留言指导~
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致}