着互联网的普及和技术的发展，网页游戏已经成为娱乐和休闲活动的重要组成部分。无需安装任何应用程序，只需打开浏览器，您就可以畅玩各种类型的网页游戏。然而，开发网页游戏并不是一项容易的任务，因为不同类型的游戏需要不同的开发方式和技术。在本文中，我们将探讨一些常见的网页游戏类型以及它们的开发方式。

1. 休闲游戏开发

休闲游戏通常以其简单的玩法和易于上手的特点而闻名。这些游戏包括匹配三消、点击放置、太空射击等类型。它们通常采用HTML、CSS和JavaScript等前端技术进行开发。对于初学者来说，休闲游戏是一个很好的起点，因为它们的开发相对简单，但仍然可以提供有趣的游戏体验。

2. 益智游戏开发

益智游戏侧重于解谜和问题解决。数独、拼图游戏和逃脱房间游戏是其中的代表。这些游戏需要复杂的逻辑和算法，通常使用JavaScript来实现。开发益智游戏需要精心设计的谜题和游戏机制，以挑战玩家的智力。

3. 动作游戏开发

动作游戏要求玩家具备快速反应和出色的手眼协调能力。平台游戏、射击游戏和跑酷游戏都属于这一类别。为了实现流畅的游戏体验，开发者通常使用HTML5 Canvas或WebGL等技术进行图形渲染，同时使用JavaScript处理游戏逻辑。

4. 角色扮演游戏开发 (RPG)

RPG游戏允许玩家扮演虚构角色，在虚拟世界中冒险、战斗和升级。这类游戏的开发涉及到角色管理、任务系统和战斗机制的设计。前端技术，如HTML、CSS和JavaScript，通常用于创建游戏界面，而JavaScript用于实现游戏逻辑。

5. 卡牌和策略游戏开发

卡牌游戏和策略游戏要求玩家制定策略和使用卡牌或资源来获胜。这些游戏的开发通常需要前端技术来创建游戏界面，同时使用JavaScript来处理游戏规则和逻辑。玩家需要思考策略，因此这类游戏往往具有深度和复杂性。

6. 多人在线游戏开发 (MMO)

MMO游戏允许多个玩家在线互动，通常包括多种游戏类型，如角色扮演、战略和社交互动。开发MMO游戏需要服务器端和客户端的开发，服务器端通常使用后端技术（如Node.js或Python），而客户端使用前端技术和游戏引擎来创建用户界面和游戏体验。

7. 体育游戏

体育游戏模拟各种体育运动，玩家可以参与并体验。足球、篮球、赛车等体育游戏通常使用HTML5 Canvas或WebGL来呈现游戏场景，同时使用JavaScript来实现游戏控制和逻辑。玩家需要运用战术和技巧来取得胜利。

8. 教育游戏开发

教育游戏旨在教育和培训。数学游戏、语言学习游戏和历史模拟游戏等类型的教育游戏通常使用前端技术和自定义逻辑来创建教育内容和互动元素。这些游戏可以帮助玩家学到新知识和技能。

总之，网页游戏的类型多种多样，每种类型都有其独特的特点和开发要求。开发者可以根据自己的兴趣和技能选择适合的类型，并学习相关的技术来实现各种令人兴奋的网页游戏。无论您是初学者还是有经验的开发者，网页游戏的开发都是一个创造性和有趣的过程，可以为玩家带来娱乐和挑战。在不断进化的互联网游戏世界中，创造和分享您的游戏是一种独特的乐趣。

箫 发自 凹非寺

量子位 | 公众号 QbitAI

一位小哥耗时16个月打造的3D版赛车游戏，这两天忽然火了起来。

只需一个浏览器，就能驾车从森林、海滩，“无缝切换”到广袤的沙漠甚至平原：

无论春夏秋冬还是白天黑夜，也无论你用的是电动汽车、自行车（？）还是公共汽车：

甚至不想开的时候，还可以开启自动驾驶模式，感受一波“AI飙车”的快乐。

△甚至有“自”行车&自动驾驶小巴

据小哥表示，这个名叫Slow Road的3D赛车游戏没有用到任何传统引擎，而是基于JavaScript编写的，无需登录就能直接在浏览器上运行。

要是电脑发出了吃力的声音，稍微更改一下渲染配置就能搞定。

网友们也是嗨得不行：此情此景怎能少得了经典BGM逮虾户（Deja Vu）

△作者回复：我写代码时听的是10小时沉浸版

还有网友回忆起了自己几十年前做过的3D赛车游戏，这波属实“爷青回”了：

来看看它究竟是怎么实现的。

基于Javascript而非传统引擎搭建

与大多数3D赛车游戏采用Unity3D、UE等传统引擎不同，Slow Roads是基于JavaScript编写的。

具体来说，它采用了一个名叫Three.js的开源框架，相当于一个能实现3D效果的JavaScript库，基于原生WebGL运行，可以在大部分网页浏览器中搞定交互式2D/3D图形。

除了开头提到的随意切换地点、季节和天气以外，这个赛车游戏也可以随意切换各种车型和视角。

此外，考虑到不同电脑对浏览器的适配，这款赛车游戏还给出了不同级别的渲染设置，从“粗糙大色块”到更精细的树木和围栏都能生成。

要是有电脑显卡的话，还可以更改一下浏览器设置，给图形渲染加加速。

所以，这个赛车游戏中“任意变幻”的环境是如何生成的？

首先是生成环境地形。

小哥采用了类似柏林噪声（Perlin noise）的自定义算法，来生成环境高度图（Heightmap，用于生成三维地形的图像），随后进行简单修改让山景看起来更逼真。

柏林噪声，Ken Perlin发明的自然噪声生成算法，经常用于在游戏和特效中生成随机内容，包括火焰、云彩、奇形怪状的岩石以及树木和大理石表面等。

△高度图，图源维基百科

随后是制作赛道。

选择地图上一个不太陡峭/凹陷的地方作为起点后，选择一个方向并测量周围高度图，以坡度最缓的路线作为道路中线，并给每个点注释上元数据，包括道路宽度、曲率等。

值得注意的是，如果赛道铺到一半出现“打结”的情况，也就是铺到一半撞到了一起，一定要想办法解决。这也是道路铺设最难的地方之一：

△车在岛上狂转

接下来就是渲染环境了。

从图中来看，整体环境被分成了很多个分辨率10m的大型网格，最大视距1km2；靠近道路时，每个网格又会被分成5×5的较小网格。

越接近道路中线，渲染越精细，最终道路高度和底层环境高度之间会进行插值，尽量让它保持“无缝衔接”。

当然小哥表示，这种衔接并不是“真·无缝”的，但通常看不出来。

最后就是整个环境的渲染了，这里面也有一些小细节：

包括地面和悬崖纹理、基于柏林噪音做草色变化，以及给树木等植被加上简单阴影、在湖泊周围渲染更多树等。

除了环境之外，就是一些基础物理学的配置了，包括重力、表面摩擦力和动力学计算等。

不过为了节省性能，小哥忽略了提示牌和树木的碰撞。

此外，他也采用了更“平和”的电动汽车作为核心赛车手，因为这样一来就不需要考虑齿轮或RPM等部件，而音频和物理特性也更容易编写了。（小哥称：内燃机正逐渐过时！）

当然，随着这款游戏的关注度上升，他表示后续还会进行更多优化。

未来支持手柄和汽车模拟器

随着人们对这款游戏的好奇度提升，小哥也着重解答了几个热点问题。

例如，采用JavaScript编写游戏的原因，是因为小哥想改变人们对浏览器的“刻板印象”，它可以做到比查资料更广泛的事情，甚至还能更好地对游戏性能进行优化。

不过，目前这款游戏还没有开源。小哥表示，后续可能会开源部分子系统，如图形MOD接口等。

对于这款游戏的未来，小哥也立下了几个flag，包括在环境上，开发更多的越野地点、加入更多环境细节，包括建筑、动物、植物阴影、灯光效果等；

赛车上，加入更多的赛车皮肤和车辆类型；天气上，细化天气类型（下雨、下雪、刮风等），也进一步改善已有天气的效果；

功能上，将来会加入竞争模式和全球排行榜（包括限时竞速、比拼距离等），同时对系统进一步进行优化，未来适配手柄、赛车模拟器等。

你做好上班摸鱼的准备了吗？（手动狗头）

玩耍地址：
https://slowroads.io/

参考链接：
[1]https://twitter.com/anslogen
[2]https://news.ycombinator.com/item?id=33305234
[3]https://anslo.medium.com/slow-roads-tl-dr-a664ac6bce40
[4]10小时版逮虾户:https://www.youtube.com/watch?v=9ILQNSgE7mw

— 完 —

量子位 QbitAI · 头条号签约

关注我们，第一时间获知前沿科技动态