html5游戏,斗罗大陆html5游戏

H5游戏前景怎么样？

优势：

（1）由于是运行在浏览器上，所以只需要开发一次便可以在不同的操作系统上显示（2）迭代版本时，不需要打包便可以发布（实时更新、快速迭代），与云端实现实时数据交互（3）开发成本相对较低，对浏览器的适配较简单，且发布门槛相对较低

劣势：

（1）每次打开页面，都得重新加载，获取数据...（2）过于依赖网络，速度无法保证。特别在弱网环境下，不仅耗费流量而且加载缓慢，就算是WiFi情况下也不容乐观（3）只能使用有限的设备底层功能（无法使用摄像头、方向传感器、重力传感器、拨号、GPS、语音、短信、蓝牙等功能）（4）仍处于发展阶段，部分功能无法在基于现有技术的浏览器基础上实现，且无法全面的显示最完美的用户体验，只能用现有技术去弥去找最佳解决方案

前景

HTML5是WEB的未来，不仅在电脑端，而且在移动端也一定会得到广泛的应用。 据统计2013年全球将有10亿手机浏览器支持HTML5，同时HTML Web开发者数量将达到200万。毫无疑问，HTML5将成为未来5-10年内，移动互联网领域的主宰者。 据IDC的调查报告统计，截至2012年5月，有79%的移动开发商已经决定要在其应有程序中整合HTML5技术。 WEB技术发展越来越迅速，HTML5的到来更是把WEB技术推向了巅峰，目前HTML5技术已经日趋成熟，HTML5的未来十分光明，值得我们去学习。

H5 游戏 前景

个人比较看好H5，原因是flash将被淘汰，html5已成为主流，在运营速度，安全，渠道等方面，H5 游戏 较于端游，页游有着天然的优势。

当然，h5的优势和劣势都是相比较而言的，这里相比较小程序、APP等主流形式。

H5以营销为主，APP和小程序偏于长期运营，我们以“产品用途”这个角度来分析：

一般情况下，H5网页通常以移动设备打开，小屏幕的聚焦会让人比较专注信息的传达；

H5是在线打开，无需下载，在任意平台可以打开，对比需要下载安装的APP来说方便了不少；

H5属于外链，相对于小程序来说，可以做更多精细化、灵活的动画及技术的控制彰显营销本酷，数据接口也不受限微信；

不局限在移动端，也可以在PC、pad和商场展示屏……H5有着更多的场景环境选择；

成本低，比如使用epub360 H5页面工具可以免费制作H5小 游戏 ，开发app、小程序及运营与维护app、小程序成本要多得多。

以对应人群为中心的做倾斜性的交互体验，轻量化的H5作为营销使用互动性更强。

弊端的话，对比app、小程序来说，寿命短，用户的粘性较差、无固定的打开、数据精细化控制也较弱……对于H5 游戏 前景，近几年还是比较主流，H5 游戏 制作推荐使用意派Epub360 H5平台。

H5 游戏 这个蛋糕虽然不大，但是各个 游戏 公司都想进来分一快，加上腾讯系和讯飞等一些 科技 公司的入局，可见在2019年H5 游戏 还是非常有前景的。

随着H5技术的日益成熟，很多H5 游戏 画质已经可以跟原生手游端相媲美，三端互通依然是各大 游戏 公司运营的重点，可见从2015年兴起到2019年，H5 游戏 依然保有这一定的活力和流量。相信再今后市场份额会更大。

且H5 游戏 也已经偏向精细化和IP化，如果技术进一步突破。相信更加轻便的H5 游戏 应该会受到更加的追捧。

但同时H5 游戏 也有自己的弊端，比如留存低，流量入口难等，但总体来说还是看好H5 游戏 前景的。

一牛 游戏 就是一个专门做H5 游戏 的平台，目前还属于H5 游戏 的红利期，平台上有很多优质 游戏 ，流水都还不错，且产品迭代迅速，对玩家还是相对有吸引力的。

大市场，所了解的一家梦花 科技 ，H5 游戏 ，可以了解，很不错

有个好东西呢叫页游。flash做的，会批量转移到h5。比较著名的，舰队collection据说要在2019年转移。作为玩家来讲，相比flash，可拓展性，稳定性，资源占用，安全性还是其次，ios不支持flash是很尴尬的

目前H5 游戏 整体不是太好。单款 游戏 来说，日活跃用户要比native 游戏 差几个数量级。也就是说H5 游戏 历史 上还没出来过一款流行起来的 游戏 。H5在性能和表现力方面短板仍存在。不过，H5 游戏 还是有前景的。因为它有自己的优势，比如跨平台，开发周期快等。整体出在缓慢上升发展过程中，也许哪天出来一些优质的代表作，就能形成流行趋势。

相关问答

Q1: html5是干什么用的？Html5小游戏用途又是什么？

html5是指网页第5版标准.

在这个标准下,网页构建不能依赖商业插件(防止垄断,如早期FLASH的垄断地位,一切需要看ADOBE的),不能有第3方插件(来防止木马和病毒打包成插件影响安全).代码编辑要可视化,代码更简单易懂(减少开发成本和加快开发进度).

所以在H5标准下,像使用ADOBE公司的FLASH插件或unity或广告推广插件等都是不符合标准的.

而符合标准的网页则是主要使用JS+H5编写,因为是通用语言,所以可以横跨平台,比如 电脑和手机等都可以使用一套文件,也因为抛弃第3方插件,所以不会有软件限制,象FLASH只能用ADOBE公司的软件打开,而JS不光软件,就算电脑带的记事本也可以制作和修改.减少开发成本.

至于H5小游戏,只是符合H5标准的游戏,现在用的多的地方是营销方面.另外,H5游戏只是符合标准,而制作方法有很多,有软件生成,引擎制作,手写等,是做的好还是做的差是看开发人员的本事.所以这个不是好坏判断的标准.

Q2: 如何开发一个简单的html5小游戏

创建画布

// 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, // 每秒移动的像素

x: 0,

y: 0

};

var monster = {

x: 0,

y: 0

};

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;

}

// 英雄与怪物碰到了么？

if (

hero.x = (monster.x + 32)

monster.x = (hero.x + 32)

hero.y = (monster.y + 32)

monster.y = (hero.y + 32)

) {

++monstersCaught;

reset();

}

};

这就是游戏中用于更新画面的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);

render();

then = now;

// 立即调用主函数

requestAnimationFrame(main);

};

上面的主函数控制了整个游戏的流程。先是拿到当前的时间用来计算时间差（距离上次主函数被调用时过了多少毫秒）。得到modifier后除以1000(也就是1秒中的毫秒数)再传入update函数。最后调用render 函数并且将本次的时间保存下来。

关于游戏中循环更新画面的讨论可参见「Onslaught! Arena Case Study」。

关于循环的进一步解释

// requestAnimationFrame 的浏览器兼容性处理

var w = window;

requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

如果你不是完全理解上面的代码也没关系，我只是觉得拿出来解释一下总是极好的

为了循环地调用main函数，本游戏之前用的是setInterval。但现今已经有了更好的方法那就是requestAnimationFrame。使用新方法就不得不考虑浏览器兼容性。上面的垫片就是出于这样的考虑，它是Paul Irish 博客原版的一个简化版本。

启动游戏！

// 少年，开始游戏吧！

var then = Date.now();

reset();

main();

总算完成了，这是本游戏最后一段代码了。先是设置一个初始的时间变量then用于首先运行main函数使用。然后调用 reset 函数来开始新一轮游戏（如果你还记得的话，这个函数的作用是将英雄放到画面中间同时将怪物放到随机的地方以方便英雄去捉它）。

到此，相信你已经掌握了开发一个简单H5小游戏需要的基本功了。玩玩这个游戏或者下载代码自己研究研究吧 :)

Feel free to repost but keep the link to this page please!

Q3: 什么是HTML5游戏?

楼上说的太复杂，简单的说 html 是网页的后缀名，html5 还是网页游戏，但是在普通的网页做了改进，有了存储，改动，查看的数据库连接，方便玩家注册使用的，不是使用cookie保存数据

Q4: HTML5游戏开发方向前景如何，有什么优势

HTML5游戏是很有前途的。

HTML5游戏是未来的发展趋势，HTML5未来5~10年内前景是非常好的。

现在HTML5更偏重的是页面，再者是游戏。现在用HTML5做的网站已经不容忽视，不论动画细节还是运行效率都非常棒，再者就是HTML5制作及时就可以玩的小游戏，现在在微信朋友群很流行。不然也不会出现下班两个人制作了神经猫这种3天破千万甚至过亿的访问量。而意图就已经很明显了，虽然只有几天，但是引来投资就已经有钱了。