整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
戏葡萄原创专稿，未经允许请勿转载
HTML5游戏有哪些做法？在很多人眼里，H5游戏对于他们可能还只是像《围住神经猫》那样简单的样子——产品形态简单、推广方式简单、盈利模式也很简单。
在白鹭时代（Egret）今天主办的HTML5游戏大会上，来自全国各地大大小小的厂商，给出了不同的答案。
关于推广方式（入口），现在有了QQ浏览器、QQ空间、360手机助手、百度贴吧、猎豹浏览器等；关于盈利模式，也有广告变现、游戏内购等；我们会在其他文章中盘点各路观点。
这里先介绍现在HTML5游戏研发上的一些“进化形态”。
《开心豆豆》于5月上线，墨麟旗下鱼之乐研发，已在腾讯玩吧平台上面运营了半年。基本上两周一个迭代。
《开心豆豆》针对12-65岁的女性用户，风格是日系Q版，核心玩法有三个：消除、闯关、手势效果，后者是玩法上的一个小小的创新。这个游戏看上去很像传统的三消类游戏，例如《糖果粉碎传奇》、《开心消消乐》，但实际上它是一款连线消除游戏。闯关模式有主线过关、大关套小关、三星完美闯关等设定。手势效果是新版本的设定，在同样的消除不同的连线方式可以产生不同的特效恶搞。此外游戏还设置了一些障碍物，比如巧克力奶油冰块等等。
该游戏在社交环节中也做了一些尝试。首先是好友邀请，好友之间可以互相赠送体力和道具。到5月23日为止有近400万的玩家，其中80%的活跃用户是女性玩家。未来还会加入主角系统，以美食为主题。主角可以在闯关的过程中收集食材，然后在甜品屋里制做甜品，再参加美食竞技。
墨麟鱼之乐今天展示的第二款游戏，之前的形态叫做《Q将水浒》，最早出现在QQ浏览器的游戏平台上。当时这款游戏是一款策略养成类游戏，混杂了社交、建设等元素。现在的《口袋江湖》是在《Q将水浒》基础上，把策划的数值和体系移植过来，把IP从水浒改为武侠题材，再强化了休闲策略的设定而成的。游戏里面是标准的武侠设定，玩家可以建设门派、招募弟子，称霸武林等。
游戏的界面不像传统卡牌，而是有着自己的主城。主城里面所有的建筑都有自己的功能，需要玩家自己去升级。游戏的战斗是回合制的，双方各出5个人，进行复杂的战斗，而不是撞卡式的。所有的英雄有自己的行军速度、攻击范围、攻击招数等。游戏还设定了资源战、擂台赛等体系，玩家之间还可以互相占领主城，而不是像《刀塔传奇》、《我叫MT》等类似于单机的设定。这样就突出了玩家之间互动，仇人和仇人之间有互动，邻居和邻居之间有互动。
《少女战机》是一款纯HTML5游戏。人设方面，游戏以机娘为中心，将少女的萌和机甲的燃相结合，让众多的宅男得以找到自己喜欢的那一款机娘。战斗模式方面，游戏保留的经典的关卡模式，通过设置出一些无尽关卡，让老玩家们得以延续他们的挑战。游戏也打造了一个斩首模式，在里面，玩家需要通过自己对关卡的了解，运用智慧挑战实力悬殊的BOSS。当玩家获得一定的成长之后，会需要更多的挑战来证明自己的实力，逃生模式就是为此而设计的。在逃生模式中，玩家将要在如潮的弹幕中生存下来。
指上缤纷研发一款三国题材的卡牌游戏。将策略游戏的玩法规则和Q版画风的幽默诙谐深度融合。
中娱在线研发，一款横版动作卡牌角色扮演类游戏。“我们精心设计了近百种不同的武器和技能，让玩家在游戏里面能非常自由的收集技能，体验组合搭建技能的乐趣。然后再围绕着这个核心创新点，我们采用情感体验式的设计理念，精心开创了一个相关的成长体系以及相关的一个玩法。然后再配上我们由顶级美术打造的一个一流的远古游戏世界，能让玩家从视角到其他游戏体验都能获得一流的游戏享受。最后我再确定以及肯定的告诉大家，这就是H5游戏。”
未来人科技研发，横版回合制战斗，九宫格策略布阵的游戏。“其实玩法上说白了没有什么太大的创新，但是我们在美术风格上确实做了很用心的一些设定。”“我们的核心的玩法，简单来说就是让玩家去积累一定的游戏内资源，然后去获取，去购买更多的武将，然后更高星别的武将。核心玩法的策略性上主要体现在九宫格布阵。”“训练场稍微给玩家开放了一点点类似于挂机类的玩法。你可以不用在线，你把它挂在上面，它就会慢慢的升级。然后这是每天会开的一个Boss战。”
梦启科技的一款放置类RPG游戏，也就是挂机游戏。核心玩法上，游戏有仇杀这种创新，也引进来类似传奇的红名机制，用这种新的交互方式来增加活跃。在挂机的过程中，玩家还可以通过PK来爆掉其他玩家的装备，游戏也会在之后增加爆装的机会和条件。爆掉别人的装备之后也会产生红名，上恶人排行榜，吸引别人PK。第二个系统是美人。不同的美人有不同的属性，有的美人适合打装备，有的美人适合PK，有的美人适合大BOSS。多个美人可以组成美人阵法，对玩家属性是一个很大的提升。最后一个核心是跨服。现有的挂机类游戏可以看到，出现了页游之前的快速开服、快速洗服的现象。这样会造成当服的用户活跃度不高，跨服就用来缓解这种问题。
山水地科技的一款重度策略类游戏，采用F2P加道具收费的模式。开发周期前后陆续加起来将近一年。这款游戏13年初已经初见成品，但当时的硬件无法支撑，因此项目停滞了一段时间。到了今年年中，游戏重新进行了一些开发，并且已经在手Q空间上线。
游戏的核心玩法与其他策略游戏类似，但也有航海题材的一些特色，包括航海、冒险、贸易、国战、占领城市等等。首先，游戏拥有一张非常巨大的地图，玩家可以在拥有180座城市的世界地图里航行，在航行的过程中还会遇到风暴等各种随机探险事件。游戏界面左下角的舵用来控制航行方向，玩家靠扔骰子的结果确定在海上航行的天数。
其次，游戏针对不同的地区设计了不同的建筑风格，如果玩家在加勒比诞生，那么建筑风格就为海盗风，此外还有英格兰、奥斯曼、华夏等风格。并且这些建筑风格还会发生变化，玩家的游戏行为会影响城市的发展度，发达的地区建筑风格也会相应的更加华丽。
再次，航海题材离不开航海贸易，每个城市都拥有自己的特色商品，这与另外两个系统相配合。第一，每个城市的商品除了可以低买高卖用来盈利以外，这些商品本身可以作为材料制造装备和恢复体力的食物。而这个制造系统又与游戏中重要的国战系统相联系，游戏中一共有四个国家，四个国家之间会因为争夺资源而产生冲突，如果城市被敌对国占领，玩家就无法购买这座城市的特色材料。
游戏的PVE基础系统为探险模式，呈现为第一人称视角的推图模式。探险过程中玩家会遇到包括战斗、好友互动、获得宝箱物品等多种事件。玩家可以在每个城市中参与到主线任务、日常任务和不同的随机委托等多种形式的任务。
PVP方面游戏提供多种战斗模式：海上劫掠遭遇战、城市切磋战、城市占领、竞技场天梯战与阵型战斗策越。
游戏中最重要的就是异步实时多人国战，每个国家的玩家不管等级高低可以随时航行到正在发生国战的城市进行战斗，每个人都可以做出自己的贡献。国战又与游戏中的选举与官职系统相结合，尤其是当玩家被选举为国王时，他会产生强烈的社交付费需求。
游戏中还包括卡牌抽取，并且进行了一定的创新。卡牌抽取分为很多类，通过人民币、红水晶、黄水晶等不同材料抽取，获得的英雄具有不同的功能，红水晶抽取的英雄善于PVE，黄水晶抽取的英雄善于贸易，每一种水晶都与玩家的游戏行为相结合，战斗时获得黄水晶，贸易获得红水晶等等。此外，每张卡牌都有自己的技能系统，并且可以互相继承，解决了传统卡牌游戏的缺陷。
山水地科技一款休闲社交游戏，包含宠物养成、牧场捕捉、战斗策略、配对交互四大系统，女性用户占60%以上。
游戏有以下核心玩法：一、配对，玩家可以为自己的小鸟向朋友的小鸟提亲、接受提亲、共同孵化新的小鸟。二、训练，玩家可以对小鸟进行训练和留学。三、入侵，玩家可以入侵猎场或帮助好友反抗。
游戏拥有很强的社交性，具有公会和结婚的功能，有利于增加收入和提高用户留存率。
游戏的盈利模式为通过群体PVP副本、群体PVE副本以及个人天梯赛等模式刺激玩家不断提升小鸟的战斗力。
有爱互动的一款放置类RPG网游，是由文字MUD游戏演化而成，具有实时RPG离线系统与离线挂机训练系统。游戏玩法包括竞技PVP、商城道具、装备强化、多人团战以及工会等，游戏中打怪、经验升级、获得金币、掉落装备都是自动的，游戏行为会在玩家离线后继续进行。
者按：今天腾讯的同学从一款HTML5小游戏《植物大战僵尸》说起，分享一些动画实现的知识（动画可控性、如何兼容不同分辨率、如何识别平板手机等），附上众多实现小技巧，来收 >>>
hello~大家好，我是黑米！ Ｏ(≧▽≦)Ｏ
今天我来跟大家分享一些动画实现的相关知识，希望大家能够支持（鞠躬……
我很喜欢很喜欢看动画片，一直有做出好看动画片的梦想……所以最近做了不少动画效果来玩儿，也为自己以后可以做出伟大的动画片打好基础！
Web端动画表现有不少办法，我列一些常见的，然后再说说在实现上的一些小技巧。
进入正题，我要开始认真了！（严肃脸…… (￣ー￣〃)
嗯……首先大家先来跟我一起玩个游戏，请快速的掏出手机，打开微信，“扫一扫”下面的二维码，通关最多的前三名同学……什么奖品都没有！！
相信大家都认真的玩儿了游戏吧？我们这里有一位万技师一直玩到50多关，最后体力透支，主动“自杀”，否则相信他能玩出过百关，怎么做到的？有彩蛋，不知道你有没有发现，哈哈……
嗯……回归正题，这个小游戏当中用到了大量的动画效果，主要是逐帧动画，今天的第一部分，就先来讲讲动画这个事情。
我先来列一排动画效果给大家看……
图1
图2
图3
刚才上面列的动画效果分别是 GIF 动画、Canvas + CSS 动画、逐帧动画。其实说起常见的动画实现，除了 GIF（APNG）、Flash 和 Canvas 外，其他基本都是 CSS 动画，即使是通过 JS 实现，大部分情况下只是通过 JS 来修改 CSS 属性而已。
而 GIF 动画仅支持 8 位色，颜色偏少，虽然 APNG 解决了这个问题，但是存在兼容问题，同时它和 GIF 一样，没有可控性，所以它们一般很少用于动画制作流程中，仅用来展示。相对来说 CSS 动画和 Canvas 动画的可控性更易于制作页面效果动画以及页面游戏。
一、可控性
刚才说了“可控性”，那到底什么是可控性？我们先来看一个动画效果的大概示意图！
一段动画一般由“开始 – 过渡 – 结束”来组成，GIF 动画是无法通过代码来获取到这些状态的，但 CSS 动画可以！
我这里的做法是把每一组图片合成一张“雪碧图”，然后利用 CSS 的 animation 做逐帧动画，写好函数通过不同的参数来调用不同的角色。
Role（dirt）
Role（rises）
Role（cast）
Role（broken）
Role（death）
合成“雪碧图”的逐帧动画
像上面 图2 和 图3 的例子，都是由好几个动画衔接完成，那么它们之间如何衔接呢？有的同学可能会说用setTimeout/setInterval/requestAnimationFrame 一类的延迟功能来做衔接，但是这样会有个问题就是在性能不同的机器上，会有误差，而且维护繁琐。所以，我们需要一个触发形式的衔接方式，即上一个动画完成了，通知下一个动画开始。
CSS 动画实现一般使用 animation 和 transition 来搭配其他属性使元素产生不同变化，从而达到动画效果。
而这两个属性是可以通过 JS 中的事件来监听到“开始”和“结束”状态。具体事件如下：
animationstart：
animationstart 事件在 CSS animation 开始时被触发。如果有 animation-delay ，事件将在延迟时效过期之后立即触发。 如果延迟时效是负值，事件触发时将带有等于延迟时效绝对值的 elapsedTime 。
animationend：
animationstart 事件在 CSS animation 完成时被触发。
transionstart：
transionstart 事件在 CSS transition 过渡开始时被触发。
transitionend：
transitionend 事件会在 CSS transition 结束后触发。当 transition 完成前移除 transition 时，比如移除 CSS 的 transition-property 属性，事件将不会被触发。
这些事件在不同浏览器下需要加前缀什么的大家应该都懂得，至于 transionstart，目前仅在 IE10+ 上有效……
通过事件监听的方式衔接，并利用分层的形式叠加多重动画，最终实现效果：
现在，开始状态和结束状态获取到了，那中间的过渡状态要怎么办呢？比如说我要动画执行到 30% 的时候，执行一个回调，亲一口姐姐，肿么办？?(?ε??)
虽然没有直接的事件可以监听到过渡状态，而且这个需求中也暂时用不到这个过渡状态监听，但是我们也可以稍微做点事情的。（不抛弃，不放弃！）
怎么做呢？比如一个动画的执行时间是10s，那么在动画开始的时候，跑一个 setInterval 来不断的记录过渡状态，然后用当前跑到的值和总时长就能算出具体的进度了。这里要稍微注意一下，因为动画播放控制（animation-play-state）属性的存在，在暂停和重新播放时，需要对计时器稍微进行一下处理，否则得出的进度值会有错误。
这不是一个很完美的办法，因为在不同的性能下，计时器的值可能会有微弱误差，但如果你要求并不是很精确，还是可以尝试这个办法的。
二、如何 Perfect 的兼容各分辨率？
兼容各式屏幕一般有这样的办法：
还有这样的办法：
最后，还有传说中的弹性自适应布局：∑(O_O；)
但是，在这个需求上，统统不适用！为什么？
viewport 和 media Query 在 iOS 和 Android 上识别的单位不同，在 iOS 上识别的是“设备像素”，而在 Android 上识别的是“CSS像素”，这两个词后面会讲到。
因为这个页面游戏上有大量的元素用到绝对定位，如果使用弹性自适应布局的话，会进行大量的布局计算，而且还不一定精准。
所以，这里的解决办法是通过 discrimina.appVersion 获取 UA 信息中的关键字来判断不同的系统，针对不同的系统做不同的解决方案，Android 对最外层 div 进行 zoom 缩放，而 iOS 使用 viewport 缩放：
三、如何 Perfect 的识别平板和手机？
各设备上的布局问题解决了，但是如果设备屏幕比较大，你的图片是糊的，怎么办？
也许有的同学会举手说去检测 CSS 分辨率，但是这里就有问题了……有的老旧平板可能屏幕尺寸大，但 CSS 分辨率小；而有的新手机屏幕尺寸不如平板，但是 CSS 分辨率挺高，咋办？
回归现实，我们分辨平板和手机是以什么来分辨的？屏幕尺寸，对吧？那么我们这里也同样，只要想办法计算出访问者的屏幕尺寸即可，就是平常我们说的几寸屏…几寸屏的那个尺寸。
怎么获取那个尺寸呢？我们这里先来学习一些专业术语……
标红的“屏幕尺寸”是我们的目标，绿色的元素是我们后续会用到的东西，其中我们可以直接通过 JS 获取到的只有最后两项，即“设备像素”和“设备像素比”。
然后我们来看看“屏幕尺寸”的计算公示：
屏幕尺寸 = 屏幕对角线的CSS像素值/（设备像素比*PPI） = (√长²+宽²)/（设备像素比*PPI）
屏幕是矩形，矩形对角线的计算公示就是上方右侧那个公示；现在我们来看一下这个公示中用到的元素如何获得……
现在，万事俱备，就差 PPI，这东西虽然没有直接获取方式，但是我查了一下资料，还是得到了一些数据。
注意，这里给的是基准值，我们常说的 iPhone 多少多少 PPI，那个值是用基准值乘以设备像素比得出来的。由于 Android 手机厂商众多，并没有统一的标准，这里的 160 只是约等值，所以 Android 屏幕尺寸结果会有误差，但是基本也够用了。
现在公式中的所有要素都已经齐备了，具体在代码中实现，就是下面这样子：
得出的值，单位是“英寸”，我们根据这个值就可以考虑针对平板和手机等不同屏幕尺寸做不同的事情了，比如最基本的，换一套高清图……
四、音频之殇 (T^T)
这个小游戏中一共用到3类音频，共6个音频，且存在同时播放问题，iOS 下没问题，但是 Android 下会出现后播放的音频打断之前播放音频的问题。
我测试了一些设备，发现无迹可寻，有的老设备支持，新设备反而不支持。我的解决办法是 Android 用户仅播放关键音频，比如这个游戏当中就是背景音乐，其他的就不放了。因为没办法判断设备到底是否支持多音频同时播放……
五、形变+位移+旋转=？
刚才讲了“活捉兵马俑”那个游戏的一些经验技巧，现在讲讲几个 CSS 小属性搭配起来可以做的东西。
不可否认，做动画 Flash 是走在前面的，它的很多表现形式都值得我们借鉴，比如说这位豌豆射手。
这个豌豆的需求是一个双屏互动需求，PC 端使用 Flash 实现，移动端没办法用 Flash，所以动态效果我就照着临摹了下来。
具体做法是把豌豆拆成不同的小组件，然后再利用 animation、translate、scale、rotate，拼合出一个完整的动态效果，并没有多少技术含量，但几种属性的搭配使用，让这颗豌豆看起来还是挺赞的！
等于
所以，很多属性稍微搭配一下，其实就可以做出很好玩的东西。哈哈……
六、其他一些小细节……
看了这么久的文章，你可能也累了，下面一些小细节快速过一下……
1）不要放弃 PC 访问的用户，如果没有很好的引导，他们会直接关闭网页的。
2）如果是横屏没法用的页面，给予良好的横屏提示。
3）为用户添加桌面图标，方便用户启动页面。
好的，今天的分享基本就这样告一段落，欲知后事儿如何，请听下回分解！
原文地址：tgideas
优秀网页设计公众微信号：youshege碎片时间学习利器！
一个做微信运营的小伙伴都有这样的烦恼，老板要求做活动增粉，又不舍得砸钱，拿着吸引度一般的奖品，纠结每个月怎么变着花样撩粉丝。传统的转发集赞如今又有被封号的风险，评论区评论点赞，大家担心多一个人知道就多一个竞争者，活动根本推广不出去，做H5小游戏定制费用上万，只能依赖免费平台，因为人数限制，最后一场活动下来引来的粉丝只是两位数。。。伤心地打开朋友圈，人家的H5游戏又刷爆啦！
在做微信H5小游戏之前，我们先要知道哪些游戏是能有效吸粉的。
1、以营销为主要目的的游戏，简单易上手是必须的，不然大妈怎么为你疯狂？但也不能极端地上来就甩红包，点开就没了，这样没有可玩性。
2、H5游戏不过多占用用户时间。微信用户一般没有在朋友圈给一个游戏预留很长时间，不然要APP干嘛呢。游戏步骤太复杂，用户会失去耐心。
3、H5游戏机会要多，满足用户“这次不行，再来一次”的心理，不知不觉中让用户“停不下来”。最后来个诱导分享，比如“我在XX游戏中获得了XX分，你敢挑战一下吗”之类的，炫耀什么的用户最喜欢了。
了解H5小游戏的套路后，在不懂程序代码的前提下，要做HTML5小游戏，除了找专门的游戏平台，其实还可以选择一些自主建站工具。目前市面上一些建站工具已经率先开发了营销功能，像建站宝盒推出的易企玩小游戏。
易企玩是建站宝盒新推出的一系列免费H5互动小游戏，由专业团队根据市场专门研发，集趣味性、耐玩性、互动性、分享性于一体，传播力度打，能满足企业多种商业营销行为。
目前易企玩小游戏共推出四款，包括《数钱大战》、《宠物对对碰》、《我要萌妹子》、《抓住大白》。用户只需选择任意一款，按照宝盒提示对游戏参数进行设置，人数完全不受限制，没有额外花费，还可选择在游戏元素中植入品牌！设置完成后保存，在活动后台扫描二维码就能进入游戏，开启趣味的营销旅程。在手机游戏页面上复制链接，就能直接链到微信公众号，全程不涉及程序代码的问题！
虽然一些专门的微信游戏平台的游戏很多，但是能广泛传播的也就那几种，价格嘛，用过的人都懂的。而上面这些HTML5游戏，都是在购买建站宝盒的时候赠送的，不用再额外花钱购买。一套建站宝盒全网营销解决方案才2010元/年，从平台搭建到营销推广，一步到位，告别第三方平台依赖。傻瓜式操作，马上开启你的吸粉之路！免费试用：http://www.iisp.com/design/game.php
更多建站&互联网行业资讯，请关注微信公众号：耐思尼克（iisp-com）
*请认真填写需求信息，我们会在24小时内与您取得联系。
