整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
戏葡萄原创专稿，未经允许请勿转载
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碎片时间学习利器！
| 手游那点事 | Aimee
【每日要闻】
1.2015年A股游戏并购超600亿 高溢价对赌后遗症浮现
据调查，2015年A股的游戏公司并购市场涉及金额超600亿元。对比来看，2013年游戏行业涉及的并购交易金额仅为188亿元，2014年为253亿元。且在上市公司并购案例中，高溢价并购的游戏公司正面临并表利润与商誉双减值的风险，移动游戏弱周期属性开始刺破高溢价气球，高估值的并购模式后遗症浮现。
手游那点事点评：虽然以融资和收购的形式是可以解决公司发展在资本上的燃眉之急，但别忘了急病乱投医是会有副作用的。
2.Layabox欲进军台湾HTML5市场
Layabox作为中国HTML5引擎商代表，携多款优质大型HTML5手游参与了在1月28日-2月2日召开的台北国际电玩展，并与台湾游戏产业同行就游戏开发、游戏发行、平台合作等业务启动了合作的筹备阶段，正式吹响了进军台湾市场的号角。
手游那点事点评：HTML5游戏的风又吹起来了吗？
3.《功夫全明星》与ROAD FC联合举办发布会 成立格斗游戏联盟
近日，亚洲第一的综合格斗大赛ROAD FC(路德)与手游《功夫全明星》在北举办了“七星连珠”体育娱乐战略合作发布会，并与游戏工委、小米互娱、360游戏共同组建格斗游戏联盟。
此次“七星连珠”计划是ROAD FC开启泛娱乐IP布局的第一步，该计划联合了中央电视台体育频道、小米互娱、英雄互娱等多家知名企业，分别在赛事转播、体育运营、综艺娱乐、游戏等多方面进行合作。与《功夫全明星》的合作，更是希望开创全民格斗游戏的新时代。
手游那点事点评：英雄互娱真会玩，搞了电竞联盟又来格斗联盟！
4.APUS全球游戏中心成立
近日，在APUS全球移动孵化基地启动仪式上，APUS宣布发布全球游戏中心，并现场与数家中国知名游戏公司签署战略合作协议，共享全球手游市场红利。现场签约的公司包括触控科技、掌上明珠、成都动鱼、猎人互动、Layabox、白鹭等。
手游那点事点评：越来越多这样的“游戏中心”成立，然而真正能帮到中小CP的又有几家？
【游戏数据】
1.德勤报告：2016VR市场将超10亿美元，VR设备将售出250万部
德勤发布的最新报告称，2016年全球虚拟现实(VR)市场有望突破10亿美元，超过250万部虚拟现实设备将被出售。德勤称，尽管VR市场面临着诸如因设备引起的眼睛疲劳等技术壁垒，但发展前景依然较好，预计VR硬件市场将达到7亿美元，软件市场将达到3亿美元。
手游那点事点评：硬件上去了，软件落后那么多好像说不过去。
2.爱游戏：RPG占网游收入73%，竞技类网游增多
昨日，中国电信“爱游戏”发布《2015年12月爱游戏数据报告》。从游戏类型上看，12月爱游戏上线的新网游中，RPG类占比30%，动作冒险类占比大增；新单机中，益智休闲类占比46%。而从全年看，在游戏数据交互方式上，从异步通信到同步数据的趋势越来越明显，以及用户的社交需求也越来越强，更多的玩家抛弃弱联网的单机游戏，走向真正强社交的手机网游产品。
手游那点事点评：社交需求越来越大，竞技类网游也越受关注。
【游戏资本】
1.万达传奇影业数百万美元投资游戏视频公司
万达旗下的传奇影业宣布以数百万美元的价格投资一家制作游戏娱乐视频的创业公司“3BlackDot”，准备进入游戏领域。据了解，3BlackDot将与传奇影业在许多项目上的合作，包括一部聚焦于电子竞技文化和电竞观众的电影。而传奇影业占据该公司多少股份并未公布。
手游那点事点评：影游联动的又一强强联合。
2.木瓜移动正式申请挂牌新三板 专注移动游戏广告业务
北京木瓜移动科技股份有限公司近日发布公开转让说明书，宣布正式申请挂牌新三板，发行6200万股，每股面值1元。木瓜移动成立于2008年4月，主营业务包括全球市场的移动数字营销和移动游戏的研发运营。
手游那点事点评：木瓜移动此次资本动作会不会为农历年内游戏相关公司登陆新三板画上一个句号？
【今日新游】
1.《最佳阵容》（不删档内测）
发行商：咸鱼游戏
游戏类型：策略
上线平台：安卓、iOS
游戏特色：由傲世堂研发，咸鱼游戏独家代理的《最佳阵容》，是一款核心玩法主打经营策略的FM风足球策略手游。游戏亮点是基于传统足球经理等作品的基础上融入QTE技能模式还原球星的真实技能，让玩家掌控足球比赛中最为激动人心的临门一刻。
手游那点事点评：这是一款一款策略经营类足球手游，在重度RPG游戏泛滥的当下，该做不失为细分领域中的好作品。
2.《龙珠超：开挂的赛亚人》（不删档内测）
开发商：宁波乐游网络科技有限公司
游戏类型：角色
上线平台：安卓
游戏特色：一款以著名日本漫画七龙珠为故事背景、精心制作的放置类的卡牌手机网游，游戏将枯燥的练级刷怪过程省去，即使在关机状态下一样可以24小时不停练级。无论在线还是离线，甚至不需要你的手动操作，都可以持续不断地战斗，持续不断地获得收益。
手游那点事点评：龙珠、赛亚人可是我们小时候的记忆啊（暴露年龄了~）。但高品质画面和超炫的战斗确实也很吸引人。
*请认真填写需求信息，我们会在24小时内与您取得联系。
