个月前，JS1k游戏制作节（JS1K game jam）传出不再举办消息后，许多游戏迷开始哀嚎。

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

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

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

他给这个游戏取名 Hue Jumper。关于名字的由来，Frank 表示，游戏的核心操作是移动。当玩家通过一个关卡时，游戏世界就会换一个颜色色调。“在我想象中，每通过过一个关卡，玩家都会跳转到另一个维度，有着完全不同的色调。”

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

以下是原博内容，AI源创评论进行了不改变原意的编译：

确定最高目标

因为严格的大小限制，我需要非常仔细对待我的程序。我的总体策略是尽可能保持一切简单，为最终目标服务。

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

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

代码需要压缩到2KB。如果不是非要这么做不可，有一个类似的但功能没那么强的工具叫做 RegPack 。

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

HTML

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

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

常量

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

// draw settings

const context = c.getContext`2d`; // canvas context

const drawDistance = 800; // how far ahead to draw

const cameraDepth = 1; // FOV of camera

const segmentLength = 100; // length of each road segment

const roadWidth = 500; // how wide is road

const curbWidth = 150; // with of warning track

const dashLineWidth = 9; // width of the dashed line

const maxPlayerX = 2e3; // limit player offset

const mountainCount = 30; // how many mountains are there

const timeDelta = 1/60; // inverse frame rate

const PI = Math.PI; // shorthand for Math.PI

// player settings

const height = 150; // high of player above ground

const maxSpeed = 300; // limit max player speed

const playerAccel = 1; // player forward acceleration

const playerBrake = -3; // player breaking acceleration

const turnControl = .2; // player turning rate

const jumpAccel = 25; // z speed added for jump

const springConstant = .01; // spring players pitch

const collisionSlow = .1; // slow down from collisions

const pitchLerp = .1; // rate camera pitch changes

const pitchSpringDamp = .9; // dampen the pitch spring

const elasticity = 1.2; // bounce elasticity

const centrifugal = .002; // how much turns pull player

const forwardDamp = .999; // dampen player z speed

const lateralDamp = .7; // dampen player x speed

const offRoadDamp = .98; // more damping when off road

const gravity = -1; // gravity to apply in y axis

const cameraTurnScale = 2; // how much to rotate camera

const worldRotateScale = .00005; // how much to rotate world

// level settings

const maxTime = 20; // time to start

const checkPointTime = 10; // add time at checkpoints

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

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

const roadEnd = 1e4; // how far until end of road

鼠标控制

鼠标是唯一的输入系统。通过这段代码，我们可以跟踪鼠标点击和光标位置，位置显示为-1到1之间的值。

双击是通过 mouseUpFrames 实现的。mousePressed 变量只在玩家第一次点击开始游戏时使用这么一次。

mouseDown =

mousePressed =

mouseUpFrames =

mouseX = 0;

onmouseup =e=> mouseDown = 0;

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

onmousemove =e=> mouseX = e.x/window.innerWidth*2 - 1;

数学函数

这个游戏使用了一些函数来简化代码和减少重复，一些标准的数学函数用于 Clamp 和 Lerp 值。 ClampAngle 是有用的，因为它在 -PI 和 PI 之间 wrap angles，在许多游戏中已经广泛应用。

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

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

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

Clamp =(v, a, b) => Math.min(Math.max(v, a), b);

ClampAngle=(a) => (a+PI) % (2*PI) + (a+PILerp =(p, a, b) => a + Clamp(p, 0, 1) * (b-a);

R =(a=1, b=0) => Lerp((Math.sin(++randSeed)+1)*1e5%1,a,b);

class Vec3 // 3d vector class

{

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

Add=(v)=>(

v = v new Vec3( this.x + v.x, this.y + v.y, this.z + v.z ));

Multiply=(v)=>(

v = v new Vec3( this.x * v.x, this.y * v.y, this.z * v.z ));

}

Render Functions渲染函数

LSHA 通过模板字符串生成一组标准的 HSLA （色调、饱和度、亮度、alpha）颜色，并且刚刚被重新排序，所以更常用的 component 排在第一位。每过一关换一个整体色调也是通过这设置的。

DrawPoly 绘制一个梯形形状，用于渲染场景中的一切。使用 |0 将 Ycomponent 转换为整数，以确保每段多边形道路都能无缝连接，不然路段之间就会有一条细线。

DrawText 则用于显示时间、距离和游戏标题等文本渲染。

LSHA=(l,s=0,h=0,a=1)=>`hsl(${h+hueShift},${s}%,${l}%,${a})`;

// draw a trapazoid shaped poly

DrawPoly=(x1, y1, w1, x2, y2, w2, fillStyle)=>

{

context.beginPath(context.fillStyle = fillStyle);

context.lineTo(x1-w1, y1|0);

context.lineTo(x1+w1, y1|0);

context.lineTo(x2+w2, y2|0);

context.lineTo(x2-w2, y2|0);

context.fill;

}

// draw outlined hud text

DrawText=(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

}

设计轨道

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

atan2 函数可以用来计算道路俯仰角，据此来设计物理运动和光线。

roadGenLengthMax = // end of section

roadGenLength = // distance left

roadGenTaper = // length of taper

roadGenFreqX = // X wave frequency

roadGenFreqY = // Y wave frequency

roadGenScaleX = // X wave amplitude

roadGenScaleY = 0; // Y wave amplitude

roadGenWidth = roadWidth; // starting road width

startRandSeed = randSeed = Date.now; // set random seed

road = ; // clear road

// generate the road

for( i = 0; i {

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

{

// calculate difficulty percent

d = Math.min(1, i/maxDifficultySegment);

// randomize road settings

roadGenWidth = roadWidth*R(1-d*.7,3-2*d); // road width

roadGenFreqX = R(Lerp(d,.01,.02)); // X curves

roadGenFreqY = R(Lerp(d,.01,.03)); // Y bumps

roadGenScaleX = i>roadEnd ? 0 : R(Lerp(d,.2,.6));// X scale

roadGenScaleY = R(Lerp(d,1e3,2e3)); // Y scale

// apply taper and move back

roadGenTaper = R(99, 1e3)|0; // random taper

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

roadGenLength = 0; // reset length

i -= roadGenTaper; // subtract taper

}

// make a wavy road

x = Math.sin(i*roadGenFreqX) * roadGenScaleX;

y = Math.sin(i*roadGenFreqY) * roadGenScaleY;

road[i] = road[i]? road[i] : {x:x, y:y, w:roadGenWidth};

// apply taper from last section and lerp values

p = Clamp(roadGenLength / roadGenTaper, 0, 1);

road[i].x = Lerp(p, road[i].x, x);

road[i].y = Lerp(p, road[i].y, y);

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

// calculate road pitch angle

road[i].a = road[i-1] ?

Math.atan2(road[i-1].y-road[i].y, segmentLength) : 0;

}

启动游戏

现在跑道就绪，我们只需要预置一些变量就可以开始游戏了。

// reset everything

velocity = new Vec3

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

position = new Vec3(0, height); // set player start pos

nextCheckPoint = checkPointDistance; // init next checkpoint

time = maxTime; // set the start time

heading = randSeed; // random world heading

更新玩家

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

首先，我们需要得到一些玩家所在位置的道路信息。为了使物理和渲染感觉平滑，需要在当前和下一个路段之间插入一些数值。

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

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

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

Update==>

{

// get player road segment

s = position.z / segmentLength | 0; // current road segment

p = position.z / segmentLength % 1; // percent along segment

// get lerped values between last and current road segment

roadX = 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);

// update player velocity

lastVelocity = velocity.Add(0);

velocity.y += gravity;

velocity.x *= lateralDamp;

velocity.z = Math.max(0, time?forwardDamp*velocity.z:0);

// add velocity to position

position = position.Add(velocity);

// limit player x position (how far off road)

position.x = Clamp(position.x, -maxPlayerX, maxPlayerX);

// check if on ground

if (position.y {

position.y = roadY; // match y to ground plane

airFrame = 0; // reset air frames

// get the dot product of the ground normal and the velocity

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

// bounce velocity against ground normal

velocity = new Vec3(0, Math.cos(roadA), Math.sin(roadA))

.Multiply(-elasticity * dp).Add(velocity);

// apply player brake and accel

velocity.z +=

mouseDown? playerBrake :

Lerp(velocity.z/maxSpeed, mousePressed*playerAccel, 0);

// check if off road

if (Math.abs(position.x) > road[s].w)

{

velocity.z *= offRoadDamp; // slow down

pitchSpring += Math.sin(position.z/99)**4/99; // rumble

}

}

// update player turning and apply centrifugal force

turn = Lerp(velocity.z/maxSpeed, mouseX * turnControl, 0);

velocity.x +=

velocity.z * turn -

velocity.z ** 2 * centrifugal * roadX;

// update jump

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

velocity.y += jumpAccel; // apply jump velocity

airFrame = 9; // prevent jumping again

}

mouseUpFrames = mouseDown? 0 : mouseUpFrames+1;

// pitch down with vertical velocity when in air

airPercent = (position.y-roadY) / 99;

pitchSpringSpeed += Lerp(airPercent, 0, velocity.y/4e4);

// update player pitch spring

pitchSpringSpeed += (velocity.z - lastVelocity.z)/2e3;

pitchSpringSpeed -= pitchSpring * springConstant;

pitchSpringSpeed *= pitchSpringDamp;

pitchSpring += pitchSpringSpeed;

pitchRoad = Lerp(pitchLerp, pitchRoad, Lerp(airPercent,-roadA,0));

playerPitch = pitchSpring + pitchRoad;

// update heading

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

cameraHeading = turn * cameraTurnScale;

// was checkpoint crossed?

if (position.z > nextCheckPoint)

{

time += checkPointTime; // add more time

nextCheckPoint += checkPointDistance; // set next checkpoint

hueShift += 36; // shift hue

}

预渲染

在渲染之前，canvas 每当高度或宽度被重设时，画布内容就会被清空。这也适用于自适应窗口的画布。

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

// clear the screen and set size

c.width = window.innerWidth, c.height = window.innerHeight;

// calculate projection scale, flip y

projectScale = (new Vec3(1,-1,1)).Multiply(c.width/2/cameraDepth);

给世界画上天空、太阳和月亮

空气背景是用全屏的 linear gradient （径向渐变）绘制的，它还会根据太阳的位置改变颜色。

为了节省存储空间，太阳和月亮在同一个循环中，使用了一个带有透明度的全屏 radial gradient（线性渐变)。

线性和径向渐变相结合，形成一个完全包围场景的天空背景。

// get horizon, offset, and light amount

horizon = c.height/2 - Math.tan(playerPitch)*projectScale.y;

backgroundOffset = Math.sin(cameraHeading)/2;

light = Math.cos(heading);

// create linear gradient for sky

g = context.createLinearGradient(0,horizon-c.height/2,0,horizon);

g.addColorStop(0,LSHA(39+light*25,49+light*19,230-light*19));

g.addColorStop(1,LSHA(5,79,250-light*9));

// draw sky as full screen poly

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

// draw sun and moon (0=sun, 1=moon)

for( i = 2 ; i--; )

{

// create radial gradient

g = context.createRadialGradient(

x = c.width*(.5+Lerp(

(heading/PI/2+.5+i/2)%1,

4, -4)-backgroundOffset),

y = horizon - c.width/5,

c.width/25,

x, y, i?c.width/23:c.width);

g.addColorStop(0, LSHA(i?70:99));

g.addColorStop(1, LSHA(0,0,0,0));

// draw full screen poly

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

}

给世界画上山峰、地平线

山脉是通过在地平线上画50个三角形，然后根据程序自己生成的。

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

背景的最后一部分是绘制地平线，再用纯绿填充画布的底部。

// set random seed for mountains

randSeed = startRandSeed;

// draw mountains

for( i = mountainCount; i--; )

{

angle = ClampAngle(heading+R(19));

light = Math.cos(angle-heading);

DrawPoly(

x = c.width*(.5+Lerp(angle/PI/2+.5,4,-4)-backgroundOffset),

y = horizon,

w = R(.2,.8)**2*c.width/2,

x + w*R(-.5,.5),

y - R(.5,.8)*w, 0,

LSHA(R(15,25)+i/3-light*9, i/2+R(19), R(220,230)));

}

// draw horizon

DrawPoly(

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

LSHA(25, 30, 95));

将路段投影到画布空间

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

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

for( x = w = i = 0; i {

p = new Vec3(x+=w+=road[s+i].x, // sum local road offsets

road[s+i].y, (s+i)*segmentLength) // road y and z pos

.Add(position.Multiply(-1)); // get local camera space

// apply camera heading

p.x = p.x*Math.cos(cameraHeading) - p.z*Math.sin(cameraHeading);

// tilt camera pitch and invert z

z = 1/(p.z*Math.cos(playerPitch) - p.y*Math.sin(playerPitch));

p.y = p.y*Math.cos(playerPitch) - p.z*Math.sin(playerPitch);

p.z = z;

// project road segment to canvas space

road[s+i++].p = // projected road point

p.Multiply(new Vec3(z, z, 1)) // projection

.Multiply(projectScale) // scale

.Add(new Vec3(c.width/2,c.height/2)); // center on canvas

}

绘制路段

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

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

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

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

for( i = drawDistance; i--; ) // iterate in reverse

{

// get projected road points

segment1 = road[s+i];

p1 = segment1.p;

p2 = segment2.p;

// random seed and lighting

randSeed = startRandSeed + s + i;

light = Math.sin(segment1.a) * Math.cos(heading) * 99;

// check near and far clip

if (p1.z 0)

{

// fade in road resolution over distance

if (i % (Lerp(i/drawDistance,1,9)|0) == 0)

{

// ground

DrawPoly(c.width/2, p1.y, c.width/2,

c.width/2, p2.y, c.width/2,

LSHA(25 + light, 30, 95));

// curb if wide enough

if (segment1.w > 400)

DrawPoly(p1.x, p1.y, p1.z*(segment1.w+curbWidth),

p2.x, p2.y, p2.z*(segment2.w+curbWidth),

LSHA(((s+i)%19

// road and checkpoint marker

DrawPoly(p1.x, p1.y, p1.z*segment1.w,

p2.x, p2.y, p2.z*segment2.w,

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

// dashed lines if wide and close enough

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

p2.x, p2.y, p2.z*dashLineWidth,

LSHA(70 + light));

// save this segment

segment2 = segment1;

}

绘制路边的树和石头

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

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

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

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

if (R
{
// player object collision check
x = 2*roadWidth * R(10,-10) * R(9); // choose object pos
const objectHeight = (R(2)|0) * 400; // choose tree or rock
if (!segment1.h // dont hit same object
&& Math.abs(position.x-x) && Math.abs(position.z-(s+i)*segmentLength) && position.y-height {
// slow player and mark object as hit
velocity = velocity.Multiply(segment1.h = collisionSlow);
}

// draw road object
const alpha = Lerp(i/drawDistance, 4, 0); // fade in object
if (objectHeight)
{
// tree trunk
DrawPoly(x = p1.x+p1.z * x, p1.y, p1.z*29,
x, p1.y-99*p1.z, p1.z*29,
LSHA(5+R(9), 50+R(9), 29+R(9), alpha));

// tree leaves
DrawPoly(x, p1.y-R(50,99)*p1.z, p1.z*R(199,250),
x, p1.y-R(600,800)*p1.z, 0,
LSHA(25+R(9), 80+R(9), 9+R(29), alpha));
}
else
{
// rock
DrawPoly(x = p1.x+p1.z*x, p1.y, p1.z*R(200,250),
x+p1.z*(R(99,-99)), p1.y-R(200,250)*p1.z, p1.z*R(99),
LSHA(50+R(19), 25+R(19), 209+R(9), alpha));
}
}
}
}

画上 HUD，更新时间，请求下一次更新

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

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

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

if (mousePressed)

{

time = Clamp(time - timeDelta, 0, maxTime); // update time

DrawText(Math.ceil(time), 9); // show time

context.textAlign = 'right'; // right alignment

DrawText(0|position.z/1e3, c.width-9); // show distance

}

else

{

context.textAlign = 'center'; // center alignment

DrawText('HUE JUMPER', c.width/2); // draw title text

}

requestAnimationFrame(Update); // kick off next frame

} // end of update function

代码的最后一位

HTML 需要一个结束脚本标签来让所有的代码能够跑起来。

Update; // kick off update loop

压缩

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

警告 Caveats

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

游戏代码被我放到了 GitHub 上的 GPL-3.0 下（https://github.com/KilledByAPixel/HueJumper2k），所以你可以在自己的项目中自由使用它。该库中还包含 2KB 版本的游戏，准确说是2031字节！欢迎你添加一些其他的功能，比如音乐和音效到“增强”版本中。

后记

雷锋网

建Web游戏

今天小编教大家如何用Python编程语言创建Web游戏，如果你能完成，你就可以算是一个能力相当不错的Python初学者了。虽然还需要多读一些书，多写一些程序，不过你已经具备进一步学习的功底了。接下来的学习就只是时间、动力及资源的问题了。

在这个习题中，我们不会去创建一个完整的游戏，相反，我们会为习题42中的游戏创建一个“引擎”（engine），让这个游戏能够在浏览器中运行起来。这会涉及重构习题42中的游戏，混合习题47中的结构，添加自动测试代码，最后创建一个可以运行这个游戏的Web引擎。

这是一个很庞大的习题。预计你要花一周到一个月才能完成。最好的方法是一点一点来，每晚完成一点，在进行下一步之前确认上一步已经正确完成。

重构习题43中的游戏

你已经在两个习题中修改了gothonweb项目，这个习题中会再修改一次。你学习的这种修改的技术叫做“重构”，或者用我喜欢的讲法来说，叫“修理”。重构是一个编程术语，它指的是清理旧代码或者为旧代码添加新功能的过程。你其实已经做过这样的事情了，只不过不知道这个术语而已。重构是软件开发中经历的最习以为常的事情。

在这个习题中你要做的是将习题47中的可以测试的房间地图和习题43中的游戏这两样东西合并到一起，创建一个新的游戏结构。游戏的内容不会发生变化，只不过我们会通过“重构”让它有一个更好的结构而已。

第一步是将ex47/game.py的内容复制到gothonweb/map.py中，然后将tests/ex47_tests.py的内容复制到tests/map_tests.py中，然后再次运行nosetests，确认它们还能正常工作。

注意

从现在开始，我不会再展示运行测试的输出了，我假设你会回去运行这些测试，而且知道什么样的输出是正确的。

将习题47的代码复制完毕后，就该开始重构它，让它包含习题43中的地图。我一开始会把基本结构为你准备好，然后你需要去完成map.py和map_tests.py里边的内容。

首先要做的是用Room这个类来构建地图的基本结构。

map.py

1  class Room(object):
2  
3      def __init__(self, name, description):
4          self.name = name
5          self.description = description
6          self.paths = []
7  
8      def go(self, direction):
9           return self.paths.get(direction, None)
10  
11      def add_paths(self, paths):
12           self.paths.update(paths)
13  
14  
15  central_corridor = Room("Central Corridor",
16  """
17  The Gothons of Planet Percal #25 have invaded your ship and destroyed
18  your entire crew.  You are the last surviving member and your last
19  mission is to get the neutron destruct bomb from the Weapons Armory,
20  put it in the bridge, and blow the ship up after getting into an 
21  escape pod.
22  
23  You're running down the central corridor to the Weapons Armory when
24  a Gothon jumps out, red scaly skin, dark grimy teeth, and evil clown costume
25  flowing around his hate filled body.  He's blocking the door to the
26  Armory and about to pull a weapon to blast you.
27  """)
28  
29  
30  laser_weapon_armory = Room("Laser Weapon Armory",
31  """
32  Lucky for you they made you learn Gothon insults in the academy.
33  You tell the one Gothon joke you know:
34  Lbhe zbgure vf fb sng, jura fur fvgf nebhaq gur ubhfr, fur fvgf nebhaq gur ubhfr.
35  The Gothon stops, tries not to laugh, then busts out laughing and can't move.
36  While he's laughing you run up and shoot him square in the head
37  putting him down, then jump through the Weapon Armory door.
38  
39  You do a dive roll into the Weapon Armory, crouch and scan the room
40  for more Gothons that might be hiding.  It's dead quiet, too quiet.
41  You stand up and run to the far side of the room and find the
42  neutron bomb in its container.  There's a keypad lock on the box
43  and you need the code to get the bomb out.  If you get the code
44  wrong 10 times then the lock closes forever and you can't
45  get the bomb.  The code is 3 digits.
46  """)
47  
48  
49  the_bridge = Room("The Bridge",
50  """
51  The container clicks open and the seal breaks, letting gas out.
52  You grab the neutron bomb and run as fast as you can to the
53  bridge where you must place it in the right spot.
54  
55  You burst onto the Bridge with the netron destruct bomb
56  under your arm and surprise 5 Gothons who are trying to
57  take control of the ship.  Each of them has an even uglier
58  clown costume than the last.  They haven't pulled their
59  weapons out yet, as they see the active bomb under your
60  arm and don't want to set it off.
61  """)
62  
63  
64  escape_pod = Room("Escape Pod",
65  """
66  You point your blaster at the bomb under your arm
67  and the Gothons put their hands up and start to sweat.
68  You inch backward to the door, open it, and then carefully
69  place the bomb on the floor, pointing your blaster at it.
70  You then jump back through the door, punch the close button
71  and blast the lock so the Gothons can't get out.
72  Now that the bomb is placed you run to the escape pod to
73  get off this tin can.
74  
75  You rush through the ship desperately trying to make it to
76  the escape pod before the whole ship explodes.  It seems like
77  hardly any Gothons are on the ship, so your run is clear of
78  interference.  You get to the chamber with the escape pods, and
79  now need to pick one to take.  Some of them could be damaged
80  but you don't have time to look.  There's 5 pods, which one
81  do you take?
82  """)
83  
84  
85  the_end_winner = Room("The End",
86  """
87  You jump into pod 2 and hit the eject button.
88  The pod easily slides out into space heading to
89  the planet below.  As it flies to the planet, you look
90  back and see your ship implode then explode like a
91  bright star, taking out the Gothon ship at the same
92  time.  You won!
93  """)
94  
95  
96  the_end_loser = Room("The End",
97  """
98  You jump into a random pod and hit the eject button.
99  The pod escapes out into the void of space, then
100  implodes as the hull ruptures, crushing your body
101  into jam jelly.
102  """
103  )
104  
105  escape_pod.add_paths({
106      '2': the_end_winner,
107      '*': the_end_loser
108  })
109  
110  generic_death = Room("death", "You died.")
111  
112  the_bridge.add_paths({
113      'throw the bomb': generic_death,
114      'slowly place the bomb': escape_pod
115  })
116  
117  laser_weapon_armory.add_paths({
118      '0132': the_bridge,
119      '*': generic_death
120  })
121  
122  central_corridor.add_paths({
123      'shoot!': generic_death,
124      'dodge!': generic_death,
125      'tell a joke': laser_weapon_armory
126  })
127  
128  START = central_corridor

你会发现Room类和地图有一些问题。

1．我们必须把以前放在if-else结构中的房间描述做成每个房间的一部分。这样房间的次序就不会被打乱了，这对我们的游戏是一件好事。这是你后面要修改的东西。

2．原版游戏中我们使用了专门的代码来生成一些内容，如炸弹的激活键码、舰舱的选择等，这次我们做游戏时就先使用默认值好了，不过后面的附加练习里，我会要求你把这些功能再加到游戏中。

3．我为游戏中所有错误决策的失败结尾写了一个generic_death，你需要去补全这个函数。你需要把原版游戏中所有的场景结局都加进去，并确保代码能正确运行。

4．我添加了一种新的转换模式，以"*"为标记，用来在游戏引擎中实现“捕获所有操作”的功能。

等把上面的代码基本写好以后，接下来就是你必须继续写的自动测试tests/map_test.py了。

map_tests.py

1  from nose.tools import *
2  from gothonweb.map import *
3  
4  def test_room():
5       gold = Room("GoldRoom", 
6                      """This room has gold in it you can grab. There's a
7                      door to the north.""")
8       assert_equal(gold.name, "GoldRoom")
9       assert_equal(gold.paths, {})
10  
11  def test_room_paths():
12      center = Room("Center", "Test room in the center.")
13      north = Room("North", "Test room in the north.")
14      south = Room("South", "Test room in the south.")
15  
16      center.add_paths({'north': north, 'south': south})
17      assert_equal(center.go('north'), north)
18      assert_equal(center.go('south'), south)
19  
20  def test_map():
21      start = Room("Start", "You can go west and down a hole.")
22      west = Room("Trees", "There are trees here, you can go east.")
23      down = Room("Dungeon", "It's dark down here, you can go up.")
24  
25      start.add_paths({'west': west, 'down': down})
26      west.add_paths({'east': start})
27      down.add_paths({'up': start})
28  
29      assert_equal(start.go('west'), west)
30      assert_equal(start.go('west').go('east'), start)
31      assert_equal(start.go('down').go('up'), start)
32  
33  def test_gothon_game_map():
34      assert_equal(START.go('shoot!'), generic_death)
35      assert_equal(START.go('dodge!'), generic_death)
36  
37      room = START.go('tell a joke')
38      assert_equal(room, laser_weapon_armory)

你在这个习题中的任务是完成地图，并且让自动测试可以完整地检查整个地图。这包括将所有的generic_death对象修正为游戏中实际的失败结尾。让你的代码成功运行起来，并让你的测试越全面越好。后面我们会对地图做一些修改，到时候这些测试将用来确保修改后的代码还可以正常工作。

会话和用户跟踪

在Web应用程序运行的某个位置，你需要追踪一些信息，并将这些信息和用户的浏览器关联起来。在HTTP协议的框架中，Web环境是“无状态”的，这意味着你的每一次请求和你的其他请求都是相互独立的。如果你请求了页面A，输入了一些数据，然后点了一个页面B的链接，那你发送给页面A的数据就全部消失了。

解决这个问题的方法是为Web应用程序建立一个很小的数据存储，给每个浏览器进程赋予一个独一无二的数字，用来跟踪浏览器所做的事情。这个存储通常用数据库或者存储在磁盘上的文件来实现。在lpthw.web这个小框架中实现这样的功能是很容易的，下面就是一个这样的例子。

session.sample.py

1  import web
2  
3  web.config.debug = False
4  
5  urls = (
6        "/count", "count",
7        "/reset", "reset"
8  )
9  app = web.application(urls, locals())
10  store = web.session.DiskStore('sessions')
11  session = web.session.Session(app, store, initializer=['count': 0])
12  
13  class count:
14       def GET(self):
15            session.count += 1
16            return str(session.count)
17  
18  class reset:
19       def GET(self):
20            session.kill()
21            return ""
22  
23  if __name__ == "__main__":
24      app.run()

为了实现这个功能，需要创建一个sessions/文件夹作为程序的会话存储位置，创建好以后运行这个程序，然后检查/count页面，刷新一下这个页面，看计数会不会累加上去。关掉浏览器后，程序就会“忘掉”之前的位置，这也是我们的游戏所需的功能。有一种方法可以让浏览器永远记住一些信息，不过这会让测试和开发变得更难。如果你回到/reset页面，然后再访问/count页面，你可以看到你的计数器被重置了，因为你已经关掉了这个会话。

你需要花点时间弄懂这段代码，注意会话开始时count的值是如何设为0的，另外再看看sessions/下面的文件，看能不能打开。下面是我打开一个Python会话并解码的过程：

>>> import pickle
>>> import base64
>>> base64.b64decode(open("sessions/XXXXX").read())
"(dp1\nS'count'\np2\nI1\nsS'ip'\np3\nV127.0.0.1\np4\nsS'session_id'\np5\nS'XXXX'\np6\ns."
>>>
>>> x = base64.b64decode(open("sessions/XXXXX").read())
>>>
>>> pickle.loads(x)
{'count': 1, 'ip': u'127.0.0.1', 'session_id': 'XXXXX'}

所以，会话其实就是使用pickle和base64这些库写到磁盘上的字典。存储和管理会话的方法很多，大概和Python的Web框架那么多，所以了解它们的工作原理并不是很重要。当然如果你需要调试或者清空会话，知道点儿原理还是有用的。

创建引擎

你应该已经写好了游戏地图和它的单元测试代码。现在要你制作一个简单的游戏引擎，用来让游戏中的各个房间运转起来，从玩家收集输入，并且记住玩家所在的位置。我们将用到你刚学过的会话来制作一个简单的引擎，让它可以：

1．为新用户启动新的游戏；

2．将房间展示给用户；

3．接收用户的输入；

4．在游戏中处理用户的输入；

5．显示游戏的结果，继续游戏，直到玩家角色死亡为止。

为了创建这个引擎，你需要将bin/app.py搬过来，创建一个功能完备的、基于会话的游戏引擎。这里的难点是，我会先使用基本的HTML文件创建一个非常简单的版本，接下来将由你完成它。基本的引擎是下面这个样子的：

app.py

1  import web
2  from gothonweb import map
3  
4  urls = (
5      '/game', 'GameEngine',
6      '/', 'Index',
7  )
8  
9  app = web.application(urls, globals())
10  
11  # little hack so that debug mode works with sessions
12  if web.config.get('_session') is None:
13        store = web.session.DiskStore('sessions')
14        session = web.session.Session(app, store,
15                                            initializer=['room': None])
16      web.config._session = session
17  else:
18       session = web.config._session
19  
20  render = web.template.render('templates/', base="layout")
21  
22  
23  class Index(object):
24       def GET(self):
25          # this is used to "setup" the session with starting values
26          session.room = map.START
27          web.seeother("/game")
28  
29  
30  class GameEngine(object):
31  
32      def GET(self):
33           if session.room:
34                return render.show_room(room=session.room)
35           else:
36              # why is there here? do you need it?
37              return render.you_died()
38  
39      def POST(self):
40           form = web.input(action=None)
41  
42          # there is a bug here, can you fix it?
43          if session.room and form.action:
44               session.room = session.room.go(form.action)
45  
46          web.seeother("/game")
47  
48  if __name__ == "__main__":
49      app.run()

在这个脚本里你可以看到更多的新东西，不过了不起的事情是，整个基于网页的游戏引擎只要一个小文件就可以做到了。这段脚本里最有技术含量的就是将会话带回来的那几行，这对于调试模式下的代码重载是必需的，否则每次刷新网页，会话就会消失，游戏也不会再继续了。

在运行bin/app.py之前，你需要修改PYTHONPATH环境变量。不知道什么是环境变量？要运行一个最基本的Python程序，你就得学会环境变量，用Python的人就喜欢这样：

在终端输入下面的内容：

export PYTHONPATH=$PYTHONPATH:.

如果用的是Windows，那就在PowerShell中输入以下内容：

$env:PYTHONPATH = "$env:PYTHONPATH;."

你只要针对每一个shell会话输入一次就可以了，不过如果你运行Python代码时看到了导入错误，那就需要去执行一下上面的命令，或者是因为你上次执行的有错才导致导入错误的。

接下来需要删掉templates/hello_form.html和templates/index.html，然后重新创建上面代码中提到的两个模板。下面是一个非常简单的templates/show_room.html，供你参考。

show_room.html

$def with (room)

<h1> $room.name </h1>

<pre>
$room.description
</pre>

$if room.name == "death":
    <p><a href="/">Play Again?</a></p>
$else:
    <p>
    <form action="/game" method="POST">
        - <input type="text" name="action"> <input type="SUBMIT">
    </form>
    </p>

这就用来显示游戏中的房间的模板。接下来，你需要在用户跑到地图的边界时，用一个模板告诉用户，他的角色的死亡信息，也就是templates/you_died.html这个模板。

you_died.html

<h1>You Died!</h1>

<p>Looks like you bit the dust.</p>
<p><a href="/">Play Again</a></p>

准备好这些文件就可以做下面的事情了。

1．再次运行测试代码tests/app_tests.py，这样就可以测试这个游戏。由于会话的存在，你可能顶多只能实现几次点击，不过你应该可以做出一些基本的测试来。

2．删除sessions/*下的文件，再重新运行一遍游戏，确认游戏是从一开始运行的。

3． 运行python bin/app.py脚本，试玩一下你的游戏。

你需要和往常一样刷新和修正你的游戏，慢慢修改游戏的HTML文件和引擎，直到实现游戏需要的所有功能为止。

期末考试

你有没有觉得我一下子给了你超多的信息呢？那就对了，我想要你在学习技能的同时有一些可以用来鼓捣的东西。为了完成这个习题，我将给你最后一套需要你自己完成的练习。你会注意到，到目前为止你写的游戏并不是很好，这只是你的第一版代码而已，你现在的任务就是让游戏更加完善，实现下面的这些功能。

1．修正代码中所有我提到和没提到的bug，如果你发现了新bug，你可以告诉我。

2．改进所有的自动测试，以便可以测试更多的内容，直到你可以不用浏览器就能测到所有的内容为止。

3．让HTML页面看上去更美观一些。

4．研究一下网页登录系统，为这个程序创建一个登录界面，这样人们就可以登录这个游戏，并且可以保存游戏高分。

5．完成游戏地图，尽可能地把游戏做大，功能做全。

6．给用户一个“帮助系统”，让他们可以查询每个房间里可以执行哪些命令。

7．为游戏添加新功能，想到什么功能就添加什么功能。

8．创建多个地图，让用户可以选择他们想要玩的一张地图来进行游戏。你的bin/app.py应该可以运行提供给它的任意地图，这样你的引擎就可以支持多个不同的游戏。

9．最后，使用在习题48和习题49中学到的东西创建一个更好的输入处理器。你手头已经有了大部分必要的代码，只需要改进语法，让它和你的输入表单以及游戏引擎挂钩即可。

祝你好运！

常见问题回答

我在游戏中用了会话（`session）`，不能用nosetests测试。

你需要阅读并了解带reloader的会话：http://webpy.org/cookbook/session_with_reloader。

我看到了ImportError。

错误路径，错误Python版本，PYTHONPATH没设置对，漏了__init__.py文件，拼写错误，都检查一下吧。

者 | huangjianke

责编 | 伍杏玲

出品 | CSDN（ID：CSDNnews）

【CSDN 编者按】据微信最新数据，微信小游戏累计注册用户量已突破10亿。那么初学者如何开发一款好玩又烧脑的微信小游戏呢？本文作者将详细为大家讲解。

“启逻辑之高妙，因想象而自由。”层叠拼图Plus是一款需要空间想象力和逻辑推理能力完美结合的微信小游戏，偶消奇不消，在简单的游戏规则下却有着无数种可能性，需要你充分发挥想象力去探索，看似简单却具有极大的挑战性和趣味性，Talk is cheap. Show me the code！

层叠拼图Plus微信小游戏采用JavaScript+Canvas实现，没有使用任何游戏引擎，对于初学者来说，也比较容易入门。下面是小游戏页面：

如何解决Canvas绘图模糊？

Canvas 绘图时，会从两个物理像素的中间位置开始绘制并向两边扩散 0.5 个物理像素。当设备像素比为 1 时，一个 1px 的线条实际上占据了两个物理像素（每个像素实际上只占一半），由于不存在 0.5 个像素，所以这两个像素本来不应该被绘制的部分也被绘制了，于是 1 物理像素的线条变成了 2 物理像素，视觉上就造成了模糊

绘图模糊的原因知道了，在微信小游戏里面又该如何解决呢？

可以看到，我们先通过 wx.getSystemInfoSync.pixelRatio 获取设备的像素比ratio，然后将在屏 Canvas 的宽度和高度按照所获取的像素比ratio进行放大，在绘制文字、图片的时候，坐标点 x、y 和所要绘制图形的 width、height均需要按照像素比 ratio 进行缩放，这样我们就可以清晰的在高清屏中绘制想要的文字、图片。

可参考微信官方缩放策略调整

另外，需要注意的是，这里的 canvas 是由 weapp-adapter 预先调用 wx.createCanvas 创建一个上屏 Canvas，并暴露为一个全局变量 canvas。

如何绘制任意多边形图形？

任意一个多边形图形，是由多个平面坐标点所组成的图形区域。

在游戏画布内，我们以左上角为坐标原点 {x: 0, y: 0} ，一个多边形包含多个单位长度的平面坐标点，如：[{ x: 1, y: 3 }, { x: 5, y: 3 }, { x: 3, y: 5 }] 表示为一个三角形的区域，需要注意的是，x、y 并不是真实的平面坐标值，而是通过屏幕宽度计算出来的单位长度，在画布内的真实坐标值则为 {x: x * itemWidth, y: y * itemWidth} 。

绘制多边形代码实现如下：

使用：

效果如下图：

CanvasRenderingContext2D其他使用方法可参考：CanvasRenderingContext2D API 列表

1 + 1 = 0，「偶消奇不消」的效果如何实现？

1 + 1 = 0，是层叠拼图Plus小游戏玩法的精髓所在。

有经验的同学，也许一眼就发现了，1 + 1 = 0 刚好符合通过异或运算得出的结果。当然，细心的同学也可能已经发现，上文有一句特殊的代码：this.ctx.globalCompositeOperation = 'xor'，也正是通过设置 CanvasContext 的 globalCompositeOperation 属性值为 xor 便实现了「偶消奇不消」的神奇效果。

globalCompositeOperation 是指 在绘制新形状时应用的合成操作的类型，其他效果可参考：globalCompositeOperation 示例

如何判断一个点是否在任意多边形内部？

当回转数为 0 时，点在闭合曲线外部。

讲到这里，我们已经知道如何在Canvas画布内绘制出偶消奇不消效果的层叠图形了，接下来我们来看下玩家如何移动选中的图形。我们发现绘制出的图形对象并没有提供点击事件绑定之类的操作，那又如何判断玩家选中了哪个图形呢？这里我们就需要去实现如何判断玩家触摸事件的x，y坐标在哪个多边形图形内部区域，从而判断出玩家选中的是哪一个多边形图形。

判断一个点是否在任意多边形内部有多种方法，比如：

• 射线法

• 面积判别法

• 叉乘判别法

• 回转数法

• ...

在层叠拼图Plus小游戏内，采用的是回转数法来判断玩家触摸点是否在多边形内部。回转数是拓扑学中的一个基本概念，具有很重要的性质和用途。当然，展开讨论回转数的概念并不在该文的讨论范围内，我们仅需了解一个概念：当回转数为 0 时，点在闭合曲线外部。

图源：http://www.html-js.com/article/1538

上面面这张图动态演示了回转数的概念：图中红色曲线关于点（人所在位置）的回转数为 2。

对于给定的点和多边形，回转数应该怎么计算呢？

• 用线段分别连接点和多边形的全部顶点

图源：http://www.html-js.com/article/1538

• 计算所有点与相邻顶点连线的夹角

图源：http://www.html-js.com/article/1538

• 计算所有夹角和。注意每个夹角都是有方向的，所以有可能是负值

图源：http://www.html-js.com/article/1538

最后根据角度累加值计算回转数。360°（2π）相当于一次回转。

在使用 JavaScript 实现时，需要注意以下问题：

• JavaScript 的数只有 64 位双精度浮点这一种。对于三角函数产生的无理数，浮点数计算不可避免会造成一些误差，因此在最后计算回转数需要做取整操作。

• 通常情况下，平面直角坐标系内一个角的取值范围是 -π 到 π 这个区间，这也是 JavaScript 三角函数 Math.atan2 返回值的范围。但 JavaScript 并不能直接计算任意两条线的夹角，我们只能先计算两条线与 x 正轴夹角，再取两者差值。这个差值的结果就有可能超出 -π 到 π 这个区间，因此我们还需要处理差值超出取值区间的情况。

代码实现：

如何判断游戏结果是否正确？

探索的过程固然精彩，而结果却更令我们期待

通过前面的介绍我们可以知道，判断游戏结果是否正确其实就是比对玩家组合图形的 xor 结果与目标图形的 xor 结果。那么如何求多个多边形 xor 的结果呢？polygon-clipping 正是为此而生的。它不仅支持 xor 操作，还有其他的比如：union, intersection, difference 等操作。在层叠拼图Plus游戏内通过 polygon-clipping 又是怎样实现游戏结果判断的呢？

• 目标图形

多边形平面坐标点集合：

获取 多个多边形 xor 结果：

xor结果：

同理计算出玩家操作图形的xor结果进行比对即可得出答案正确与否。

需要注意的是，获取玩家的 xor 结果并不能直接拿来与目标图形xor 结果进行比较，我们需要将xor 的结果以左上角为参考点将图形平移至原点内，然后再进行比较，如果结果一致，则代表玩家答案正确。

排行榜的展示

有人的地方就有江湖，有江湖的地方就有排行

在看本章节内容之前，建议先浏览一遍排行榜相关的官方文档：好友排行榜、关系链数据，以便对相关内容有个大概的了解。

• 开放数据域

开放数据域是一个封闭、独立的 JavaScript 作用域。要让代码运行在开放数据域，需要在 game.json 中添加配置项 openDataContext 指定开放数据域的代码目录。添加该配置项表示小游戏启用了开放数据域，这将会导致一些限制。

• 在游戏内使用 wx.setUserCloudStorage(obj) 对玩家游戏数据进行托管。

• 在开放数据域内使用 wx.getFriendCloudStorage(obj)拉取当前用户所有同玩好友的托管数据

• 展示关系链数据

如果想要展示通过关系链 API 获取到的用户数据，如绘制排行榜等业务场景，需要将排行榜绘制到 sharedCanvas 上，再在主域将 sharedCanvas 渲染上屏。

sharedCanvas 是主域和开放数据域都可以访问的一个离屏画布。在开放数据域调用 wx.getSharedCanvas 将返回 sharedCanvas。

在主域中可以通过开放数据域实例访问 sharedCanvas，通过 drawImage 方法可以将 sharedCanvas 绘制到上屏画布。

sharedCanvas 本质上也是一个离屏 Canvas，而重设 Canvas 的宽高会清空 Canvas 上的内容。所以要通知开放数据域去重绘 sharedCanvas。

需要注意的是：sharedCanvas 的宽高只能在主域设置，不能在开放数据域中设置。

游戏性能优化

性能优化，简而言之，就是在不影响系统运行正确性的前提下，使之运行地更快，完成特定功能所需的时间更短。

一款能让人心情愉悦的游戏，性能问题必然不能成为绊脚石。那么可以从哪些方面对游戏进行性能优化呢？

离屏 Canvas

在层叠拼图Plus小游戏内，针对需要大量使用且绘图繁复的静态场景，都是使用离屏 Canvas进行绘制的，如首页网格背景、关卡列表、排名列表等。在微信内 wx.createCanvas 首次调用创建的是显示在屏幕上的画布，之后调用创建的都是离屏画布。初始化时将静态场景绘制完备，需要时直接拷贝离屏Canvas的图像即可。Canvas 绘制本身就是不断的更新帧从而达到动画的效果，通过使用离屏 Canvas，就大大减少了一些静态内容在上屏Canvas的绘制，从而提升了绘制性能。

内存优化

玩家在游戏过程中拖动方块的移动其实就是不断更新多边形图形的坐标信息，然后不断的清空画布再重新绘制，可以想象，这个绘制是非常频繁的，按照普通的做法就需要不断去创建多个新的 Block 对象。针对游戏中需要频繁更新的对象，我们可以通过使用对象池的方法进行优化，对象池维护一个装着空闲对象的池子，如果需要对象的时候，不是直接new，而是从对象池中取出，如果对象池中没有空闲对象，则新建一个空闲对象，层叠拼图Plus小游戏内使用的是官方demo内已经实现的对象池类，实现如下：

垃圾回收

小游戏中，JavaScript 中的每一个 Canvas 或 Image 对象都会有一个客户端层的实际纹理储存，实际纹理储存中存放着 Canvas、Image 的真实纹理，通常会占用相当一部分内存。

每个客户端实际纹理储存的回收时机依赖于 JavaScript 中的 Canvas、Image 对象回收。在 JavaScript 的 Canvas、Image 对象被回收之前，客户端对应的实际纹理储存不会被回收。通过调用 wx.triggerGC 方法，可以加快触发 JavaScriptCore Garbage Collection（垃圾回收），从而触发 JavaScript 中没有引用的 Canvas、Image 回收，释放对应的实际纹理储存。

但 GC 具体触发时机还要取决于 JavaScriptCore 自身机制，并不能保证调用 wx.triggerGC 能马上触发回收，层叠拼图Plus小游戏在每局游戏开始或结束都会触发一下，及时回收内存垃圾，以保证最良好的游戏体验。

多线程 Worker

对于游戏来说，每帧 16ms 是极其宝贵的，如果有一些可以异步处理的任务，可以放置于 Worker 中运行，待运行结束后，再把结果返回到主线程。Worker 运行于一个单独的全局上下文与线程中，不能直接调用主线程的方法，Worker 也不具备渲染的能力。Worker与主线程之间的数据传输，双方使用 Worker.postMessage 来发送数据，Worker.onMessage 来接收数据，传输的数据并不是直接共享，而是被复制的。

需要注意的是：Worker 最大并发数量限制为 1 个，创建下一个前请用 Worker.terminate 结束当前 Worker

其他 Worker相关的内容请参考微信官方文档：多线程 Worker

结语

短短的一篇文章，定不能将层叠拼图Plus小游戏的前前后后讲明白讲透彻。其实最让人心累的还是软著的申请过程，由于各种原因前前后后花了将近三个月的时间，后续可以给大家分享软著申请相关的内容，希望可以帮助到需要的童鞋。

江湖不远，我们游戏里见！

作者简介：huangjianke，高级iOS开发/前端开发工程师，五年开发经验。

需要体验小游戏的童鞋可在微信小程序搜索层叠拼图Plus。

【END】