当前位置: 首页 > 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 是不可跨…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制(1)三次握手①握手过程②对握手过程的理解 (2)四次挥手(3)握手和挥手的触发(4)状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

ESP32读取DHT11温湿度数据

芯片:ESP32 环境:Arduino 一、安装DHT11传感器库 红框的库,别安装错了 二、代码 注意,DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统,支持多语言对话(如 中文,英文,日语),语音情感(如 开心,悲伤)&#x…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...