30 个纯 HTML5 实现的游戏

浏览器和 JavaScript 的功能逐年不断的变强变大。曾几何时，任何类型的游戏都需要Flash。但随着 HTML5 发展，HTML5 + WebGL 游戏式就慢慢占领着这个舞台。以下是30款流行的游戏，它们可以在所有现代浏览器中运行，并且只使用web技术构建。

ctx.arcTo(x + width, y + skew, x + width, y + radius + skew, radius);

网页赛车游戏HTML代码

function roundedRect(ctx, color, x, y, width, height, radius, turn, turneffect) {

三国杀 单机网页游戏 roundedRect(game.ctx, "#FFF", startX + 60, startY + 25, 40, 18, 3, true, 0.05);

ctx.arc(startX + xPos, startY + 20 + lightsY, 6, 0, Math.PI*2, true);

roundedRect(ctx, "#474747", startX + 40, startY + 5, 80, 10, 5, true, 0.1);

ctx.quadraticCurveTo(startX + 166, startY + 35, startX + 159, startY + 55 + (game.state.turn * 0.2));

ctx.lineTo(startX + 159, startY + 12 + (game.state.turn * 0.2));

ctx.moveTo(startX + 2, startY + 12 + (game.state.turn * 0.2));

point2 = getCirclePoint(centerX, centerY, 2, angle + 90),

function drawPointer(ctx, color, radius, centerX, centerY, angle) {

angle = map(game.state.speed, 0, game.state.car.maxSpeed, 90, 360);

ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

var radius = 50, tigs = [0, 90, 135, 180, 225, 270, 315],

drawRoad(3, 24, 0, game.ctx.createPattern(game.canvas2, 'repeat'));

drawRoad(game.settings.road.min, game.settings.road.max, 10, game.colors.road);

drawGround(game.ctx2, game.state.offset, game.colors.roadLine, game.colors.road, game.canvas.width);

drawRoad(game.settings.road.min + 6, game.settings.road.max + 36, 10, game.colors.roadLine);

drawGround(game.ctx, game.state.offset, game.colors.ground,

game.ctx.putImageData(game.storage.bg, game.state.bgpos > 0

game.ctx.putImageData(game.storage.bg, game.state.bgpos, 5);

game.state.bgpos = game.state.bgpos % game.canvas.width;

game.state.bgpos += (game.state.currentCurve * 0.02) * (game.state.speed * 0.2);

键盘方向键上键 ↑(加速) 左键 ← 右键 → 下键 ↓（减速）,车轮压过两边白线即为游戏结束，车子停止游戏结束，不要让车子停下来哦^^

其他方法也可以实现同时提供性能和视觉效果的 3D 渲染。如果我有更多的空间，我更愿意使用像「three.js」这样的 WebGL API，我在我去年制作的游戏《Bogus Roads》中就用到了它。此外，因为它使用的是「requestAnimationFrame」，所以确实需要一些额外的代码来确保帧速率限制在 60 fps，我将它们添加到了增强版本中。我更喜欢使用「requestAnimationFrame」而不是「setInterval」，因为它的渲染结果更平滑，因为它将被垂直同步（让显卡的运算和显示器刷新率一致以稳定输出的画面质量）。这段代码的一个主要有点是它的兼容性非常好，可以在任何设备上运行，不过在我那台老旧的 iPhone 上运行速度有点慢。

整个游戏的业务逻辑就是如此！以下是用彩色编码将其压缩以显示不同部分后的最终结果。完成所有这些工作之后，可以想象，在这样一小段代码中看到我的整个游戏是多么令人满足。之后的 zip 操作通过消除重复的代码将文件大小几乎又减少了一半。

按下鼠标后，游戏就会开始，HUD 显示剩余的时间和当前距离。在这个条件语句块中，时间也会被更新，因为它只在比赛开始后才会减少。

游戏的标题、时间和距离是通过一个非常简单的字体渲染系统显示的，该系统使用了我们之前设置的 DrawText 函数。在玩家点击鼠标之前，它会将标题显示在屏幕中央。这是我非常自豪的部分——能够显示游戏标题并使用粗体的「impact」字体。如果我面临的空间上的要求更紧一些，这些东西会是第一个被我删掉的。

为了防止物体突然出现在地平线上，透明效果会随着距离的增加而减弱。由于我前面提到的神奇的种子随机函数，对象的形状和颜色使用了带有变化的梯形绘制函数。

在这里可以通过比较玩家和物体在 3D 空间中的位置来检查它们之间的碰撞。当一个物体被击中时，玩家会放慢速度，并将该物体标记为击中，这样它就可以安全地通过。

一开始我想要其他的车辆，但如果不进行大幅裁剪，就不能满足空间限制，所以我使用风景作为障碍。这些风景的位置是随机的，而且倾向于接近道路，否则他们就会变得很稀疏，而且很容易通过。为了节省空间，对象的高度也决定了对象的类型。

这个游戏只有两种不同类型的物体:树和石头，它们是被渲染在道路上的。首先，我们使用「R()」函数来确定是否存在对象。这是种子随机数厉害的地方之一。我们还将使用「R()」为对象添加随机形状和颜色变化。

我们需要检查路段是否在近/远剪辑范围中，以防止出现怪异的渲染伪像。此外，还有一个很好的优化方法，可以在道路变得很细时按距离缩小道路分辨率。这样就在没有明显的质量损失的情况下，将绘图次数减少了一半以上，从而获得了巨大的性能提升。

为了创建道路，我们需要在每个路段上进行 4 层渲染：地面，条纹路缘，道路本身和虚线白线。根据道路线段的坡度和方向为每个阴影着色，并根据该图层的外观添加一些额外的逻辑。

现在，我们有了每个路段的画布空间点，渲染就相当简单了。我们需要从后到前绘制每个路段，或者更具体地说，画出连接路段的梯形多边形。

有了世界空间位置后，我们便能够用道路位置减去玩家位置以获得当前的摄像头空间位置。代码的其余部分实现了不同的变换，首先旋转航向、俯仰角，然后进行投影变换，使更远的东西看起来更小，最后将其映射到画布空间。

在渲染道路之前，我们必须首先获取投影后的道路点。第一部分比较复杂，因为我们的道路的 x 值需要转换为世界空间位置。为了使道路看起来是弯曲的，我们将 x 值作为二阶导数。这就是奇怪的代码「x+=w+=」的作用。由于这种工作方式，路段并没有固定的世界空间位置，而是基于玩家的位置重新计算每一帧。

// draw horizonDrawPoly( c.width/2, horizon, c.width/2, c.width/2, c.height, c.width/2, LSHA(25, 30, 95));

山是通过在地平线上绘制 50 个三角形来程序化地生成的。当我们面向太阳时，由于山处于阴影中，所以山的光线会更暗。此外，附近的山更暗，以模拟雾的效果。这里真正的诀窍是调整大小和颜色的随机值以获得良好的结果。

// draw sky as full screen polyDrawPoly(c.width/2,0,c.width/2,c.width/2,c.height,c.width/2,g);

// clear the screen and set sizec.width = window.innerWidth, c.height = window.innerHeight;

我们还计算了用于将世界点转换为画布空间的投影比例。「cameraDepth」值表示摄像机的视野（FOV），本游戏中其视野为 90 度。计算公式为「1/Math.tan((fovRadians/2))」，对于 90 度的 FOV 来说，其结果正好是 1。为了保持纵横比，投影按「c.width」进行缩放。

// was checkpoint crossed?if (position.z > nextCheckPoint){ time += checkPointTime; // add more time nextCheckPoint += checkPointDistance; // set next checkpoint hueShift += 36; // shift hue}

// update headingheading = ClampAngle(heading + velocity.z*roadX*worldRotateScale);cameraHeading = turn * cameraTurnScale;

// update jumpif (airFrame++ && mouseDown && mouseUpFrames && mouseUpFrames{ velocity.y += jumpAccel; // apply jump velocity airFrame = 9; // prevent jumping again}mouseUpFrames = mouseDown? 0 : mouseUpFrames+1;

// update player velocitylastVelocity = velocity.Add(0);velocity.y += gravity;velocity.x *= lateralDamp;velocity.z = Math.max(0, time?forwardDamp*velocity.z:0);

// get lerped values between last and current road segmentroadX = Lerp(p, road[s].x, road[s+1].x);roadY = Lerp(p, road[s].y, road[s+1].y) + height;roadA = Lerp(p, road[s].a, road[s+1].a);

// get player road segments = position.z / segmentLength | 0; // current road segmentp = position.z / segmentLength % 1; // percent along segment

相机的俯仰角使用了一个简单的弹簧系统，在玩家加速、刹车和跳跃时给人一种动态的感觉。当玩家驾车翻越山丘以及跳跃时，摄像机也会根据道路角度倾斜。

在此处理输入以控制加速，刹车，跳跃和转弯。通过「mouseUpFrames」也可以检测到双击。有一些代码可以跟踪玩家在空中停留了多少帧，以便在玩家仍然可以跳跃的时候有一个短暂的宽限期。

玩家的位置和速度是 3D 向量，并通过动力学进行更新以体现重力，阻尼和其他因素。如果玩家在道路下方，位置将被固定在地面上，并且速度会相对于法线反射。同样，在地面上时会施加加速度，并且越野行驶时相机会震动。经过游戏测试后，我决定允许玩家在空降时仍可以进行调整。

本节将介绍主要的更新函数，它可以处理游戏中所有内容的更新和渲染！通常，在代码写一个超大的函数并不是一个好习惯，我们需要将其分解成子函数。因此，为了方便理解，下面的叙述将其分为几部分。

// reset everythingvelocity = new Vec3 ( pitchSpring = pitchSpringSpeed = pitchRoad = hueShift = 0 ); position = new Vec3(0, height); // set player start posnextCheckPoint = checkPointDistance; // init next checkpointtime = maxTime; // set the start timeheading = randSeed; // random world heading

在游戏开始之前，我们必须首先生成整个赛道，而每个游戏的赛道都不同。为此，我们构建一个路段列表，它存储了道路在轨道上每个点的位置和宽度。

// draw outlined hud textDrawText=(text, posX)=>{ context.font = '9em impact'; // set font size context.fillStyle = LSHA(99,0,0,.5); // set font color context.fillText(text, posX, 129); // fill text context.lineWidth = 3; // line width context.strokeText(text, posX, 129); // outline text}

DrawPoly 可以绘制梯形，它也会被用于渲染场景中的所有东西。使用「|0」将 Y 分量转换为整数，以确保道路多边形完全连接。如果进行这项操作，在路段之间就会有一条细线。出于同样的原因，这种渲染技术必须在对角线图形的组件帮助下处理相机的滚动。

LSHA 使用模板字符串生成一个标准的 HSLA（色相、饱和度、光度、透明度）颜色，并且刚刚重新排序，以便将更多经常使用的组件排列在前面。在关卡处发生的全局色调变化也是在这里发生的。

由于这是一个「真 3D」游戏，一个 3D 向量类就显得极为有用了，而且它还能让代码容量更小。该类只包含这个游戏所必需的基本要素——一个带有加法和乘法函数的构造函数，它的参数既可以是标量，也可以是向量。要确定是否传入了一个标量，只需检查它是否小于一个大数。使用「isNan」或是检查它的类型是否是「Vec3」当然更好，但它们需要更多的空间。

游戏中的很多东西都是由常量来控制的。当我们用类似 Google Closure 这样的工具来进行压缩时，这些常量就会被替换成类似于 C++ 中的「#define」的形式。将它们放在开头能够更快地调整游戏玩法。

我的游戏使用到 html 的部分很少，因为它主要是基于 JavaScript 开发的。JavaScript 创建全屏画布的方法和与后面将画布大小设置为窗口内部大小的代码都是最节省空间的。我不能确定为什么 CodePen 中需要将「overflow:hidden」添加到「body」标签中，但是直接打开应该也可以正常工作。

代码需要被压缩到 2KB 以内。如果你不想选用上一种方案，还有一个类似的、但功能较弱的工具——RegPack，它可以在严格遵守规定的情况下编译 JavaScript。无论哪种方式，策略都是一样的，尽可能使用重复的代码，然后在压缩的时候压缩它们。例如，某些字符串经常出现，因此它们的压缩比很大。「c.width」、「c.height」和「Math」就是一些很好的例子，但还有很多其它的小问题。因此，在阅读这段代码时，请记住，你经常会看到一些重复代码，这些重复是有目的的——便于压缩。

不过，这个编译器还做了一些无用的事，比如替换模板字符串、缺省参数和其它有助于节省空间的 ES6 特性。所以我需要手动撤销某些无用的工作，并预先准备一些更「冒险」的压缩技术，以节省每一个字节。但这并不是最主要的成功之处，大部分文件体积的压缩还是归功于代码本身的架构。

由于游戏大小有严格的限制，程序的架构就显得尤为重要。我的总体策略是让一切尽可能的简单，以实现创造一款视觉感受和游戏体验都很棒的游戏的最终目标。

我的灵感主要来源于 80 年代的经典赛车游戏，比如《Out Run》。使用相似的技术，他们能够在非常早期的硬件上实现实时三维图形。我最近也在玩一些现代的赛车游戏，比如《Distance》和《Lonely Mountains: Downhill》，这些游戏也对我的视觉设计和游戏体验有所帮助。

本文包含了这个游戏的完整 JavaScript 代码，所以可能会有点长。不过代码的注释很友好，所以我不打算一行一行解读，也不要求你现在就通读所有代码。我的目的是向你解释它的工作原理，还有为什么我要这样做，以及这个项目的整个结构。你也可以在 CodePen上找到这份代码（

游戏编程竞赛强调「变化」（shift），所以每当玩家通过关卡时，我就会改变整个世界的色调。我想在玩家通过关卡时，会感觉到像进入了一个色调不同的新的维度，这就是我为它取名为「Hue Jumper」的原因。

我的作品（Hue Jumper）是对 80 年代赛车游戏渲染技术的致敬。这里的 3D 图像和物理引擎是我纯粹地使用 JavaScript 从零开始实现的，同时我还花了大量时间去调整游戏玩法和视觉效果。

几个月前，当我听说传奇 JS1K 游戏编程竞赛将不再举办时，当即把这件事告诉了其他开发者，最后我们决定在 itch 上搞一个 2KB 版的编程竞赛以弥补这一遗憾，我们将其称之为「2kPlus Jam」。这个竞赛的主要目标是制作一个只需要 2KB 压缩文件就可以容纳的游戏。如果你知道一个 3.5 英寸软盘可以存超过 700 个这样的游戏，你也就知道这有多小了。

控制复杂度一直是软件开发的核心问题之一，一代代的计算机从业者纷纷贡献着自己的智慧，试图降低程序的计算复杂度。然而，将一款 3D 赛车游戏的代码压缩到 2KB 以内，听起来是不是太夸张了？本文作者 Frank 是一名资深游戏开发者，在本文中，他详细介绍了如何灵活运用代码压缩、编译、随机数生成、代码复用、设计模式等十八般武艺仅仅通过 2KB 的代码就能实现一款强大的 3D 赛车游戏。

网页游戏开发基础——网页基础知识

静态网页的扩展名为html或htm，例如：index.html或index.htm。动态网页的扩展名为asp、aspx、jsp、php等，例如：index.aspx或index.php。静态网页在浏览器里的显示不会变，动态网页在显示之前，服务器可以根据浏览器传递过来的值进行相应处理，再把处理后的结果发给浏览器显示，也就是说动态网页在浏览器的显示是可变的。例如：一个显示商品信息的网页，用户可以输入感兴趣的商品名称，然后单击查询按钮，那么浏览器会将商品名称发给服务器，接着服务器从数据库中查询相应的商品，并把查询到的商品返回给浏览器，最后浏览器显示查询到的商品，例如下面的网页

Frank 回复表示，大多数 small demos 都需要某种运行环境，即使它是可执行的。在这种情况下，就是 javascript 运行时环境，没有其他 dependencies.。因为 javascript 是解释的，所以也可以说压缩后的代码是在2KB以内的。

雷锋网注意到，Frank Force 在个人博客发了这篇文章后，在内容、标题的加持下，这篇文章后来被不少国外媒体转载。在盛赞之余，也有质疑的声音。网友“Anon”在原文下评论：你是如何在 2KB 安装一个完整的 javascript 的，除非你可以随意忽略 dependencies 插件库的大小，或者你将整个游戏作为 dependency，大小才有可能控制到 2KB，否则就是欺骗。

当然，还有很多其他 3D 渲染方法可以同时保证性能和视觉效果。如果我有更多的可用空间，我会更倾向于使用一个 WebGL API 比如 three.js ，我在去年制作的一个类似游戏“Bogus Roads”中用过这个框架。此外，因为它使用的是 requestAnimationFrame ，所以需要一些额外的代码来确保帧速率不超过60 fps，增强版本中我会这么用，尽管我更喜欢使用 requestAnimationFrame 而不是 setInterval ，因为它是垂直同期的（VSyn，VerticalSynchronization），所以渲染更丝滑。这种代码的一个主要好处是它非常兼容，可以在任何设备上运行，尽管在我旧 iPhone 上运行有点慢。

这就是整个游戏啦！下方的一小段代码就是压缩后的最终结果，我用不同的颜色标注了不同的部分。完成所有这些工作后，你能感受到我在2KB内就做完了整个游戏是多么让我满意了吗？而这还是在zip之前的工作，zip还可以进一步压缩大小。

在这个 massive Update function 结束后，它调用 requestAnimationFrame (Update) 来触发下一次更新。

按下鼠标后，游戏开始，然后 HUD 会显示剩余时间和当前距离。时间也在这块更新，玩过此类游戏的都知道，时间只在比赛开始后减少。

游戏的标题、时间和距离是用一个非常基础的字体渲染系统显示出来的，就是之前设置的 DrawText 函数。在玩家点击鼠标之前，它会在屏幕中央显示标题。

为了防止对象突然出现在地平线上，透明度会随着距离的接近而削弱。梯形绘图函数定义物体的形状和颜色，另外随机函数会改变这两个属性。

这是通过比较玩家和物体在 3D 空间中的位置来检查它们之间的碰撞位置。当玩家撞到一个物体时，玩家减速，该物体被标记为“ hit ”，这样它就可以安全通过。

最初我还想涉及其他车型，但为了达到 2KB 的要求，必须要进行特别多的削减，因此我最后放弃了这个想法，用风景作为障碍。这些位置是随机的，也比较靠近道路，不然它们太稀疏，就很容易行驶。为了节省空间，对象高度还决定了对象的类型。

游戏有两种不同类型的物体：树和石头。首先，我们通过使用 R 函数来确定是否加一个对象。这是随机数和随机数种子特别有意思的地方。我们还将使用 R 为对象随机添加不同的形状和颜色。

if ((segment1.w > 300) && (s+i)%9==0 && i DrawPoly(p1.x, p1.y, p1.z*dashLineWidth,

LSHA(((s+i)*segmentLength%checkPointDistance 70 : 7) + light));

let segment2 = road[s+drawDistance]; // store the last segment

有必要检查路段是在近还是远剪辑范围，以防止渲染出现 bug 。此外，还有一个很好的优化方法是，当道路变得很窄时，可以通过 distance 来减小道路的分辨率。如此，不仅减少了 draw count 一半以上，而且没有明显的质量损失，这是一次性能胜利。

为了创建道路，这里有4层渲染：地面，条纹路边缘，道路本身和白色虚线。每一个都是基于路段的俯仰角和方向来加阴影，并且根据该层的表现还有一些额外的逻辑。

现在我们有了每个路段的画布空间点，渲染就相当简单了。我们需要从后向前画出每一个路段，或者更具体地说，连接上一路段的梯形多边形。

一旦我们有了世界空间位置，我们就可以从道路位置中知道玩家的位置，从而得到本地摄像机空间位置。代码的其余部分，首先通过旋转标题、俯仰角来应用变换，然后通过投影变换，做到近大远小的效果，最后将其移动到画布空间。

在渲染道路之前，我们必须首先获得投影的道路点。第一部分有点棘手，因为我们的道路的 x 值需要转换成世界空间位置。为了使道路看起来蜿蜒曲折，我们把x值作为二阶导数。这就是为什么有奇怪的代码“x+=w+=”出现的原因。由于这种工作方式，路段没有固定的世界空间位置，每一帧都是根据玩家的位置重新计算。

c.width/2, horizon, c.width/2, c.width/2, c.height, c.width/2,

因为用了光线照明，山脉在面对太阳时会更暗，因为它们处于阴影中。此外，越近的山脉颜色越暗，我想以此来模拟雾气。这里我有个诀窍，就是微调大小和颜色的随机值。

DrawPoly(c.width/2,0,c.width/2,c.width/2,c.height,c.width/2,g);

DrawPoly(c.width/2,0,c.width/2,c.width/2,c.height,c.width/2,g);

我们还计算了将世界点转换到画布的投影比例。cameraDepth 值代表摄像机的视场(FOV)。这个游戏是90度。计算结果是 1/Math.tan(fovRadians/2) ，FOV 是90度的时候，计算结果正好是1。另外为了保持屏幕长宽比，投影按 c.width 缩放。

heading = ClampAngle(heading + velocity.z*roadX*worldRotateScale);

if (airFrame++ && mouseDown && mouseUpFrames && mouseUpFrames{

dp = Math.cos(roadA)*velocity.y + Math.sin(roadA)*velocity.z;

当玩家加速、刹车和跳跃时，我通过spring system展示相机的俯仰角以给玩家动态运动的感觉。此外，当玩家驾车翻越山丘或跳跃时，相机还会随着道路倾斜而倾斜。

接下来要处理输入指令，涉及加速、刹车、跳跃和转弯等操作。双击通过 mouseUpFrames 测试。还有一些代码是来跟踪玩家在空中停留了多少帧，如果时间很短，游戏允许玩家还可以跳跃。

玩家的位置和速度是 3D 向量，并受重力、dampening 和其他因素等影响更新。如果玩家跑在地面上时，会受到加速度影响；当他离开这段路时，摄像机还会抖动。另外，在对游戏测试后，我决定让玩家在空中时仍然可以跑。

这是主要的更新功能，用来更新和渲染游戏中的一切！一般来说，如果你的代码中有一个很大的函数，这不是好事，为了更简洁易懂，我们会把它分几个成子函数。

( pitchSpring = pitchSpringSpeed = pitchRoad = hueShift = 0 );

road[i].w = i > roadEnd ? 0 : Lerp(p, road[i].w, roadGenWidth);

roadGenLengthMax = roadGenTaper + R(99,1e3); // random length

if (roadGenLength++ > roadGenLengthMax) // is end of section?

首先，我们必须生成完整的轨道，而且准备做到每次游戏轨道都是不同的。如何做呢？我们建立了一个道路段列表，存储道路在轨道上每一关卡的位置和宽度。轨道生成器是非常基础的操作，不同频率、振幅和宽度的道路都会逐渐变窄，沿着跑道的距离决定这一段路有多难。

constructor(x=0, y=0, z=0) {this.x = x; this.y = y; this.z = z;}

因为这是一个“真正的3D”游戏，所以有一个 3D vector class 非常有用，它也能减少代码量。这个 class 只包含这个游戏必需的基本元素，一个带有加法和乘法函数的 constructor 可以接受标量或向量参数。为了确定标量是否被传入，我们只需检查它是否小于一个大数。更正确的方法是使用 isNan 或者检查它的类型是否是 Vec3，但是这需要更多的存储。

我们将使用这个随机生成器来创建各种程序，且不需要保存任何数据。例如，山脉、岩石和树木的变化不用存到内存。在这种情况下，目标不是减少内存，而是去除存储和检索数据所需的代码。

R函数就像个魔术师，因为它生成随机数，通过取当前随机数种子的正弦，乘以一个大数字，然后看分数部分来实现的。其实有很多方法可以做到，但这是最小的方法之一，而且对我们来说也是足够随机。

onmousedown =e=> mousePressed ? mouseDown = 1 : mousePressed = 1;

const maxDifficultySegment = 9e3; // how far until max difficulty

const checkPointDistance = 1e5; // how far between checkpoints

有许多常量在各方面控制着游戏。当代码被 Google Closure 这样的工具缩小时，这些常量将被替换，就像 C++ 中的 #define 一样，把它们放在第一位会加快游戏微调的过程。

我将 JavaScript 封装在一个 onload 调用，得到了一个更小的最终版本… 但是，在开发过程中，我不喜欢用这个压缩设置，因为代码存储在一个字符串中，所以编辑器不能正确地高亮显示语法。

其实我的游戏很少使用 html ，因为它主要用到的是 JavaScript 。但这是创建全屏画布 Canvas ，也能将画布 Canvas 设为窗口内部大小的代码最小方法。我不知道为什么在 CodePen 上有必要添加 overflow:hiddento the body，当直接打开时按理说也可以运行。

无论哪种方式，策略都是一样的：尽最大可能重复代码，然后用压缩工具压缩。最好的例子是 c.width，c.height和 Math。因此，在阅读这段代码时，请记住，你经常会看到我不断重复一些东西，最终目的就是为了压缩。

用户可以通过 Google Closure Compiler 官网在线跑代码。不幸的是，Closure Compiler 做了一些没有帮助的事情，比如替换模板字符串、默认参数和其他帮助节省空间的ES6特性。所以我需要手动撤销其中一些事情，并执行一些更“危险”的压缩技术来挤出最后一个字节空间。在压缩方面，这不算很成功，大部分挤出的空间来自代码本身的结构优化。

为了帮助压缩代码，我使用了 Google Closure Compiler，它删除了所有空格，将变量重命名为1个字母字符，并进行了一些轻量级优化。

做完这个游戏后，Frank 将包含了游戏的全部 JavaScript 代码都发布在他的个人博客上三国弓箭手守塔单机游戏，其中用到的软件主要也是免费或开源软件的。游戏代码发布在CodePen，可以在 iframe 中试玩，有兴趣的朋友可以去看看。

于是 Frank 和他的朋友们决定做一个压缩后只有 2KB 的 3D 赛车游戏。2KB 到底有多小呢？提供一个参考，一个3.5英寸软盘可以容纳700多个这样的游戏。

在此期间，他们受到三重因素的启发。一是赛车游戏，包括怀旧向的80年代赛车游戏，他们在非常早期的硬件上推动实时 3D 图形，所以作者沿用了相同的技术，用纯 JavaScript 从头开始实现做 3D 图形和物理引擎；还有一些现代赛车游戏带来了视觉设计的灵感，比如《Distance》和《Lonely Mountains: Downhill》；二是之前 Jake Gordon 用 JavaScript 创建一个虚拟3D赛车的项目，并分享了代码；三是 Chris Glover 曾经做过一款小到只有 1KB 的 JS1k 赛车游戏《Moto1kross by Chris Glover》。

Frank Force 也是其中一位，但他还有另一层身份——一位德克萨斯州奥斯汀的独立游戏设计师。Frank Force 在游戏行业工作了20年，参与过9款主流游戏、47个独立游戏的设计。在听到这个消息后，他马上和其他开发朋友讨论了这个问题，并决定做点什么为此纪念。

网页游戏如何开发网页游戏类型有哪些？

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

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

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

专题： 三国塔单机游戏   三国9单机游戏   最三国单机游戏