百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

围住神经猫,HTML5移动游戏的成功范例

zhezhongyun 2025-01-16 21:36 50 浏览

i黑马注:最近,微信朋友圈最红的不再是各种鸡汤,而是一款呆萌的小游戏“围住神经猫”。不少网友表示,朋友圈已被这只猫刷屏!“围住神经猫”是南京一家公司的游戏团队开发的,开发只用了一天半。现在这股神经猫的传播热潮已经席卷整个网络。这里i黑马为各位带来神经猫背后的故事:

“围住神经猫”火了。这是一款HTML5游戏,在微信获得了疯狂转发,短短两天时间里,即获得一千万次的点击和500万次的用户数。百度指数两日间便完成了0到75804的跨越,而出现食品安全危机的麦当劳在7月21日百度指数峰值时竟比围住神经猫的百度指数少了两万多。

一个设计再加一个程序员,开发时长共计1.5天,这就是一款百万用户数游戏的全部成本。这款游戏是南京泥巴怪公司开发的,做“围住神经猫”也是想为了自己的“在线儿童社区”聚拢些用户而已。

“围住神经猫”采用HTML5游戏方式开发,最大的好处就是“即点即玩”,为游戏微信传播提供了一个“便捷”的前提,而非像通常意义上的 App 那样,需要经过更多的步骤从应用商店下载。而开发成本低的原因也恰恰是因为使用了HTML5游戏引擎——开发者只负责考虑创意问题,重复机械的底层游戏编程模块则由游戏引擎负责。

于是,作为“围住神经猫”的游戏引擎,HTML5游戏引擎公司Egret也赶上了这波现象级神经猫热潮,一日之间网站浏览量翻了十倍。

对于Egret创始人兼CEO陈书艺来讲,“围住神经猫”游戏网页最下面那一行“Egret framwork”则意味着,他在短短半天的时间里,两部手机——一部iPhone5s,一部三星Galaxy,毫无电力——他的电话已经被打爆了,嵌入广告邀请、采访邀请、投资意向纷至沓来。采访当时,陈书艺的手机还一直在充电状态。马鉴是Egret的联合创始人,负责管理引擎产品和技术团队。他则频繁遭遇QQ群“开小窗”,其中甚至有公司公关,希望马鉴可以帮忙制作HTML5游戏,嵌入公司的一些软推广。《财经天下》周刊采访时曾被打断两次,一次是一个投资人的来访,而另一次是陈书艺短暂离开时,自己的手机刺耳地在马鉴背后发出响声。

Egret是一家HTML5游戏引擎公司,这个定义对普通读者来说可能有些模糊,按照定义来讲,HTML5是一系列制作网页互动效果的技术的集合,而简单来讲,它的优势在于能够在移动端为Flash之所不能为的动画效果。而游戏引擎,则可以用陈书艺过去的经历来解释:2005年,从英国回国一年的他加入Discuz!公司。泡过论坛的人都会在网页的最下方看到:powered by Discuz!字样——它是十年间最流行的网络论坛框架。Discuz!的用户可以在不需要任何编程的基础上,通过简单的设置和安装,在互联网上搭建论坛服务。直到今天,还有很多论坛在使用这套框架。而Egret想要做得就是HTML5游戏界的Discuz!。

游戏引擎行业也不乏国际品牌,Cocos的2D引擎,Unity的3D引擎已是声名在外。而Egret的市场策略与它们的不同之处在于,前两者的使命是使游戏开发者在开发App游戏上更加便捷,而Egret则侧重于开发HTML5游戏。这种策略挺中国特色的,毕竟目前微信和微博的病毒传播成为一种主流,游戏开发者可能更愿意先通过易于传播的移动网页,以“即点即用”的方式推广自己的游戏,期望用户产生依赖之后,会去应用商店下载。而且,游戏引擎业又不像时尚界、投资界、媒体界一样有“外来和尚光环效应”,毕竟不是每个程序员都是海归,而Egret提供的中文文档使游戏开发门槛更低。

Egret的产品被“围住神经猫”的开发者选为自己的游戏引擎还有一个原因,Egret公司联合创始人马鉴此前十年都在Adobe负责Flash产品研发,连从Egret官网下载的程序后缀都是.air,以Adobe Air开发的程序才会带有这一后缀。而神经猫的开发者此前曾一度开发过Flash游戏。当开发者看到Egret的界面,简直震惊了,因为代码逻辑与Flash开发别无二致,只要稍微替换一些代码说明,即可上手。

给陈书艺打电话的人不乏希望“围住神经猫”可以嵌入广告。现象级产品可以赚快钱,但是现象级产品制造者的制造者,他们的商业模式却不太清晰。在陈书艺看来,这不是现在急需解决的问题,他对《财经天下》周刊的记者说,“我们公司成立才半年多时间,目前就是希望能把产品做好。”

在整个游戏引擎行业主要有三种盈利模式,最简单是卖软件,比如Unity的3D引擎,代理商价格在一万两千元左右,这在中国基本不可行。然后就是为游戏开发者提供云服务等增值服务,以CocoonJS为代表。最后则是利用游戏引擎做一个游戏集合平台,类似最早的Web端4399小游戏集合平台,游戏引擎公司担任因流量的任务,Turbulenz游戏引擎就发布了一个ga.me的网站。对于每一种商业模式陈书艺都不置可否。

他可能还没想清楚做HTML5游戏引擎最终的盈利方向,但是他觉得,今年是他做HTML5搜索引擎最合适的契机,“这个项目让我觉得特别兴奋”,据他所说,他算是为此放弃了一份差点IPO的创业公司——奇矩互动。“我不是想赚多少钱,我是挺想做点……”他没好意思把“做成一件大事”说出口,默默转头开始挪回因为需要拍摄杂志照片而挪动的茶几。

简单的来讲,做HTML5游戏引擎,陈书艺就是想“占山头”,先把这件事做了。在这个时间点上,他和马鉴发现做HTML5游戏引擎的时机已经日趋成熟。首先是移动社交网络的兴起,游戏“即点即用”这个需求是存在的。其次是HTML5的规范标准日趋稳定,Google的Chrome、微软的IE、苹果的Safari逐渐愿意支持规范统一的的标准化。而移动硬件的进化已经逐渐能满足需求运行游戏的需求,2010年,很多智能手机都没有配置对Canvas的硬件加速,这使某些游戏开发者“有心无力”,而现在就连红米Note都已经配备了8核处理器。

陈书艺总提到一个具体的年份,2010年。这一年是一个HTML5的里程碑,乔布斯在加利福尼亚州库比蒂诺总部的内部大会上回答一位苹果员工的提问,“没有人愿意使用Flash,全球已经开始步入HTML5时代。”使得HTML5走入人们的视线中心,此后HTML5经过捧后杀——以一家名叫Moblyng的提供HTML5解决方案的公司的倒闭作为引爆点。“其实这件事也是这个公司自己的经营问题”,陈书艺说,接着他看了一眼被乔布斯视为HTML5的手刃对象Adobe的前员工马鉴。

泥巴怪公司无疑是互联网的幸运者,但是除了HTML5,其本身对一些细节的改造或多或少成为了它火爆的因素。“围住神经猫”并非泥巴怪的首创游戏,此前中美日各国开发者均开发过类似游戏——格点围住一只不断移动的猫,就算获胜。而把日本漫画“全是猫”和围猫游戏相结合,再加上不同级别胜利者的取名“击败了精神病院99%的精神病患者,获得称号精神病院长”、“击败了精神病院100%的精神病患者,获得称号:白天睡觉喵”迎合了互联网亚文化的贱心理,再加上微信分享使人类“攀比心”作祟,使得“围住神经猫”比其它“围猫游戏”更有可能获得人类的关注度,当然,最重要还是运气好。

本文来自《财经天下周刊》的投稿

相关推荐

3 分钟!AI 从零开发五子棋全过程曝光,网友:这效率我服了

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8...

一行代码实现display&quot;过渡动画&quot;原理

作者:Peter谭老师转发链接:https://mp.weixin.qq.com/s/XhwPOv62gypzq5MhhP-5vg写本文的起因上篇文章,提到如何让display出现过渡动画,却没有仔...

脑洞:琼恩·雪诺、蝙蝠侠和魔形女的灵魂宠物了解一下

AlekseiVinogradovisaRussianfreelancedigitalartistwhoshareshisskillsandtalentwith120k...

浏览器的渲染机制、重绘、重排

1、什么是重排和重绘网页生成过程:HTML被HTML解析器解析成DOM树css则被css解析器解析成CSSOM树结合DOM树和CSSOM树,生成一棵渲染树(RenderTree)生成布局(flo...

托福写作高频考题写作思路&amp;词汇丨考虫独家

科技话题与媒体话题是托福写作的常考话题很多考生对这两类话题里的专有词汇表达也许很不了解所以今天就跟随考虫托福写作老师刘云龙老师一起来学习在这些话题的写作里你可以使用哪些有用的表达。希望大家有收获!记得...

在优麒麟上使用 Electron 开发桌面应用

使用Web标准来创建桌面GUI,上手快、成本低、跨平台、自适应分辨率,这些都是Electron的优势。作者/来源:优麒麟Electron是由Github开发,用HTML、CSS和...

php手把手教你做网站(三十八)jquery 转轮盘抽奖,开盲盒

抽奖和开盲盒性质一样的都是通过ajax读取后台的随机数据。1、转轮盘本来是想直接绘图实现轮盘,但是没有找到怎么填充文字,只好把轮盘弄成了背景图,通常用于游戏抽道具,商城积分抽奖,公司年末员工抽奖点击抽...

用 CSS 整活!3D 轮播图手把手教学,快乐代码敲出来

兄弟们,今天咱来搞点好玩的——用CSS整一个3D轮播图!咱野生程序员就是要在代码里找乐子,技术和快乐咱都得要!代码是写不完的,但咱能自己敲出快乐来,走起!一、先整个容器,搭个舞台咋先写一个...

实现一个超酷的 3D 立体卡片效 #前端开发

今天我们来实现一个超酷的3D立体卡片效果。正常情况下就是一个普通的图片展示卡片,鼠标悬停的时候图片会跳出卡片,并将影子投射到背景卡片上,在视觉上有一个3D立体感。html主要分成3个部分:容器→背景层...

Vue 3 Teleport与Suspense:解决UI难题的两个&quot;隐藏大招&quot;

模态框的"层级噩梦"与Teleport的救赎"这个模态框怎么又被父容器截断了?"团队协作开发后台系统时,小张第N次遇到这个问题。多层嵌套的组件结构里,弹窗被overfl...

让交互更加生动!有意思的鼠标跟随 3D 旋转动效

今天,群友问了这样一个问题,如下所示的鼠标跟随交互效果,如何实现:简单分析一下,这个交互效果主要有两个核心:借助了CSS3D的能力元素的旋转需要和鼠标的移动相结合本文,就将讲述如何使用纯CSS...

填坑:transform元素导致zindex失效终极方法

今天遇到了使用css3动画的元素层级被放大置顶的问题,ios浏览器上没问题,安卓原生浏览器和安卓微信上有问题。使用了css3动画的元素z-index失效,兄弟元素设置多高的z-index都盖不住解决办...

诡异的层级错乱:一个被transform隐藏的CSS陷阱

周五下午三点十七分,设计部突然发来紧急截图——原本应该悬浮在顶部的导航菜单,此刻正诡异地被下方的轮播图遮挡。我盯着屏幕上错乱的层级关系,手指下意识地敲下z-index:9999,心里清楚这不过是程序...

动画篇--碎片动画

本文授权转载,作者:Sindri的小巢(简书)前言从最开始动笔动画篇的博客,至今已经过去了四个多月。这段时间回头看了看自己之前的动画文章,发现用来讲解动画的例子确实不那么的赏心悦目。于是这段时间总是想...

Nature:大洋转换断层处的拉张构造与两阶段地壳增生

Nature:大洋转换断层处的拉张构造与两阶段地壳增生转换断层是三种基本的板块边界之一,全球总长度超过48000km(Bird,2003),它们的发现为板块构造理论的建立奠定了重要的基础(Wil...