以下截图显示了场景在网页中放置在同一位置。这与图层结构非常相似。不同之处在于我们将通过显示和隐藏每个场景来控制场景：

如果您曾经玩过舞动革命、吉他英雄或触觉复仇游戏，那么您可能熟悉音乐点向下或向上移动，玩家在音乐点移动到正确位置时击中音乐点。以下截图展示了触觉复仇游戏：

我们将在画布中以类似的音乐可视化方式播放audio标签中的歌曲。

执行以下步骤：

我们刚刚构建了一个完全功能的音乐游戏，这是基本的播放功能。它播放旋律和基础部分的歌曲，并有一些音乐点向下移动。

audiogame.musicNotes=[];audiogame.leveldata="1.592,3;1.984,2;2.466,1;2.949,2;4.022,3;";functionsetupLevelData(){varnotes=audiogame.leveldata.split(";");for(variinnotes){varnote=notes[i].split(",");vartime=parseFloat(note[0]);varline=parseInt(note[1]);varmusicNote=newMusicNote(time,line);audiogame.musicNotes.push(musicNote);}}级别数据字符串由键盘记录，我们将在本章后面讨论录制。

在这里，级别数据只包含几个音符。在代码包中，有完整歌曲的整个级别数据。

JavaScriptparseInt函数有一个可选的第二个参数。它定义要解析的数字的基数。默认情况下，它使用十进制，但当字符串以零开头时，parseInt将解析字符串为八进制。例如，parseInt("010")返回结果8而不是10。如果我们想要十进制数，那么我们可以使用parseInt("010",10)来指定基数。

//startinggamevardate=newDate();audiogame.startingTime=date.getTime();//sometimelatervardate=newDate();varelapsedTime=(date.getTime()-audiogame.startingTime)/1000;以下截图显示了前面的代码片段在控制台中运行：

当点在灰线上时，音乐点应该与歌曲相匹配。音乐点从游戏顶部出现并向下移动到灰线。我们延迟音乐播放以等待点从上到下移动。在这个例子中大约是3.55秒，所以我们延迟音乐播放3.55秒。

当点被创建时，它被放置在给定的距离处。每次gameloop函数执行时，我们将所有点的距离减少2.5。距离存储在每个代表它距离灰线有多远的dot对象中：

for(variinaudiogame.dots){audiogame.dots[i].distance-=2.5;}点的y位置由灰线减去距离计算如下：

//drawthedotctx.save();varx=ctx.canvas.width/2-100if(audiogame.dots[i].line==2){x=ctx.canvas.width/2;}elseif(audiogame.dots[i].line==3){x=ctx.canvas.width/2+100;}ctx.translate(x,ctx.canvas.height-80-audiogame.dots[i].distance);ctx.drawImage(audiogame.dotImage,-audiogame.dotImage.width/2,-audiogame.dotImage.height/2);以下截图显示了灰线和每个点之间的距离。当距离为零时，它恰好在灰线上：

现在我们有一个游戏场景正在播放我们的歌曲。但是，它覆盖了我们用播放按钮制作的菜单场景。现在想象一下，我们打开游戏时，播放按钮被显示，然后我们点击按钮，游戏场景滑入并开始播放音乐。

我们将默认隐藏游戏场景，并在点击播放按钮后显示它：

我们刚刚在菜单场景和游戏场景之间创建了一个过渡。

点击播放按钮时，游戏场景从顶部滑入。这种场景过渡效果是通过CSS3过渡来实现的。游戏场景的位置最初是放置在负的顶部数值上。然后我们通过过渡将顶部位置从负值改变为零，这样它就从顶部动画到正确的位置。

使滑动效果生效的另一重要事项是将场景的父DIV的溢出设置为隐藏。如果没有隐藏的溢出，即使顶部位置为负值，游戏场景也是可见的。因此，将场景的父DIV设置为隐藏的溢出是很重要的。

以下截图展示了游戏场景的滑入过渡。#gameDIV是菜单场景和游戏场景的父级。当我们添加.show-scene类时，游戏场景从顶部移动，将顶部值设置为0并进行过渡：

当显示游戏时，我们为场景过渡创建了一个滑入效果。通过使用JavaScript和CSS3，我们可以创造许多不同的场景过渡效果。尝试制作自己的过渡效果，比如淡入、从右侧推入，甚至是带有3D旋转的翻转效果。

现在我们可以点击播放按钮。音乐游戏滑入并播放带有音符下落的歌曲。接下来，我们将为音乐音符添加交互。因此，我们将添加键盘事件来控制三条线击中音乐音符。

我们刚刚为我们的音乐游戏添加了键盘交互。击打键时会有发光动画。当在正确时刻按下正确的键时，音乐点会消失。

我们使用J，K和L键来击打游戏中的三条音乐线。J键控制左线，K键控制中线，L键控制右线。

还有一个指示，显示我们刚刚击中了音乐线。这是通过在灰线和音乐线的交叉点放置以下图像来实现的：

然后，我们可以使用以下jQuery代码来控制击中指示图形的显示和隐藏：

$(document).keydown(function(e){varline=e.which-73;$('#hit-line-'+line).removeClass('hide');$('#hit-line-'+line).addClass('show');});$(document).keyup(function(e){varline=e.which-73;$('#hit-line-'+line).removeClass('show');$('#hit-line-'+line).addClass('hide');});J，K和L键控制音乐线1到3。由于J，K和L的键码分别为74、75和76，我们可以通过将键码减去73来知道它是哪条线。

如果音符几乎在灰色水平线上，距离接近零。这有助于我们确定音符是否击中了灰线。通过检查按键按下事件和音符距离，我们可以确定是否成功击中了音符。以下代码片段显示了当距离在20像素内时，我们认为音符被击中：

$(document).keydown(function(e){varline=e.which-73;$('#hit-line-'+line).removeClass('hide');$('#hit-line-'+line).addClass('show');//ourtargetisJ(74),K(75),L(76)varhitLine=e.which-73;//checkifhitamusicnotedotfor(variinaudiogame.dots){if(hitLine==audiogame.dots[i].line&&Math.abs(audiogame.dots[i].distance)<20){//removethehitdotfromthedotsarrayaudiogame.dots.splice(i,1);}}});坚定决心，我们在击中时移除音乐点。错过的点仍然会穿过灰线并向底部移动。这创造了一个基本的游戏玩法，玩家必须在歌曲播放时在正确的时刻正确击中所有音乐点。

我们在音乐点被击中时（因此不再绘制）从数组中删除音乐点数据。要从数组中删除一个元素，我们使用splice函数。以下代码行从给定索引处的数组中删除一个元素：

array.splice(index,1);splice函数有点棘手。这是因为它允许我们在数组中添加或删除元素。然后，它会将删除的元素作为另一个数组返回。听起来很复杂。因此，我们将进行一些实验。

我们将在Web浏览器中打开JavaScript控制台，对splice函数进行一些测试：

我们刚刚创建了一个数组，并尝试使用splice函数添加和删除元素。请注意，splice数组会返回另一个包含已删除元素的数组。

以下是我们如何使用splice函数：

array.splice(index,length,element1,element2,…,elementN);以下表格显示了我们如何使用这些参数：

以下是Mozilla开发者网络链接，讨论了splice函数的不同用法：

在类似的商业音乐游戏中，当玩家击中或错过音乐点时会显示一些字。我们如何将这个功能添加到我们的游戏中？

我们已经为游戏创建了基本的交互。我们可以进一步改进游戏，通过添加旋律音量反馈来使表演更加逼真，并计算表演的成功率。

现在想象我们正在表演音乐。我们击中音乐点演奏旋律。如果我们错过了其中任何一个，那么我们就无法演奏好，旋律就会消失。

我们将存储一些游戏统计数据，并用它来调整旋律音量。我们将继续进行JavaScript文件：

我们想要移除点，要么是在它掉落到底部边界下方时，要么是在玩家击中它时。游戏循环在游戏画布上显示点列表中的所有点。我们可以通过从点数组中移除其数据来移除点图形。

我们使用以下的splice函数来移除数组中目标索引处的条目：

audiogame.dots.splice(index,1);存储最近五次结果中的成功次数在我们的游戏中，我们需要存储最近五次结果中的成功次数以计算成功率。我们可以通过使用一个代表这个的计数器来实现。当成功击中一个点时，计数器增加1，但当玩家未能击中一个点时，计数器减少1。

如果我们将计数器限制在一个范围内，比如在我们的例子中是0到5，那么计数器就代表了最近几次结果中的成功次数。

在上一章中，我们讨论了如何在Untangle游戏中显示游戏进度。我们能否在音乐游戏中应用类似的技术？我们有玩家在游戏过程中的成功百分比。在游戏顶部显示为百分比条形图如何？

游戏依赖级别数据进行播放。如果没有级别数据，回放可视化将无法工作。如果回放可视化不起作用，我们也无法进行播放。那么我们如何记录级别数据呢？

我们刚刚为游戏添加了录音功能。现在我们可以录制我们的音符。我们可以通过将audiogame.isRecordMode变量设置为true和false来切换录制模式和播放模式。

varcurrentTime=audiogame.melody.currentTime.toFixed(3);varnote=newMusicNote(currentTime,e.which-73);audiogame.musicNotes.push(note);我们还捕获了分号键，以便将所有记录的MusicNote数据打印成字符串。字符串遵循time,line;time,line的格式，因此我们可以直接复制打印的字符串，并将其粘贴为级别数据以进行播放。

我们现在可以玩游戏了，但是游戏结束时没有指示。现在想象一下，当游戏完成时，我们想知道我们玩得有多好。我们将捕获旋律结束信号，并显示游戏的成功率。

我们刚刚监听了音频元素的ended事件，并用处理程序函数处理了它。

音频元素中还有许多其他事件。以下表格列出了一些常用的音频事件：

这里我们列出了一些常用事件；您可以在Mozilla开发者中心的以下网址上查看完整的音频事件列表：

在我们的音乐游戏中，当游戏结束时，我们在控制台中打印出成功率。当游戏结束时，添加一个游戏结束场景，并在游戏结束时显示它会怎样？在显示游戏结束场景时，使用动画过渡也是不错的。

在本章中，我们学到了如何使用HTML5音频元素，并制作了一个音乐游戏。

具体来说，我们涵盖了以下主题：

我们还讨论了管理场景和动画过渡。

我们已经学习了如何在HTML5游戏中添加音乐和音效。现在我们准备在下一章中通过添加排行榜来存储游戏得分，构建一个更完整的游戏。

本地存储是HTML5的一个新规范。它允许网站在浏览器中本地存储信息，并在以后访问存储的数据。这是游戏开发中的一个有用功能，因为我们可以将其用作内存插槽，在Web浏览器中本地保存任何游戏数据。

我们将在我们在第三章构建CSS3记忆匹配游戏中构建的游戏中添加游戏数据存储。除了存储和加载游戏数据，我们还将使用纯CSS3样式向玩家通知打破记录的好消息，通过一个漂亮的3D丝带。

以下截图显示了我们将通过本章创建的最终结果。那么，让我们开始吧：

还记得我们在第三章中制作的CSS3记忆匹配游戏吗？现在想象一下我们已经发布了我们的游戏，玩家们正在努力表现得很好。

我们想告诉玩家他们是否比上次玩得更好或更差。我们将保存最新的分数，并通过比较分数来告知玩家这次是否比上次更好。

当他们表现更好时，他们可能会感到自豪。这可能使他们上瘾，他们可能会继续努力获得更高的分数。

我们将继续使用第三章中制作的记忆匹配游戏的代码。执行以下步骤：

我们刚刚建立了一个基本的得分系统，用于比较玩家的得分和上次的得分。

我们可以使用localStorage对象的setItem函数来存储数据。以下表格显示了该函数的用法：

localStorage.setItem("last-elapsed-time",matchingGame.elapsedTime);与setItem相辅相成，我们可以通过以下方式使用getItem函数获取存储的数据：

localStorage.getItem(key);该函数返回给定键的存储值。当尝试获取一个不存在的键时，它会返回null。这可以用来检查我们是否为特定键存储了任何数据。

本地存储以键值对的形式存储数据。键和值都是字符串。如果我们保存数字、布尔值或任何类型的数据而不是字符串，那么在保存时它会将值转换为字符串。

通常，当我们从本地存储加载保存的值时会出现问题。加载的值是一个字符串，而不管我们保存的类型是什么。在使用之前，我们需要明确将值解析为正确的类型。

例如，如果我们将一个浮点数保存到本地存储中，那么在加载时我们需要使用parseFloat函数。以下代码片段显示了如何使用parseFloat来检索存储的浮点数：

varscore=13.234;localStorage.setItem("game-score",score);//result:stored"13.234".vargameScore=localStorage.getItem("game-score");//result:get"13.234"intogameScore;gameScore=parseFloat(gameScore);//result:13.234floatingvalue在前面的代码片段中，如果我们忘记将gameScore从字符串转换为浮点数，操作可能是不正确的。例如，如果我们在没有使用parseFloat函数的情况下将gameScore增加1，结果将是13.2341而不是14.234。因此，请确保将值从本地存储转换为其正确的类型。

本地存储的大小限制

对于每个域通过localStorage存储的数据都有大小限制。这个大小限制在不同的浏览器中可能略有不同。通常，大小限制为5MB。如果超过了限制，那么当向localStorage设置键值时，浏览器会抛出QUOTA_EXCEEDED_ERR异常。

除了使用setItem和getItem函数外，我们还可以将localStorage对象视为关联数组，并通过使用方括号访问存储的条目。

例如，我们可以用后一种版本替换以下代码：

使用setItem和getItem：

localStorage.setItem("last-elapsed-time",elapsedTime);varlastElapsedTime=localStorage.getItem("last-elapsed-time");访问localStorage的方式如下：

我们将所有游戏数据打包到一个对象中并进行存储。

Mozilla开发者网络提供了使用Date对象的详细参考，网址如下：

我们在第四章，使用Canvas和DrawingAPI构建Untangle游戏中使用JSON表示游戏级别数据。

JSON.stringify(anyObject);通常，我们只使用stringify函数的第一个参数。这是我们要编码为字符串的对象。以下代码片段演示了编码为JavaScript对象的结果：

varjsObj={};jsObj.testArray=[1,2,3,4,5];jsObj.name='CSS3MatchingGame';jsObj.date='8May,2011';JSON.stringify(jsObj);//result:{"testArray":[1,2,3,4,5],"name":"CSS3MatchingGame","date":"8May,2011"}注意stringify方法可以很好地将具有数据结构的对象解析为字符串。但是，它无法将任何对象转换为字符串。例如，如果我们尝试将DOM元素传递给它，它将返回错误。如果我们传递一个日期对象，它将返回表示日期的字符串。或者，它将删除解析对象的所有方法定义。

JSON的完整形式是JavaScript对象表示法。从名称上我们知道它使用JavaScript的语法来表示对象。因此，将JSON格式的字符串解析回JavaScript对象非常容易。

以下代码片段显示了我们如何在JSON对象中使用解析函数：

JSON.parse(jsonFormattedString);我们可以在WebInspector中打开控制台来测试JSONJavaScript函数。以下屏幕截图显示了我们刚刚讨论的代码片段在编码对象和解析它们时的运行结果：

在我们将某些内容保存在本地存储后，我们可能想知道在编写加载部分之前究竟保存了什么。我们可以使用WebInspector中的存储面板来检查我们保存了什么。它列出了同一域下保存的所有键值对。以下屏幕截图显示了我们保存了last-score，值为{"savedTime":"23/2/201119:27:02","score":23}。

该值是我们用于将对象编码为JSON的JSON.stringify函数的结果。您也可以尝试直接将对象保存到本地存储中：

假设我们想通过通知玩家他们打破了与上次得分相比的新纪录来鼓励他们。我们想在上面显示一个带有NewRecord文本的缎带。由于新的CSS3属性，我们可以完全在CSS中创建缎带效果。

当玩家打破上次得分时，我们将创建一个新的记录缎带并显示它。因此，请执行以下步骤：

我们刚刚以纯CSS3样式创建了一个丝带效果，并借助JavaScript来显示和隐藏它。丝带由一个小三角形叠加在一个矩形上组成，如下面的屏幕截图所示：

现在，我们如何在CSS中创建一个三角形？我们可以通过将宽度和高度都设置为0，并只绘制一个边框来创建一个三角形。然后，三角形的大小由边框宽度决定。以下代码是我们在新记录丝带中使用的三角形CSS：

.triangle{position:relative;height:0px;width:0;left:-5px;top:-32px;border-style:solid;border-width:6px;border-color:transparent#882011transparenttransparent;z-index:-1;}注意以下PVMGarage网站提供了关于纯CSS3丝带使用的详细解释：

每次游戏结束时，它会将最后得分与当前得分进行比较。然后，它保存当前得分。

如何修改代码以保存最高分并在打破最高分时显示新记录丝带？

我们通过添加游戏结束画面和存储游戏记录来增强了我们的CSS3记忆匹配游戏。现在想象一下，玩家正在进行游戏，然后意外关闭了Web浏览器。一旦玩家再次打开游戏，游戏将从头开始，玩家正在玩的游戏将丢失。通过本地存储，我们可以将整个游戏数据编码为JSON并存储起来。这样，玩家可以稍后恢复他们的游戏。

我们将把游戏数据打包到一个对象中，并在每秒保存到本地存储中。

我们将继续使用我们的CSS3记忆匹配游戏：

最后，我们在每秒钟将savingObject保存在localStorage中。该对象使用我们在本章前面使用的stringify函数进行JSON编码。然后，我们通过解析来自本地存储的JSON字符串来重新创建游戏。

当游戏结束时，我们需要删除保存的记录。否则，新游戏将无法开始。本地存储提供了一个remoteItem函数来删除特定记录。

以下是我们如何使用该函数来删除具有给定键的记录：

localStorage.removeItem(key);提示如果要删除所有存储的记录，可以使用localStorage.clear()函数。

我们在savingObject中克隆了洗过的牌组，这样我们就可以在恢复游戏时使用牌组的顺序来重新创建卡片。但是，我们不能通过将数组分配给另一个变量来复制数组。以下代码无法将数组A复制到数组B：

vara=[1,2,3,4,5];varb=a;a.pop();//result://a:[1,2,3,4]//b:[1,2,3,4]slice函数提供了一种简单的方法来克隆只包含基本类型元素的数组。只要数组不包含另一个数组或对象作为元素，我们就可以使用slice函数来克隆数组。以下代码成功地将数组A克隆到B：

vara=[1,2,3,4,5];varb=a.slice();a.pop();//result://a:[1,2,3,4]//b:[1,2,3,4,5]slice函数通常用于通过从现有数组中选择一系列元素来创建一个新数组。当使用slice函数而没有任何参数时，它会克隆整个数组。Mozilla开发者网络在以下URL提供了有关slice函数的详细用法：

我们已保存了游戏进度，但尚未编写恢复游戏的逻辑。所以，让我们继续进行恢复部分。

我们刚刚通过解析整个游戏状态的保存JSON字符串完成了游戏加载部分。

if(savedObject!=undefined){matchingGame.savingObject.removedCards=savedObject.removedCards;//findthosecardsandremovethem.for(variinmatchingGame.savingObject.removedCards){$(".card[data-card-index="+matchingGame.savingObject.removedCards[i]+"]").remove();}}提示使用存储事件跟踪存储更改

有时，我们可能想要监听localStorage的变化。我们可以通过监听storage事件来实现。当localStorage中的任何内容发生变化时，该事件将被触发。来自DiveintoHTML5的以下链接提供了关于如何使用该事件的详细讨论：

考虑以下每个陈述是否为真：

在本章中，我们学到了如何使用本地存储在Web浏览器中保存游戏数据。

我们还使用纯CSS3样式创建了一个漂亮的3D丝带作为新记录徽章。

现在我们已经学会了如何通过使用本地存储来改进我们以前的游戏，我们准备进入一个名为WebSocket的高级功能，它可以在实时互动中连接玩家。

在之前的章节中，我们构建了几个本地单人游戏。在本章中，我们将借助WebSockets构建一个多人游戏。WebSockets使我们能够创建基于事件的服务器-客户端架构。所有连接的浏览器之间传递的消息都是即时的。我们将结合Canvas绘图、JSON数据打包和在之前章节中学到的几种技术来构建绘画和猜词游戏。

以下屏幕截图显示了我们将在本章中创建的绘画和猜词游戏：

在我们开始构建WebSockets示例之前，我们将看一下现有的多用户绘图板示例。这个示例让我们知道如何使用WebSockets服务器立即在浏览器之间发送数据。

浏览器使用WebSockets的能力

在撰写本书时，只有苹果Safari和GoogleChrome支持WebSocketsAPI。MozillaFirefox和Opera因协议上的潜在安全问题而放弃了对WebSockets的支持。GoogleChrome也计划在安全漏洞修复之前放弃WebSockets。

Mozilla的以下链接解释了他们为什么禁用了WebSockets：

我们刚刚看到浏览器如何实时连接在一起。我们在绘图板上画了些东西，所有其他连接的用户都可以看到这些图画。此外，我们也可以看到其他人正在画什么。

该示例是使用HTML5WebSockets功能与后端服务器制作的，以向所有连接的浏览器广播绘图数据。

绘画部分是建立在Canvas上的，我们已经在第四章，使用Canvas和绘图API构建Untangle游戏中介绍过。WebSocketAPI使浏览器能够与服务器建立持久连接。后端是一个名为node.js的基于事件的服务器，我们将在本章中安装和使用。

HTML5的WebSockets提供了一个客户端API，用于将浏览器连接到后端服务器。该服务器必须支持WebSockets协议，以保持连接持久。

在这一部分，我们将下载并安装一个名为Node.JS的服务器，我们可以在上面安装一个WebSockets模块。

Node.JS在Linux和Mac上可以直接使用。以下链接提供了一个安装程序，用于在Windows上安装Node.JS：

$./configure$sudomakeinstall使用sudomakeinstall命令以root权限安装Node.JS，并以root访问权限安装所需的第三方库。以下链接讨论了如何在不使用sudo的情况下安装Node.JS：

$node--versionv0.5.0-pre刚刚发生了什么？我们刚刚下载并安装了Node.JS服务器。我们还下载了node.js服务器的WebSockets库。通过本章的示例，我们将在此服务器和WebSockets库的基础上构建服务器逻辑。

Node.js服务器安装在Unix或Linux操作系统上运行良好。但是，在Windows上安装和运行node.js服务器需要更多步骤。以下链接显示了如何在Windows上安装node.js服务器：

我们刚刚安装了带有WebSockets库的node.js服务器。现在，我们将构建一些内容来测试WebSockets。现在想象一下，我们需要一个服务器来接受浏览器的连接，然后向所有用户广播连接计数。

varws=require(__dirname+'/lib/ws/server');varserver=ws.createServer();server.addListener("connection",function(conn){//initstuffonconnectionconsole.log("Aconnectionestablishedwithid",conn.id);varmessage="Welcome"+conn.id+"joiningtheparty.Totalconnection:"+server.manager.length;server.broadcast(message);});server.listen(8000);console.log("WebSocketserverisrunning.");console.log("Listeningtoport8000.");nodeserver.js$nodeserver.jsWebSocketserverisrunning.Listeningtoport8000.刚刚发生了什么？我们刚刚创建了一个简单的服务器逻辑，初始化了WebSockets库，并监听了连接事件。

在Node.JS中，不同的功能被打包到模块中。当我们需要特定模块中的功能时，我们使用require进行加载。我们加载WebSockets模块，然后在服务器逻辑中使用以下代码初始化服务器：

varws=require(__dirname+'/lib/ws/server');varserver=ws.createServer();__dirname表示正在执行的服务器JavaScript文件的当前目录。我们将lib文件夹放在服务器逻辑文件的同一文件夹下。因此，WebSockets服务器位于当前目录|lib|ws|server。

最后，我们需要为服务器分配一个端口来监听以下代码：

server.listen(8000);在上述代码片段中，8000是客户端连接到此服务器的端口号。我们可以选择不同的端口号，但必须确保所选的端口号不会与其他常见服务器服务重叠。

为了获取有关node.js服务器的全局范围对象和变量的更多信息，请访问以下链接的官方文档：

node.js服务器是基于事件的。这意味着大多数逻辑是在触发某个事件时执行的。我们在示例中使用的以下代码监听connection事件并处理它：

server.addListener("connection",function(conn){console.log("Aconnectionestablishedwithid",conn.id);…});connection事件带有一个连接参数。我们在连接实例中有一个id属性，我们可以用它来区分每个连接的客户端。

以下表列出了两个常用的服务器事件：

我们可以通过访问服务器管理器来获取WebSocketsnode.js服务器中连接的客户端数。我们可以使用以下代码获取计数：

vartotalConnectedClients=server.manager.length;向所有连接的浏览器广播消息一旦服务器收到新的connection事件，我们就会向所有客户端广播连接的更新计数。向客户端广播消息很容易。我们只需要在server实例中使用string参数调用broadcast函数。

以下代码片段向所有连接的浏览器广播服务器消息：

varmessage="amessagefromserver";server.broadcast(message);创建一个连接到WebSocket服务器并获取总连接数的客户端我们在上一个示例中构建了服务器，现在我们将构建一个客户端，连接到我们的WebSocket服务器并从服务器接收消息。该消息将包含来自服务器的总连接计数。

我们刚刚构建了一个客户端，它与我们在上一节中构建的服务器建立了WebSockets连接。然后，客户端将从服务器接收的任何消息打印到检查器中的控制台面板中。

在支持WebSockets的任何浏览器中，我们可以通过使用以下代码创建一个新的WebSocket实例来建立连接：

varsocket=newWebSocket(url);url参数是一个带有WebSocketsURL的字符串。在我们的示例中，我们正在本地运行我们的服务器。因此，我们使用的URL是ws://127.0.0.1:8000，其中8000表示我们正在连接的服务器的端口号。这是8000，因为当我们构建服务器端逻辑时，服务器正在监听端口8000。

与服务器类似，客户端端有几个WebSockets事件。以下表格列出了我们将用于处理WebSockets的事件：

我们现在知道有多少浏览器连接。假设我们想要构建一个聊天室，用户可以在各自的浏览器中输入消息，并立即将消息广播给所有连接的用户。

我们将让用户输入消息，然后将消息发送到node.js服务器。然后服务器将消息转发到所有连接的浏览器。一旦浏览器接收到消息，它就会在聊天区域显示出来。在这种情况下，用户一旦加载网页就连接到即时聊天室。

我们刚刚通过添加一个输入文本字段来扩展了我们的连接示例，让用户在其中输入一些文本并将其发送出去。文本作为消息发送到WebSockets服务器。然后服务器将在终端中打印接收到的消息。

为了从客户端向服务器发送消息，我们在WebSocket实例中调用以下send方法：

websocketGame.socket.send(message);在我们的示例中，以下代码片段从输入文本字段中获取消息并将其发送到服务器：

varmessage=$("#chat-input").val();websocketGame.socket.send(message);在服务器端接收消息在服务器端，我们需要处理刚刚从客户端发送的消息。在WebSocketnode.js库中的连接实例中有一个名为message的事件。我们可以监听连接消息事件以接收来自每个客户端连接的消息。

以下代码片段显示了我们如何使用消息事件监听器在服务器终端上打印消息和唯一连接ID：

conn.addListener("message",function(message){console.log("Gotdata'"+message+"'fromconnection"+conn.id);});注意在服务器和客户端之间发送和接收消息时，只接受字符串。我们不能直接发送对象。但是，我们可以在传输之前将数据转换为JSON格式的字符串。我们将在本章后面展示发送数据对象的示例。

在上一个示例中，服务器可以接收来自浏览器的消息。但是，服务器除了在终端中打印接收到的消息之外，什么也不做。因此，我们将向服务器添加一些逻辑，以广播消息。

这是我们之前示例的延伸。我们讨论了服务器如何向所有连接的客户端广播连接计数。我们还讨论了客户端如何向服务器发送消息。在这个例子中，我们将这两种技术结合起来，让服务器将接收到的消息广播给所有连接的用户。

如果您曾经使用服务器端语言和数据库构建过网页聊天室，那么您可能会想知道WebSocket实现和传统实现之间有什么区别。

下图显示了客户端和服务器之间的请求。它显示了许多无用的请求被发送，但服务器在没有新数据的情况下响应客户端：

还有一种更好的轮询方法叫做长轮询。客户端向服务器发送请求并等待响应。与传统的轮询方法不同，服务器不会以“没有更新”的方式响应，直到有需要推送给服务器的内容。在这种方法中，服务器可以在有更新时向客户端推送内容。一旦客户端从服务器收到响应，它会创建另一个请求并等待下一个服务器通知。下面的图显示了长轮询方法，客户端请求更新，服务器只在有更新时响应：

在WebSockets方法中，请求的数量远少于轮询方法。这是因为客户端和服务器之间的连接是持久的。一旦建立连接，只有在有任何更新时才会从客户端或服务器端发送请求。例如，当客户端想要向服务器更新某些内容时，客户端向服务器发送消息。服务器也只在需要通知客户端数据更新时才向客户端发送消息。在连接期间不会发送其他无用的请求。因此，利用的带宽更少。以下图显示了WebSockets方法：

使用基于事件的WebSockets方法实现多用户聊天室的好处是什么？这些好处如何使消息传递如此即时？

假设我们想要一个共享的素描本。任何人都可以在素描本上画东西，所有其他人都可以查看，就像我们在本章开头玩的素描本示例一样。我们学习了如何在客户端和服务器之间传递消息。我们将进一步发送绘图数据。

在处理数据发送和服务器处理之前，让我们专注于制作一个绘图白板。我们将使用画布来构建一个本地绘图素描本。

我们刚刚创建了一个本地绘图板。这就像一个白板，玩家可以通过拖动鼠标在画布上绘图。但是，绘图数据尚未发送到服务器；所有绘图只在本地显示。

画线函数与我们在第四章中使用的相同。我们还使用相同的代码来获取鼠标相对于画布元素的位置。但是，鼠标事件的逻辑与第四章不同。

当我们在计算机上画东西时，通常意味着我们点击画布并拖动鼠标（或笔）。直到鼠标按钮松开为止才画线。然后，用户再次点击另一个地方并拖动以绘制线条。

在我们的示例中，我们有一个名为isDrawing的布尔标志，用于指示用户是否正在绘图。isDrawing标志默认为false。当鼠标按钮按下时，我们将标志设置为true。当鼠标移动时，我们在鼠标按钮按下时的移动点和上一个点之间画一条线。然后，当鼠标按钮松开时，我们再次将isDrawing标志设置为false。

这就是绘图逻辑的工作方式。

我们能否通过添加颜色支持来修改绘图画板？再加上五个按钮，分别是红色、蓝色、绿色、黑色和白色？玩家可以在绘图时选择颜色。

我们将进一步通过将我们的绘图数据发送到服务器，并让服务器将绘图广播到所有连接的浏览器。

我们刚刚构建了一个多用户绘图画板。这类似于我们在本章开头尝试的绘图画板。我们通过发送一个复杂的数据对象作为消息，扩展了构建聊天室时所学到的内容。

为了正确地在服务器和客户端之间传递多个数据，我们必须定义一个数据对象，服务器和客户端都能理解。

数据对象中有几个属性。以下表格列出了这些属性以及我们为什么需要它们：

此外，我们在客户端和服务器端都定义了以下常量。这些常量是用于dataType属性的：

//ContantsLINE_SEGMENT:0,CHAT_MESSAGE:1,有了这些常量，我们可以通过以下可读的代码来比较dataType，而不是使用无意义的整数：

if(data.dataType==websocketGame.CHAT_MESSAGE){…}将绘图线数据打包成JSON进行广播在上一章中，当将JavaScript对象存储到本地存储中时，我们使用了JSON.stringify函数将其转换为JSON格式的字符串。现在，我们需要在服务器和客户端之间以字符串格式发送数据。我们使用了相同的方法将绘画线条数据打包成对象，并将其作为JSON字符串发送。

以下代码片段显示了我们如何在客户端打包线段数据并以JSON格式的字符串发送到服务器：

//sendthelinesegmenttoservervardata={};data.dataType=websocketGame.LINE_SEGMENT;data.startX=startX;data.startY=startY;data.endX=mouseX;data.endY=mouseY;websocketGame.socket.send(JSON.stringify(data));在从其他客户端接收到绘画线条后重新创建它们JSON解析通常成对出现，与stringify一起使用。当我们从服务器接收到消息时，我们必须将其解析为JavaScript对象。以下是客户端上的代码，它解析数据并根据数据更新聊天历史或绘制线条：

vardata=JSON.parse(e.data);if(data.dataType==websocketGame.CHAT_MESSAGE){$("#chat-history").append("

"+data.sender+"said:"+data.message+"

");}elseif(data.dataType==websocketGame.LINE_SEGMENT){drawLine(ctx,data.startX,data.startY,data.endX,data.endY,1);}构建多人绘画和猜词游戏在本章的早些时候，我们构建了一个即时聊天室。此外，我们刚刚构建了一个多用户草图本。那么，如何将这两种技术结合起来构建一个绘画和猜词游戏呢？绘画和猜词游戏是一种游戏，其中一个玩家被给予一个词来绘制。所有其他玩家不知道这个词，并根据绘画猜测这个词。绘画者和正确猜测词语的玩家将获得积分。

我们将按照以下方式实现绘画和猜词游戏的游戏流程：

我们刚刚在WebSockets和Canvas中创建了一个多人绘画和猜词游戏。游戏和多用户草图本之间的主要区别在于，服务器现在控制游戏流程，而不是让所有用户绘制。

控制多人游戏的游戏流程比单人游戏要困难得多。我们可以简单地使用几个变量来控制单人游戏的游戏流程，但是我们必须使用消息传递来通知每个玩家特定的更新游戏流程。

//ConstantsvarLINE_SEGMENT=0;varCHAT_MESSAGE=1;varGAME_LOGIC=2;游戏流程中有几种状态。在游戏开始之前，连接的玩家正在等待游戏开始。一旦有足够的连接进行多人游戏，服务器向所有玩家发送游戏逻辑消息，通知他们开始游戏。

当游戏结束时，服务器向所有玩家发送游戏结束状态。然后，游戏结束，游戏逻辑暂停，直到有玩家点击重新开始按钮。一旦重新开始按钮被点击，客户端向服务器发送游戏重新开始状态，指示服务器准备新游戏。然后，游戏重新开始。

//ConstantforgamelogicstatevarWAITING_TO_START=0;varGAME_START=1;varGAME_OVER=2;varGAME_RESTART=3;服务器端的以下代码保存了一个指示哪个玩家轮到的索引：

varplayerTurn=0;发送到玩家（轮到他的回合）的数据与发送到其他玩家的数据不同。其他玩家只收到一个游戏开始信号的数据：

vargameLogicData1={};gameLogicData1.dataType=GAME_LOGIC;gameLogicData1.gameState=GAME_START;gameLogicData1.isPlayerTurn=false;另一方面，玩家（轮到他画画）收到以下包含单词信息的数据：

vargameLogicData2={};gameLogicData2.dataType=GAME_LOGIC;gameLogicData2.gameState=GAME_START;gameLogicData2.answer=currentAnswer;gameLogicData2.isPlayerTurn=true;在服务器端枚举连接的客户端我们可以使用servermanager类中的forEach方法枚举所有连接的客户端。以下代码显示了用法。它循环遍历每个连接，并调用给定的callback函数，如下所示：

server.manager.forEach(function);例如，以下代码片段在服务器终端上打印所有连接的ID：

server.manager.forEach(function(connection){console.log("Thisisconnection",connection.id);}}在服务器端向特定连接发送消息在我们之前的示例中，我们使用广播向所有连接的客户端发送消息。除了向每个人发送消息，我们可以使用send方法将消息发送到特定的连接，如下所示：

server.send(connectionID,message);send方法需要两个参数。connectionID是目标连接的唯一ID，message是我们要发送的字符串。

在我们从画画和猜图游戏中提取的以下代码中，我们向现在必须画画的玩家的浏览器发送特殊数据。我们使用forEach函数循环遍历连接，并检查连接是否轮到画画。然后，我们打包答案并将这些数据发送给目标连接，如下所示：

server.manager.forEach(function(connection){if(index==playerTurn){vargameLogicData2={};gameLogicData2.dataType=GAME_LOGIC;gameLogicData2.gameState=GAME_START;gameLogicData2.answer=currentAnswer;gameLogicData2.isPlayerTurn=true;server.send(connection.id,JSON.stringify(gameLogicData2));}index++;});改进游戏我们刚刚创建了一个可玩的多人游戏。但是，还有很多需要改进的地方。在接下来的几节中，我们列出了游戏中的两个可能的改进。

在游戏中，画画者画线，其他玩家猜图。现在，想象两个玩家在玩，第三个玩家加入。由于没有任何地方存储绘制的线条，第三个玩家无法看到画画者画了什么。这意味着第三个玩家必须等到游戏结束才能玩。

我们如何让晚加入的玩家继续游戏而不丢失那些绘制的线条？我们如何为新连接的玩家重建绘图？在服务器上存储当前游戏的所有绘图数据怎么样？

服务器端的答案检查与currentAnswer变量比较消息，以确定玩家是否猜对。如果情况不匹配，答案将被视为不正确。当答案是“apples”时，玩家猜“apple”时被告知错误，这看起来很奇怪。

我们如何改进答案检查机制？如果使用不同的大小写或者相似的单词来改进答案检查逻辑，会怎么样？

游戏逻辑基本上已经完成，游戏已经可以玩了。但是，我们忘记了装饰游戏以使其看起来更吸引人。我们将使用CSS样式来装饰我们的猜画游戏。

我们刚刚为我们的游戏应用了样式，并嵌入了一个来自GoogleFontDirectory的字体，看起来像是涂鸦文本。画布现在被设计成更像是一个带有粗边框和微妙阴影的画布。

在这一章中，我们学到了很多关于将浏览器连接到WebSockets的知识。一个浏览器的消息和事件会几乎实时地广播到另一个浏览器。

具体来说，我们：

现在我们已经学会了如何构建一个多人游戏，我们准备在下一章中借助物理引擎来构建物理游戏。

以下屏幕截图显示了本章结束时我们将获得的内容。这是一个汽车游戏，玩家将汽车移向目的地点：

现在，假设我们想创建一个汽车游戏。我们对汽车施加力使其向前移动。汽车在坡道上移动，然后飞过空中。之后，汽车落在目的地坡道上，游戏结束。物理世界的每个部分的每次碰撞都会影响这一运动。如果我们必须从头开始制作这个游戏，那么我们至少要计算每个部分的速度和角度。幸运的是，物理库帮助我们处理所有这些物理问题。我们所要做的就是创建物理模型并在画布中呈现它。

我们已经导入了必要的JavaScript文件。值得记住的是，如果您以后想使用此基础创建另一个物理游戏，Box2DJS建议按照完全相同的顺序复制JavaScript导入代码，因为文件之间存在依赖关系。

//theglobalobjectthatcontainsthevariableneededforthecargame.varcarGame={}varcanvas;varctx;varcanvasWidth;varcanvasHeight;$(function(){carGame.world=createWorld();console.log("Theworldiscreated.",carGame.world);//getthereferenceofthecontextcanvas=document.getElementById('game');ctx=canvas.getContext('2d');canvasWidth=parseInt(canvas.width);canvasHeight=parseInt(canvas.height);});functioncreateWorld(){//setthesizeoftheworldvarworldAABB=newb2AABB();worldAABB.minVertex.Set(-4000,-4000);worldAABB.maxVertex.Set(4000,4000);//Definethegravityvargravity=newb2Vec2(0,300);//settoignoresleepingobjectvardoSleep=false;//finallycreatetheworldwiththesize,gravity,andsleepobjectparameter.varworld=newb2World(worldAABB,gravity,doSleep);returnworld;}我们还没有在画布中呈现物理世界。这就是为什么我们在页面上只看到一个空白画布。但是，我们已经在控制台日志中打印了新创建的世界。以下屏幕截图显示了控制台跟踪带有许多以m_开头的属性的世界对象。这些是世界的物理状态：

我们刚刚安装了Box2DJavaScript库，并创建了一个空世界来测试安装。

b2World是Box2D环境中的核心类。我们所有的物理实体，包括地面和汽车，都是在这个世界中创建的。以下代码显示了如何创建一个世界：

varworld=newb2World(worldAABB,gravity,doSleep);b2World类需要三个参数来初始化，这些参数在下表中列出并附有描述：

在物理世界中，我们需要很多边界区域。我们需要的第一个边界是世界边界。世界边界内的所有物体都将被计算，而边界外的物体将被销毁。

我们可以将b2AABB视为具有最低边界点和最高边界点的矩形。以下代码片段显示了如何使用b2AABB类。minVertex是边界的左上角点，而maxVertex是右下角点。以下世界定义了一个8000x8000的世界：

varworldAABB=newb2AABB();worldAABB.minVertex.Set(-4000,-4000);worldAABB.maxVertex.Set(4000,4000);注意Box2D数学模型中的单位与我们在计算机世界中通常使用的不同。长度单位是米，而不是像素。此外，旋转单位是弧度。

我们必须定义世界的重力。重力由b2Vec2定义。b2Vec2是一个1x2矩阵的向量。我们可以将其视为X和Y轴的向量。因此，以下代码定义了向下300个单位的重力：

vargravity=newb2Vec2(0,300);设置Box2D忽略休眠的物体休眠的物体是一个不再移动或改变状态的动态物体。

物理库计算世界中所有物体的数学数据和碰撞。当世界中有更多物体需要在每一帧中计算时，性能会变慢。在创建物理世界时，我们需要设置库来忽略休眠的物体或计算所有物体。

在我们的游戏中，只有很少的物体，所以性能还不是问题。此外，如果以后我们创建的物体进入空闲或休眠状态，我们将无法再与它们交互。因此，在本例中，我们将此标志设置为false。

在撰写本书时，只有GoogleChrome可以在画布中流畅运行Box2DJavaScript库。因此，建议在GoogleChrome中测试游戏，直到其他网络浏览器可以流畅运行为止。

现在世界是空的。如果我们要放置物体，那些物体将会掉下来，最终离开我们的视线。现在假设我们想在世界中创建一个静态地面物体，以便物体可以站在那里。我们可以在Box2D中做到这一点。

functioncreateGround(){//boxshapedefinitionvargroundSd=newb2BoxDef();groundSd.extents.Set(250,25);groundSd.restitution=0.4;//bodydefinitionwiththegivenshapewejustcreated.vargroundBd=newb2BodyDef();groundBd.AddShape(groundSd);groundBd.position.Set(250,370);varbody=carGame.world.CreateBody(groundBd);returnbody;}createGround();刚才发生了什么？我们已经使用形状和物体定义创建了一个地面物体。这是一个我们将经常使用的常见过程，用来在世界中创建不同类型的物体。因此，让我们详细了解一下我们是如何做到的。

形状定义了几何数据。在Box2D的JavaScript端口中，形状还定义了密度、摩擦和恢复等材料属性。形状可以是圆形、矩形或多边形。在前面的示例中使用的以下代码定义了一个框形状定义。在框形状中，我们必须通过设置extents属性来定义框的大小。extents属性接受两个参数：半宽和半高。这是一个半值，因此形状的最终面积是该值的四倍：

//boxshapedefinitionvargroundSd=newb2BoxDef();groundSd.extents.Set(250,25);groundSd.restitution=0.4;创建一个物体在定义形状之后，我们可以使用给定的形状定义创建一个物体定义。然后，我们设置物体的初始位置，最后要求世界实例根据我们的物体定义创建一个物体。下面的代码显示了我们如何在世界中创建一个物体，给定形状定义：

vargroundBd=newb2BodyDef();groundBd.AddShape(groundSd);groundBd.position.Set(250,370);varbody=carGame.world.CreateBody(groundBd);没有质量的物体被视为静态物体，或固定物体。这些物体是不可移动的，不会与其他静态物体发生碰撞。因此，这些物体可以用作地面或墙壁，成为关卡环境。另一方面，动态物体将根据重力移动并与其他物体发生碰撞。我们稍后将创建一个动态箱子物体。

我们已经创建了一个地面，但它只存在于数学模型中。我们在画布上看不到任何东西，因为我们还没有在上面画任何东西。为了展示物理世界的样子，我们必须根据物理世界画一些东西。

我们刚刚创建了一个函数，用于将世界中的每个形状绘制为带有深绿色轮廓的框。

以下代码显示了我们如何循环遍历世界中的每个形状进行绘制：

现在我们将看一下drawShape函数。

在每个形状上，我们想在画布中绘制对象的轮廓。在绘制任何东西之前，我们将线条样式设置为深绿色。然后，我们检查形状是圆形、矩形框还是多边形。如果是圆形，我们就使用极坐标来绘制给定形状的半径的圆。如果是多边形，我们就按照以下方式绘制多边形的每一条边：

functiondrawShape(shape,context){context.strokeStyle='#003300';context.beginPath();switch(shape.m_type){caseb2Shape.e_circleShape://Drawthecircleincanvasbasesonthephysicsobjectshapebreak;caseb2Shape.e_polyShape://Drawthepolygonincanvasbasesonthephysicsobjectshapebreak;}context.stroke();}在物理世界中创建一个动态框现在想象我们把一个箱子放入世界中。箱子从空中掉下来，最后撞到地面。箱子会弹起一点，最后停在地面上。这与我们在上一节中创建的不同。在上一节中，我们创建了一个静态地面，它是不可移动的，不会受到重力的影响。现在我们将创建一个动态框。

我们刚刚在世界中创建了一个动态物体。与不可移动的地面物体相比，这个箱子受到重力的影响，并且在碰撞过程中速度会发生变化。当一个物体包含有质量或密度的形状时，它是一个动态物体。否则，它是静态的。因此，我们为我们的箱子定义了一个密度。Box2D会使它成为动态的，并根据密度和物体的大小自动计算质量。

恢复值在0和1之间。在我们的情况下，箱子掉在地面上。当地面和箱子的恢复值都为0时，箱子根本不会弹跳。当箱子或地面中的一个恢复值为1时，碰撞是完全弹性的。

当两个物体发生碰撞时，碰撞的恢复值是两个物体的恢复值中的最大值。因此，如果一个恢复值为0.4的箱子掉在恢复值为0.6的地面上，这次碰撞会使用0.6来计算弹跳速度。

在Box2D物理世界中，所有计算都是按照系统化的迭代进行的。世界根据当前步骤计算所有事物的物理变换。当我们将“步骤”移动到下一个级别时，世界会根据新状态再次进行计算。

step函数类似于我们在第二章，使用基于DOM的游戏开发入门中的gameloop函数。它定期执行以计算游戏的新状态。

现在我们在游戏中有一个箱子。现在想象我们创建两个圆形的车轮。然后，我们将拥有汽车的基本组件，车身和车轮。

我们将通过以下步骤向世界中添加两个圆：

在模拟物理世界时，箱子和车轮都会掉下来并相互碰撞以及与地面碰撞。

创建圆形物体类似于创建方形物体。唯一的区别是我们使用CircleDef类而不是方形形状定义。在圆形定义中，我们使用radius属性而不是extents属性来定义圆的大小。

我们已经准备好了汽车箱体和两个轮子箱体。我们离制作汽车只差一步。现在想象我们有一种胶水可以把车轮粘在车身上。然后，汽车和轮子就不会再分开，我们就会有一辆车。我们可以使用关节来实现这一点。在本节中，我们将使用joint将车轮和车身粘在一起。

关节对于在两个身体之间（或者在一个身体和世界之间）添加约束很有用。有许多种类型的关节，我们在这个例子中使用的是旋转关节。

旋转关节使用一个公共锚点将两个身体粘在一起。然后，这两个身体被粘在一起，只允许基于公共锚点旋转。下面截图的左侧显示了两个身体是如何连接的。在我们的代码示例中，我们将锚点设置为轮子的中心点。下面截图的右侧显示了我们如何设置关节。轮子因为旋转原点在中心而旋转。这种设置使得汽车和轮子看起来很真实：

还有其他类型的关节，它们以不同的方式很有用。关节在创建游戏环境中很有用，因为有几种类型的关节，每种关节类型都值得一试，你应该考虑如何使用它们。以下链接是Box2D手册，解释了每种类型的关节以及我们如何在不同的环境设置中使用它们：

现在我们已经准备好了汽车。让我们用键盘移动它。

我们刚刚创建了与我们的汽车车身的交互。我们可以通过按下Z和X键来左右移动汽车。现在游戏似乎变得有趣起来了。

我们可以通过调用ApplyForce函数向任何身体施加力。以下代码显示了该函数的用法：

body.ApplyForce(force,point);这个函数接受两个参数，列在下表中：

除了ApplyForce函数，我们还可以使用ApplyImpulse函数移动任何物体。这两个函数都可以移动物体，但它们的移动方式不同。如果我们想改变物体的瞬时速度，那么我们可以在物体上使用ApplyImpulse一次，将速度改变为目标值。另一方面，我们需要不断地对物体施加力以增加速度。

例如，我们想要增加汽车的速度，就像踩油门一样。在这种情况下，我们对汽车施加力。如果我们正在创建一个需要启动球的球类游戏，我们可以使用ApplyImpulse函数向球体添加一个瞬时冲量。

你能想到另一种情况吗，我们需要对物体施加力或冲量吗？

现在我们可以移动汽车。然而，环境还不够有趣。现在想象一下，有一些坡道供汽车跳跃，两个平台之间有一个间隙，玩家必须飞过汽车。使用不同的坡道设置玩起来会更有趣。

我们刚刚将地面箱子创建代码封装到一个函数中，这样我们就可以轻松地创建一组地面物体。这些地面物体构成了游戏的级别环境。

此外，这是我们第一次旋转物体。我们使用rotation属性设置物体的旋转，该属性以弧度值为参数。大多数人可能习惯于度单位；我们可以使用以下公式从度获取弧度值：

groundBd.rotation=degree*Math.PI/180;通过设置箱子的旋转，我们可以在游戏中设置不同坡度的坡道。

现在我们已经设置了一个坡道，并且可以在环境中玩汽车。如何使用不同类型的连接器来设置游乐场？例如，使用滑轮连接器作为升降机怎么样？另一方面，包括一个带有中心连接器的动态板怎么样？

Box2D物理库会自动计算所有碰撞。现在想象一下，我们设置了一个地面物体作为目的地。玩家成功将汽车移动到目的地时获胜。由于Box2D已经计算了所有碰撞，我们所要做的就是获取检测到的碰撞列表，并确定我们的汽车是否撞到了目的地地面。

我们刚刚通过检查碰撞联系人创建了游戏获胜逻辑。当汽车成功到达目的地地面物体时，玩家获胜。

在每个步骤中，Box2D计算所有碰撞并将它们放入world实例中的contactlist中。我们可以使用carGame.world.GetContactList()函数获取联系人列表。返回的联系人列表是一个链接列表。我们可以通过以下for循环遍历整个链接列表：

for(varcn=carGame.world.GetContactList();cn!=null;cn=cn.GetNext()){//Wehaveshape1andshape2ofeachcontactnode.//cn.GetShape1();//cn.GetShape2();}当我们获得碰撞的形状时，我们检查该形状的主体是否是汽车或目的地主体。由于汽车形状可能在形状1或形状2中，gamewinWall也是如此，我们使用以下代码来检查两种组合：

varbody1=cn.GetShape1().GetBody();varbody2=cn.GetShape2().GetBody();if((body1==carGame.car&&body2==carGame.gamewinWall)||(body2==carGame.car&&body1==carGame.gamewinWall)){console.log("LevelPassed!");}试试看英雄我们在第七章，使用本地存储存储游戏数据中创建了一个游戏结束对话框。在这里使用该技术创建一个对话框，显示玩家通过了级别，怎么样？当我们向游戏添加不同的级别设置时，它也将作为级别过渡的工具。

您可能已经尝试在上一个示例中多次刷新页面，以使汽车成功跳到目的地。现在想象一下，我们可以按键重新初始化世界。然后，我们可以按照试错的方法直到成功。

我们将R键指定为游戏的重新启动键：

carGame.world=createWorld();试试看英雄创建游戏结束墙现在重新启动游戏的唯一方法是按重新启动键。在世界底部创建一个地面，检查任何下落的汽车怎么样？当汽车掉落并撞到底部地面时，我们知道玩家失败了，然后重新开始游戏。

现在想象一下，当完成每个游戏时，我们可以升级到下一个环境设置。对于每个级别，我们将需要几个环境设置。

我们将重构我们的代码以支持从级别数据结构加载静态地面物体。让我们通过以下步骤来完成它：

我们刚刚创建了一个数据结构来存储关卡。然后，我们根据给定的关卡号创建了游戏，并使用关卡数据构建了世界。

每个关卡数据都是一个对象数组。每个对象包含世界中每个地面物体的属性。这包括基本属性，如位置、大小和旋转。还有一个名为type的属性。它定义了物体是普通的箱子物体、汽车数据，还是获胜的目的地地面：

carGame.levels[0]=[{"type":"car","x":50,"y":210,"fuel":20},{"type":"box","x":250,"y":270,"width":250,"height":25,"rotation":0},{"type":"box","x":500,"y":250,"width":65,"height":15,"rotation":-10},{"type":"box","x":600,"y":225,"width":80,"height":15,"rotation":-20},{"type":"box","x":950,"y":225,"width":80,"height":15,"rotation":20},{"type":"box","x":1100,"y":250,"width":100,"height":15,"rotation":0},{"type":"win","x":1200,"y":215,"width":15,"height":25,"rotation":0}];在创建世界时，我们使用以下代码循环遍历关卡数组中的所有对象。然后根据类型创建汽车和地面物体，并引用游戏获胜的地面：

for(vari=0;i

我们已经创建了一个至少可以玩几个关卡的游戏。然而，它们只是一些轮廓框。我们甚至无法区分游戏中的目的地和其他地面物体。现在想象一下，目的地是一个赛车旗，有一辆汽车图形来代表它。这将使游戏目的更加清晰。