当前位置: 首页 > news >正文

浅显易懂的说清楚小游戏与H5游戏的技术区别

从“跳一跳”到“羊了个羊”微信小游戏上线4年时间,除了涌现出不少火爆全网的小游戏之外,也有类似于“动物餐厅”、“口袋奇兵”等游戏得以在此孵化繁荣,凭借着微信强大的社交属性小游戏成为游戏厂商在桌面端、App 端、H5 端之外争夺的另一个窗口。

依托小程序而诞生的小游戏为什么能够受到如此大的关注?抛开桌面端和 App 端而言,与 HTML5 游戏相近的小程序游戏为何能频频出爆款出圈?

小游戏的前世今生

小游戏从微信小程序诞生,我们不妨看看他的官方定义:小游戏是以小程序为载体的新游戏产品形态,具备无需下载、即点即玩、体验轻便等特点。

「呼朋引伴,说玩就玩,玩完就走」,这或许是对小游戏最准确的定义。

小游戏的前世

如果要追溯的话,在2016年4月12日,微信发布《微信外链规范》,将诱导分享、诱导关注、H5游戏等9大类外部链接内容列为违规内容,一经发现将立即作停止访问、屏蔽链接等处理。此举一度引发行业对于“微信要封杀H5游戏”的担忧。但现在看来,提前规范H5游戏链接分享行为,除了净化朋友圈内容,也正是腾讯在为微信开放H5游戏平台铺路。

2017年,腾讯正式在微信、手Q两大社交平台启动H5手游首轮测试,首款测试产品是其经典当家休闲游戏之一《天天爱消除》。随即通知小程序功能升级,正式推出小游戏。

在早期小游戏的玩法非常简单,更多类似连连看、俄罗斯方块、找不同等,比如俄罗斯方块,这种主要的技术点就是 DOM 操作,用 jQuery 原生 javascript css3 就可以了。画面内元素比较简单,逻辑不会太复杂,结构与常规Web 页面一致;主要技术点:DOM 元素、jQuery、原生javascript css3。

现在更复杂了一些,加了各种赛车类的、低画质格斗类的和塔防类的等等,总而言之就是在方便使用、方便运行、保证能玩的基础上使玩法更多、体验更优秀。

小游戏的今生

根据腾讯官方在2022年发布的数据显示,目前小游戏的开发者已经达到10万+,其中2021年实现了超 30%的商业增长,连续三年保持可观的增速,全年流水破千万的小游戏产品超过50款,过亿流水7款。

从数据可以明显看到,小游戏生态走向繁荣,其背后的商业规模也在持续的增长。

小游戏和H5游戏相比有何优势

H5 游戏的技术特点

H5 游戏在QQ农场、抢车位、4399小游戏的带动下,曾经也是达到过巅峰的,2017年 H5 游戏市场为30亿元,手游市场规模达到1440亿元。如果要说H5游戏的技术特点,主要应用到 DOM CSS、Canvas、WebGL,以及一些游戏引擎。

优点:

  • 开发成本相对低
  • 跨系统、跨终端、跨平台
  • 无需下载安装,即点即玩

缺点:

  • 制作门槛相对低
  • 缺少固定流量入口
  • 体验差距(性能、流量等)

小游戏的技术特点

小游戏是在 H5 游戏的基础上增加微信社交能力、文件系统、工具链,去掉一些对游戏开发不是那么重要的,像Dom、Bom 等,微信小游戏没有 webview 了,H5 规范 API 这里是微信小游戏 sdk 自己实现的,比如 canvas webgl。

优点:

  • 小游戏的操作逻辑更多,能够实现手搓键盘秀操作,而 H5 游戏只能做到点击互动
  • 能够调用系统的蓝牙、音频权限
  • 有固定的流量入口,可以实现用户的持续运营变现
  • 性能比 HTML5 要高,运行状况也更加稳定
  • 小游戏的画质强体验更好,也能玩到不少创意十足的

缺点:

  • 仅能单一的运行在微信或抖音等平台
  • 游戏的开发和运营受限于各个平台标准

为了更为直观的进行对比,将一些重要的点梳理成为表格形式供大家参考:

小游戏HTML5 游戏
编程语言JavaScript, TypeScriptJavaScript, TypeScript
入口微信/支持小程序游戏运行的App浏览器、公众号…
可用内存
性能上限
交互丰富度
留存 & ARPU高(风口&红海)
点击+激活转化率
常见的开发团队配置研发_2+美术_1+策划*1研发_1+美术_1+策划*1
常见代表跳一跳、欢乐斗地主、羊了个羊、动物餐厅、叫我大掌柜、咸鱼之王……QQ 抢车位、QQ 农场(偷菜)、围住神经猫……

游戏引擎支持度

虽然我们前面说了很多HTML5 与小游戏的区别,但请注意,无论怎样的引擎,最终在游戏运行时所做的大部分事情都是随着用户的交互更新画面和播放声音。

游戏引擎是指一些已编写好的可编辑电脑游戏系统或者一些交互式实时图像应用程序的核心组件。这些系统为游戏设计者提供各种编写游戏所需的各种工具,其目的在于让游戏设计者能容易和快速地做出游戏程式而不用由零开始。

小游戏的开发语言是 JavaScript,那么在引擎的底层就需要通过 JavaScript 调用绘制 API 和音频 API。在小游戏中,常见的引擎如下:

引擎理念
Creat.js一个非常轻量的,基于 HTML5 开发的游戏、动画、交互应用引擎
Pixi.js高性能的 WebGL 模式 2D 渲染引擎,API 简陋,常被 JS 框架封装为渲染内核
Three.js基于 WebGL 的 3D 渲染引擎库
Layabox支持AS3\TSVS三种语言,可同时发布H5、APP、Flash版本,追求性能极致
Egret(白鹭)自建工具链工作流,參考Flash AS3 API的移动端H5引擎,支持打包APP(但是这个好像倒闭了)
Cocos2d-jscocos2d-js继承原生cocos2d引擎的设计理念,API也参考原生cocos2d-x
unity腾讯自行开发的 unity 引擎小游戏转换技术

小游戏和H5游戏的关系也并不是非黑即白的关系,小游戏在H5游戏的基础上不断的优化,更像是我中有你的关系,但不管怎么将技术的持续推陈出新形成了对用户来讲更佳优质的体验,就是一件好事。

最后

整理了一套《前端大厂面试宝典》,包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法,一共201道面试题,并对每个问题作出了回答和解析。

有需要的小伙伴,可以点击文末卡片领取这份文档,无偿分享

部分文档展示:



文章篇幅有限,后面的内容就不一一展示了

有需要的小伙伴,可以点下方卡片免费领取

相关文章:

浅显易懂的说清楚小游戏与H5游戏的技术区别

从“跳一跳”到“羊了个羊”微信小游戏上线4年时间,除了涌现出不少火爆全网的小游戏之外,也有类似于“动物餐厅”、“口袋奇兵”等游戏得以在此孵化繁荣,凭借着微信强大的社交属性小游戏成为游戏厂商在桌面端、App 端、H5 端之外争夺的另一个…...

【Python入门第七天】Python 数字

Python 数字 Python 中有三种数字类型: intfloatcomplex 为变量赋值时,将创建数值类型的变量: 实例 x 10 # int y 6.3 # float z 2j # complex如需验证 Python 中任何对象的类型,请使用 type() 函数: 实…...

Python自动化测试 软件测试最全教程(附笔记),看完可就业

最近看到很多粉丝在后台私信我,叫我做一期Python自动化测试的教程,其实关于这个问题,我也早就在着手准备了,我录制了一整套完整的Python自动化测试的教程,都上传在B站上面,大家有兴趣的可以去看一下&#x…...

Windows 安装Tomcat

版本:tomcat8.5jdk-8u231一.解压JDK安装包 更换JDK安装路径二.解压安装Tomcat 选择jdk安装路径更换tomcat安装路径三.设置环境变量 1.“环境变量”界面中系统变量点击”新建“,创建CATALINA_HOMEC:\RESSET\tomcat(Tomcat服务器的根目录)2.创建…...

知识图谱业务落地技术推荐之图数据库汇总

0.图数据库排名 链接:https://db-engines.com/en/ranking/graph+dbms 0.1简要分析(各种图数据库属性) Neo4j(主流) 历史悠久且...

2023新华为OD机试题 - 最小传递延迟(JavaScript) | 刷完必过

最小传递延迟 题目 通讯网络中有N个网络节点 用1 ~ N进行标识 网络通过一个有向无环图进行表示 其中图的边的值,表示节点之间的消息传递延迟 现给定相连节点之间的延时列表times[i]={u,v,w} 其中u表示源节点,v表示目的节点,w表示u和v之间的消息传递延时 请计算给定源节点到…...

SpringMVC基础入门(一)之理论基础概念

文章目录SpringMVC1.概念2.常用注解请求与响应1.请求参数2.JSON传输3.常用注解响应1.响应页面2.响应JSON数据Rest风格1.介绍2.常用注解SpringMVC 1.概念 (1)定义 SpringMVC是一种基于Java实现MVC模型的轻量级Web框架。 (2)为什…...

前端知识点

一. slice和splice区别: 1.splice改变原数组,slice不改变原数组。 2.splice除了可以删除之外,还可以插入。 3.splice可传入3个参数,slice接受2个参数。slice(start,end):方法可从已有数组中返回选定的元素&#xff0c…...

【docker知识】从容器中如何访问到宿主机

一、说明 使用 Docker 能实现服务的容器化,并使用容器间网络在它们之间进行通信。有时您可能需要一个容器来与宿主机上非容器化的服务通信。以下是如何从 Docker 容器中访问本地主机或 127.0.0.1的具体方法。 二、方法1:简单的选择 适用于 Windows 和 Ma…...

MySQL入门篇-MySQL常用流程控制函数小结

备注:测试数据库版本为MySQL 8.0 这个blog我们来聊聊常见的流程控制函数 如需要scott用户下建表及录入数据语句,可参考:scott建表及录入数据sql脚本 流程控制函数 函数名函数用途CASEcase语句用于条件判断if()if/else条件判断ifnull()null数据处理nullif()retur…...

大数据技术架构(组件)35——Spark:Spark Streaming(1)

2.3、Spark Streaming2.3.0、OverviewSpark Streaming 是核心 Spark API 的扩展,它支持实时数据流的可扩展、高吞吐量、容错流处理。数据可以从许多来源(如 Kafka、Kinesis 或 TCP 套接字)获取,并且可以使用复杂的算法进行处理&am…...

实现超大文件上传逻辑

引言 文件上传功能是我们开发中经常会遇到的功能点,当日常开发中遇到小文件(比如:头像),可以直接将文件转为字节流直接上传到服务器上即可。但是当遇到大文件这种(比如:一部电影至少1个G)该怎么…...

JavaScript HTML DOM EventListener

JavaScript HTML DOM EventListener 是一个非常重要的概念,在前端开发中被广泛使用。它是用来监听 HTML DOM 上的事件,并执行特定的代码块。 EventListener 的语法非常简单,下面是一个示例代码: element.addEventListener("…...

构建RFID系统的重要组成部分

RFID读写设备,通常被用来扫描读取安装了RFID电子标签的目标物品,能实现快速批量无接触读写,是构建RFID系统的重要组成部分。RFID读写设备,通常有固定式读写设备和可移动读写设备两种。下面来了解一下RFID的特点,RFID系…...

PID控制算法简介

目录 1 简介 2 比例Proportional 3 积分Integral 4 微分Differential 5 公式 6 积分限幅 7 积分限行 8 相关代码 1 简介 PID控制中有P、I、D三个参数,PID即:Proportional(比例)、Integral(积分&#…...

【王道数据结构】第八章 | 排序

目录 8.1. 排序的基本概念 8.2. 插入排序 8.2.1. 直接插入排序 8.2.2. 折半插入排序 8.2.3. 希尔排序 8.3. 交换排序 8.3.1. 冒泡排序 8.3.2. 快速排序 8.4. 选择排序 8.4.1. 简单选择排序 8.4.2. 堆排序 8.5. 归并排序和基数排序 8.5.2. 基数排序 8.1. 排序的基本概念 排…...

95后外贸SOHO,年入7位数,他究竟是怎么做的?

外贸SOHO,一年到底能挣多少钱?有人说:“勤勤恳恳,年薪也就十来万吧”;也有人说:“100万而已我早就已经挣到了”;还有人说:“谁说新手难出头?我做跨境半年赚200万&#xf…...

2023年全国最新消防设施操作员精选真题及答案

百分百题库提供消防设施操作员考试试题、消防设施操作员考试预测题、消防设施操作员考试真题、消防设施操作员证考试题库等,提供在线做题刷题,在线模拟考试,助你考试轻松过关。 一、多选题 15、以下符合电气火灾监控系统监控设备的安装要求的有:( ) A、…...

mysql 无需修改配置文件,即可改变表数据存储位置

由于Linux系统的mysql 默认数据存储在/var/lib/mysql路径下,而该路径装系统时默认大小仅50G,当我们的数据稍微大一点时就会把该空间占满,无法再插入数据。 针对该问题有两种解决办法: 1、修改/etc/my.cnf配置文件,重启…...

轻松解决Session-Cookie 鉴权(含坑)附代码

Session-Cookie 鉴权 cookie介绍 Cookie 存储在客户端,可随意篡改,不安全有大小限制,最大为 4kb有数量限制,一般一个浏览器对于一个网站只能存不超过 20 个 Cookie,浏览器一般只允许存放 300个 CookieCookie 是不可跨…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用:作为微服务架构的网关,统一入口,处理所有外部请求。 核心能力: 路由转发(基于路径、服务名等)过滤器(鉴权、限流、日志、Header 处理)支持负…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中,拉取视频流只要求udp方式,从2016开始要求新增支持tcp被动和tcp主动两种方式,udp理论上会丢包的,所以实际使用过程可能会出现画面花屏的情况,而tcp肯定不丢包,起码…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了:一行…...

【位运算】消失的两个数字(hard)

消失的两个数字(hard) 题⽬描述:解法(位运算):Java 算法代码:更简便代码 题⽬链接:⾯试题 17.19. 消失的两个数字 题⽬描述: 给定⼀个数组,包含从 1 到 N 所有…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...