盘点那些获得融资的H5游戏相关公司_产业服务-新闻_新浪游戏_新浪网
盘点那些获得融资的H5游戏相关公司
10:52:54& &来源：
H5游戏自诞生以来一直话题不断。不用去追溯2010年乔布斯宣告H5将在移动设备上获胜的言论，也无需再探讨曾红极一时的《围住神经猫》，仅8月8日在北京举行的iWeb峰会的火爆程度就说明H5游戏已经迎来足够的重视。而在8月初刚刚拉下帷幕的ChinaJoy上，海海科技也已携众H5游戏CP亮相B2C展台。此举在大型网络游戏厂商、电玩以及硬件厂商占领高地的ChinaJoy上实属不小的突破。这些热点事件是否意味着H5游戏的真正辉煌时刻即将来临？
要解答这个疑问不如先来看看那些致力于H5游戏并已获得融资的公司现在在做什么。
技术服务商：
Egret Engine 白鹭引擎
Egret Engine白鹭引擎是一个跨平台的手机游戏开发引擎。白鹭引擎在2014年11月完成由顺为基金发起的A轮融资，共1000万美元。2015年5月，白鹭时代张翔公布白鹭获B轮融资估值超10亿。在8月8日举行的iWeb峰会上，陈书艺联合触控科技CEO陈昊芝宣布，正式启动触控科技和白鹭引擎的全面战略合作。
云适配（AllMobilize）
云适配(AllMobilize)是一家建立跨平台手机网站的移动互联网公司。云适配在2013年11月获得数百万人民币天使轮投资，2014年3月获得IDG资本数百万美元A轮投资，2015年6月获得由IDG资本、晨光创投MorningSide数千万美元B轮。据悉，云适配计划推出中国第一款企业级安全浏览器——“Enterplorer”，以“云+端”形式为企业提供一体化解决方案。
Acadine Technologies
Acadine Technologies是一家移动操作系统研发商，公司核心产品H5OS是一款基于H5标准的移动操作系统。Acadine Technologies在2015年7月获清华紫光1亿美元的A轮投资。H5OS目前尚未发布，Acadine Technologies称其将于2016年进军市场，并且在操作系统发布后还将不断进行修改。
MAKA是国内最早开创卡片式的H5交互效果团队。MAKA于2014年11月在天使汇完成了数百万人民币天使轮融资，此后在2015年4月获得经纬中国数千万人民币Pre-A轮融资。MAKA在近日的iWeb峰会上带来了经典创新的互动案例。
兔展是中北明夷科技旗下的一款基于H5的Web App生成工具，用于场景制作，移动展示。兔展于2014年6月成立，2015年获得深圳创新投资集团的3000万人民币A轮融资。2015年6月，兔展达到200万注册用户。此外，兔展计划推出全新2.0版，在新版本中开放更多免费功能。
DCloud
DCloud是一家专注H5的数据公司。DCloud在H5的普及过程中推出了HBuilder开发工具、H5plus增强浏览器引擎、mui前端框架。DCloud在2014年1月获极客帮创业基金、上海致景投资数百万人民币种子天使轮融资，于2014年9月获中关村兴业投资1200万人民币A轮融资。DCloud CEO王安在今年的iWeb峰会上详细介绍了其第四类产品——为H5用户服务。
对技术服务商的总结：
其实无论是H5游戏开发引擎还是提供H5数据的工具，其本质都是在为H5游戏的研发作技术支撑。H5游戏素来以门槛低、耗时少为开发者所喜爱，但同时又因为兼容性问题导致用户体验不佳。因此H5技术服务商们要解决的困难就是如何利用自身技术来帮助游戏的开发者们更好的将H5游戏做到与原生游戏一样的品质。这是引擎支持程度的直观表现，也是影响H5游戏质量的关键因素。
新浪声明：新浪网登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
2015年，手游市场和HTML5游戏产品优质大作集中爆发，大厂强势加速布局，中小研发商竞争激烈，形势变幻莫测，开发者们究竟该从哪找...
来自：业界
H5游戏拥有点开即玩，充分利用移动端流量，是HTML游戏最重要的优势，另外开发周期短，试错成本低同时还有终端设备的硬件的支持，...
来自：业界
近日，移动游戏数据分析平台DataEye发布的《2015年HTML5游戏Q2数据分析报告》。报告显示，APP游戏的成本越来越高，未来的渠道...
来自：产业服务-新闻
主打音乐游戏推理的综艺节目《歌手是谁》8日晚已在优酷土豆双平台及北京卫视开启首播，由官方授权蝴蝶互动制作的同名Html5游...
来自：产业服务-新闻
中国网络游戏排行榜(China Game Weight Rank)是由新浪游戏推出的目前国内最全面、最专业、最公正的最新网络游戏评测排行榜，涵盖2010至今内所有新游戏，力图为中国游戏玩家打造最值得信赖的新网游推荐平台。
新浪中国网络游戏排行榜是以由新浪游戏专业评测员组成的评测团队为核心，以游戏的画质、类型、风格、题材等游戏特性为依据，对中国(大陆港澳台)、欧美、日韩等地区正在进行测试或正式运营的新网游产品进行评测并打分后产生的权威游戏排行榜。新浪中国网络游戏排行榜将网络游戏从六大项、二十八个小分项与同类游戏进行横向比较，再将该游戏与自身的不同版本进行纵向对比后，由评测中心根据加权平均数得出最后的游戏分数，并以游戏测试及上线时间点为分组，根据每款游戏的CGWS分数在每个季度发布排行榜榜单，实现了排行榜的透明化和实时化，帮助玩家准确、迅速地找到心目中的理想游戏。
评天下游戏、测产品深浅—新浪中国网络游戏排行榜CGWR！
本周进行测试的游戏共有14款，其中《无主之地OL》周三内测，新游《足球经理OL》及《风雷传奇》开启首测。
游戏圈女神多娇又爱玩 来看一周游戏美女汇总！
游戏展将在8月5-9日召开，微软、SE等游戏大厂都将公布海量游戏新作。
《大话西游2》将以中国风交响乐的形式重新演绎大话2经典。
重口东方玄幻神鬼MMORPG《天律狂想》萌妹试玩解说。
雪藏归来《上古世纪》受追捧，WOW资料片军团再临被调侃。
《星际战甲》8.7二测独家爆料，战甲英雄的三大守护能做什么？
用微信扫描二维码
分享至微信朋友圈想要快速上手HTML5 Canvas小游戏开发？下面通过一个例子来进行手把手教学。（如果你怀疑我的资历， 这个游戏的半数以上开发是由我完成的）
我们直接来看源码里的,当然你也可以一下游戏先。
// Create the canvas
var canvas = document.createElement(&canvas&);
var ctx = canvas.getContext(&2d&);
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
首先我们需要创建一张作为游戏的舞台。这里通过JS代码而不是直接在HTML里写一个&canvas&元素目的是要说明代码创建也是很方便的。有了画布后就可以获得它的上下文来进行绘图了。然后我们还设置了画布大小，最后将其添加到页面上。
// 背景图片
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
bgImage.src = &images/background.png&;
游戏嘛少不了图片的，所以我们先加载一些图片先。简便起见，这里仅创建简单的图片对象，而不是专门写一个类或者Helper来做图片加载。bgReady这个变量用来标识图片是否已经加载完成从而可以放心地使用了，因为如果在的。
整个游戏中需要用到的三张图片：，及我们都用上面的方法来处理。
// 游戏对象
var hero = {
speed: 256, // 每秒移动的像素
var monster = {
var monstersCaught = 0;
现在定义一些对象将在后面用到。我们的英雄有一个speed属性用来控制他每秒移动多少像素。怪物游戏过程中不会移动，所以只有坐标属性就够了。monstersCaught则用来存储怪物被捉住的次数。
处理用户的输入
// 处理按键
var keysDown = {};
addEventListener(&keydown&, function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener(&keyup&, function (e) {
delete keysDown[e.keyCode];
}, false);
现在开始处理用户的输入(对初次接触游戏开发的前端同学来说，这部分开始可能就需要一些脑力了)。在前端开发中，一般是用户触发了点击事件然后才去执行动画或发起异步请求之类的，但这里我们希望游戏的逻辑能够更加紧凑同时又要及时响应输入。所以我们就把用户的输入先保存下来而不是立即响应。
为此，我们用keysDown这个对象来保存用户按下的键值(keyCode)，如果按下的键值在这个对象里，那么我们就做相应处理。
开始一轮游戏
// 当用户抓住一只怪物后开始新一轮游戏
var reset = function () {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
// 将新的怪物随机放置到界面上
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
reset方法用于开始新一轮和游戏，在这个方法里我们将英雄放回画布中心同时将怪物放到一个随机的地方。
// 更新游戏对象的属性
var update = function (modifier) {
if (38 in keysDown) { // 用户按的是↑
hero.y -= hero.speed * modifier;
if (40 in keysDown) { // 用户按的是↓
hero.y += hero.speed * modifier;
if (37 in keysDown) { // 用户按的是←
hero.x -= hero.speed * modifier;
if (39 in keysDown) { // 用户按的是→
hero.x += hero.speed * modifier;
// 英雄与怪物碰到了么？
hero.x &= (monster.x + 32)
&& monster.x &= (hero.x + 32)
&& hero.y &= (monster.y + 32)
&& monster.y &= (hero.y + 32)
++monstersCaught;
这就是游戏中用于更新画面的update函数，会被规律地重复调用。首先它负责检查用户当前按住的是中方向键，然后将英雄往相应方向移动。
有点费脑力的或许是这个传入的modifier 变量。你可以在main 方法里看到它的来源，但这里还是有必要详细解释一下。它是基于1开始且随时间变化的一个因子。例如1秒过去了，它的值就是1，英雄的速度将会乘以1，也就是每秒移动256像素；如果半秒钟则它的值为0.5，英雄的速度就乘以0.5也就是说这半秒内英雄以正常速度一半的速度移动。理论上说因为这个update 方法被调用的非常快且频繁，所以modifier的值会很小，但有了这一因子后，不管我们的代码跑得快慢，都能够保证英雄的移动速度是恒定的。
现在英雄的移动已经是基于用户的输入了，接下来该检查移动过程中所触发的事件了，也就是英雄与怪物相遇。这就是本游戏的胜利点，monstersCaught +1然后重新开始新一轮。
// 画出所有物体
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
ctx.fillStyle = &rgb(250, 250, 250)&;
ctx.font = &24px Helvetica&;
ctx.textAlign = &left&;
ctx.textBaseline = &top&;
ctx.fillText(&Monsterrs caught: & + monstersCaught, 32, 32);
之前的工作都是枯燥的，直到你把所有东西画出来之后。首先当然是。然后如法炮制将英雄和怪物也画出来。这个过程中的顺序是有讲究的，因为后画的物体会覆盖之前的物体。
这之后我们改变了一下Canvas的绘图上下文的样式并调用fillText来绘制文字，也就是记分板那一部分。本游戏没有其他复杂的动画效果和打斗场面，绘制部分大功告成！
主循环函数
// 游戏主函数
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
then = now;
// 立即调用主函数
requestAnimationFrame(main);
上面的主函数控制了整个游戏的流程。先是拿到当前的时间用来计算时间差（距离上次主函数被调用时过了多少毫秒）。得到modifier后除以1000(也就是1秒中的毫秒数)再传入update函数。最后调用render 函数并且将本次的时间保存下来。
关于游戏中循环更新画面的讨论可参见「」。
关于循环的进一步解释
// requestAnimationFrame 的浏览器兼容性处理
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
如果你不是完全理解上面的代码也没关系，我只是觉得拿出来解释一下总是极好的
为了循环地调用main函数，本游戏之前用的是setInterval。但现今已经有了更好的方法那就是requestAnimationFrame。使用新方法就不得不考虑浏览器兼容性。上面的就是出于这样的考虑，它是的一个简化版本。
启动游戏！
// 少年，开始游戏吧！
var then = Date.now();
总算完成了，这是本游戏最后一段代码了。先是设置一个初始的时间变量then用于首先运行main函数使用。然后调用 reset 函数来开始新一轮游戏（如果你还记得的话，这个函数的作用是将英雄放到画面中间同时将怪物放到随机的地方以方便英雄去捉它）。
到此，相信你已经掌握了开发一个简单H5小游戏需要的基本功了。或者自己研究研究吧 :)
阅读(...) 评论()
恭喜妳发现本彩蛋， happy coding
\(^___________^)/之前跟着慕课网学习开发H5小游戏开心鱼，勾起我的兴趣。
在写代码的过程中，不怎么会遇到问题。虽然代码是亲手敲出来的，但是由于并没有对游戏的整体思路，所以并不知道开发与优化的过程。
为了巩固知识，和了解优化的过程。我用了半天时间写出《看你有多色》游戏，（在网上找了一张游戏截图，之后自己写）
由于是第一次自己构思、自己动手的游戏，所以还有很多地方有待完善。
基本界面的实现的过程
就像切图一样，在我找到截图的时候，先利用HTML搭出框架，再用CSS填充样式。
随后是加入JS去实现不同的逻辑与活动。
我把控制输出信息（得分、倒计时、按钮）与画板（Canvas）分开，这样方便用JS控制。
class="message"&
class="score" id="score"&
class="timer"&
id="timer"&
class="stop"&
class="colorGame"&
id="canvas" width="500" height="500"&&
CSS的实现没什么难度，只是在写的时候发现一个问题：
如果我想把倒计时写成div，并且用display:inline-控制其显示为有长宽的矩形时，文字好像脱离了div。原因暂时还没想到，目前的解决方式是改变显示方式。
*{padding: 0;margin: 0;}
.gameView{margin: 0 auto;width: 500px;height: 100px;position: relative;}
.message{margin: 0 auto;width: 500px;height: 100px;background: #D1FFA2;
margin-top: 20px;}
.score,.timer,.stop{width: 160px;height: 100px;display: inline-block;
text-align: center;font: 32px/100px "Tahoma";margin-right: -8px;}
.score{background: #00CF95;}
.timer{width: 180px;background: #0098EF;}
.timer {color: #fff;margin: 0px auto;background: red;border-radius: 10px;
font-weight: normal;}
.stop{background: #6D0AD3;}
.stop {display: inline-block;height: 50px;width: 70px;border: none;
border-radius: 10px;background: red;color: #fff;
font: 24px/50px "微软雅黑";box-shadow: 5px 3px #ccc;}
.colorGame{margin: 0 auto;width: 500px;height: 500px;background: #D1FFA2;}
JS的实现比较复杂，我的思路是先通过Canvas画出游戏刚开始的界面。
这里用到了Canvas绘图的函数。我封装了一个绘制圆角矩形的函数，drawRoundRect()，参数依次是绘图环境名称、圆角矩形的X\Y坐标、圆角矩形的半径、填充色。
function drawRoundRect(cxt,x,y,r,radius,fillColor){
cxt.save();
cxt.translate(x,y);
cxt.beginPath();
cxt.arc(r-radius,r-radius,radius,0,Math.PI/2);
cxt.lineTo(radius,r);
cxt.arc(radius,r-radius,radius,Math.PI/2,Math.PI);
cxt.lineTo(0,radius);
cxt.arc(radius,radius,radius,Math.PI,Math.PI*3/2);
cxt.lineTo(r-radius,0);
cxt.arc(r-radius,radius,radius,Math.PI*3/2,Math.PI*2);
cxt.lineTo(r,r-radius);
cxt.closePath();
cxt.fillStyle = fillColor?fillColor:"black";
cxt.fill();
cxt.restore();
然后绘制游戏界面，drawGame()。
由于不同等级下的界面并不相同，所以我需要提前设置变量：level[ ]（游戏等级分布）、
spacing[ ]（不同等级下的方块间距）、squareW[ ]（不同等级下的方块边长）。
又因为绘制时需要的参数是X\Y轴坐标，因为可以通过这三个变量算出来，所以我又封装了一个函数rectXY()，传入的参数是方块的位置值。
function rectXY(a){
return (a+1)*spacing[levelNum]+a*squareW[levelNum];
function init(){
5,5,5,5,5,5,5,5,5,5,
6,6,6,6,6,6,6,6,6,6,6,6,
7,7,7,7,7,7,7,7,7,7,7,7,7,7,
8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,
9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,
10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,
10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10];
for (var i = 0; i & level. i++) {
spacing[i] = level[i]*(-2)+24;
for (var i = 0; i & level. i++) {
squareW[i] = Math.floor((w-(level[i]+1)*(level[i]*(-2)+24))/level[i]);
function drawGame(levelNum){
drawRoundRect(context,0,0,500,8,"#D1FFA2");
for (var i = 0; i & level[levelNum]; i++){
for (var j = 0; j & level[levelNum]; j++){
drawRoundRect(context,rectXY(i),rectXY(j),squareW[levelNum],6,formerColor);
drawRoundRect(context,rectXY(differentX),rectXY(differentY),squareW[levelNum],6,differentColor);
canvas.addEventListener('click',detect);
这样基本的界面就已经画好了。
交互逻辑的实现
这个游戏的交互活动很简单，仅仅是需要添加点击的监听事件。
难点在于，Canvas是DOM对象，监听时获取到的结果是对整个Canvas的点击效果（Canvas内部的图样是没有办法独立的被监听）。
解决的逻辑是：先获取鼠标的坐标值，然后用isPointInPath()判断当前坐标是否在当前绘制路径内部。
canvas对象有一个方法getBoundClientRect()，返回的是canvas元素的边界框对象， 此对象的left与top属性即为canvas左上角点相对窗口的坐标，将事件坐标与canvas坐标相减，得到相对于canvas的坐标。
var x = event.clientX - canvas.getBoundingClientRect().
var y = event.clientY - canvas.getBoundingClientRect().
获取后再进行判断是否在图形内。
if(context.isPointInPath(x,y)){}
由于绘制差异方块时还需要注意颜色相近，所以我设置了一个数组，用于计算RGB模式下的颜色差值，差值越来越小是因为关卡难度上升导致颜色更加相近。
badNum = [38,28,18,12,10,8,6,4,3,2];
具体的实现方法，包含之前的监听与判断，还有随机色与之相近色的获取和统计分数并更新。
function scoreNum(){
var scoreObj = document.getElementById("score");
scoreObj.innerHTML = "Score:"+
function detect(event){
var x = event.clientX - canvas.getBoundingClientRect().
var y = event.clientY - canvas.getBoundingClientRect().
drawRoundRect(context,rectXY(differentX),rectXY(differentY),squareW[levelNum],6,differentColor);
if(context.isPointInPath(x,y)){
levelNum++;
differentX = Math.floor(Math.random()*level[levelNum]);
differentY = Math.floor(Math.random()*level[levelNum]);
R = Math.floor(Math.random()*255);
G = Math.floor(Math.random()*255);
B = Math.floor(Math.random()*255);
formerColor = "rgb("+R+","+G+","+B+")";
nR = R+badNum[0];
nG = G+badNum[0];
nB = B+badNum[0];
differentColor = "rgb("+nR+","+nG+","+nB+")";
context.clearRect(0,0,500,500);
drawGame(levelNum);
scoreNum();
总的来说这个游戏并不复杂，稍微有一些不一样的地方就是对Canvas添加监听事件时，与对DOM添加事件相比更麻烦一点。
暂时来说没有卡住的地方，但是存在一个很大的问题：这个程序并没有体现面向对象的思想，二次浏览的时候会感到逻辑混乱。
还有一些小功能并没有添加进去：
1.没有暂停功能。
2.没有GameOver后的提示功能。
阅读(...) 评论()
