適用于Amazon Alexa的游戲Speed Tap開源

描述

概括

Speed Tap 是一款適用于 Amazon Alexa 的游戲，它使用 Echo Buttons 來測(cè)試玩家的反應(yīng)時(shí)間和注意力。該按鈕會(huì)在隨機(jī)顏色之間循環(huán)，玩家必須在按鈕為綠色時(shí)點(diǎn)擊該按鈕。隨著游戲的進(jìn)行，燈光速度加快，難度也越來越大。

該游戲結(jié)合了許多Alexa API和AWS 服務(wù)來創(chuàng)造引人入勝的體驗(yàn)，同時(shí)保持簡(jiǎn)單的游戲玩法。這個(gè)故事將重點(diǎn)解釋為什么需要這些以及它們的大致工作原理，以便其他開發(fā)人員了解什么是可能的以及如何進(jìn)行。

這項(xiàng)技能是使用 Node、AWS 服務(wù)和alexa-app框架從頭開始構(gòu)建的。

關(guān)鍵概念和獨(dú)特功能

從較高的層面來看，這些是使這款游戲無論是作為 Alexa Skill 還是從開發(fā)/編程的角度來看都獨(dú)一無二的東西：

• 玩家與所有 Alexa 用戶競(jìng)爭(zhēng)以獲得世界紀(jì)錄，這使得它比僅僅與自己對(duì)戰(zhàn)更有趣和互動(dòng)。
• AlexaSpeedTap.com的集成網(wǎng)站具有一個(gè)自動(dòng)更新的排行榜，顯示每個(gè)玩家的高分。或者，玩家可以通過使用 Alexa API 的游戲本身在排行榜上無縫連接他們的真實(shí)姓名。
• In-Skill-Purchases允許玩家購買額外的生命以在他們錯(cuò)過后繼續(xù)游戲。
• Alexa 聲音庫和隨機(jī)短語Speechcons（感嘆詞）用于使體驗(yàn)更加引人入勝和生動(dòng)，并賦予其一些個(gè)性。孩子們特別喜歡它。

架構(gòu)和 AWS 服務(wù)

?

AWS 架構(gòu)

?

拉姆達(dá)

游戲的所有代碼都在 AWS Lambda 中。它是使用 alexa-app 框架在 Node.js 中編寫的。Alexa 事件（玩游戲的用戶）和 CloudWatch Events 使用相同的 lambda 函數(shù)代碼，這會(huì)觸發(fā)后臺(tái)任務(wù)來更新排行榜。

動(dòng)態(tài)數(shù)據(jù)庫

個(gè)人球員和全球世界紀(jì)錄統(tǒng)計(jì)數(shù)據(jù)都存儲(chǔ)在 DynamoDB 中。對(duì) DDB 的訪問是使用 Amazon 的 aws-sdk 包完成的，我在其頂部編寫了一個(gè)自定義層以簡(jiǎn)化 API 并在現(xiàn)有的 Promise 接口上提供一個(gè)異步/等待接口。

每次交互時(shí)，用戶數(shù)據(jù)和狀態(tài)都會(huì)保存到 DDB，從而使游戲能夠以隨著時(shí)間的推移和適當(dāng)?shù)姆绞脚c用戶進(jìn)行交互（請(qǐng)參閱下面的用戶體驗(yàn)部分）。

S3

Lambda 函數(shù)每 5 分鐘生成一個(gè)包含所有高分和當(dāng)前世界紀(jì)錄數(shù)據(jù)的 JSON 文件，并將其存儲(chǔ)在公共 S3 存儲(chǔ)桶中。然后通過 AJAX 從網(wǎng)站加載此 JSON 文件以顯示排行榜并以大文本宣布當(dāng)前的記錄保持者。

后臺(tái)任務(wù) - CloudWatch Events

需要一個(gè)“后臺(tái)任務(wù)”來定期更新包含網(wǎng)站數(shù)據(jù)的 JSON 文件。由于無法按計(jì)劃觸發(fā) Lambda 函數(shù)，因此使用 CloudWatch Events 觸發(fā)觸發(fā) Lambda 函數(shù)的事件。

然后，Lambda 函數(shù)代碼會(huì)檢測(cè)它是由 Alexa 還是 CloudWatch Events 觸發(fā)的，并做出相應(yīng)的行為。

ALEXA API 和功能

許多 Alexa API 和功能被用來創(chuàng)建這個(gè)游戲。以下是使用的內(nèi)容和原因的摘要。

小工具API

Gadgets API需要與 Echo Buttons 交互，實(shí)際上有兩種風(fēng)格，它們都必須聲明為技能所需的接口。

GAME_ENGINE是用于監(jiān)聽 Echo Buttons 事件的接口。

GADGET_CONTROLLER是用于實(shí)際設(shè)置按鈕本身的燈光模式的接口。

這是兩個(gè)不同的 API，要讓它們無縫地協(xié)同工作，一開始理解起來有點(diǎn)棘手。仔細(xì)閱讀文檔、了解每個(gè)文檔的局限性并在設(shè)計(jì)您的體驗(yàn)時(shí)了解什么是可能的、什么是不可能的，這一點(diǎn)很重要。

客戶資料 API

Customer Profile API允許技能請(qǐng)求有關(guān)用戶的信息，例如姓名、電子郵件地址和電話號(hào)碼。使用時(shí)，該技能會(huì)在用戶的 Alexa 應(yīng)用程序中向用戶出示一張卡片以授予權(quán)限，然后才能訪問此信息。如果用戶請(qǐng)求，Speed Tap 使用此 API 獲取用戶名以顯示在網(wǎng)站的排行榜上。

技能購買

In-Skill Purchases (ISP) API允許技能請(qǐng)求用戶使用真錢進(jìn)行實(shí)際購買，以解鎖技能中的內(nèi)容或功能。Speed Tap 使用“消耗品”ISP (CISP)，這是可以購買和用完的物品，而不是一次性購買和訂閱，它們不會(huì)在使用時(shí)消失。

Speed Tap 使用戶能夠在點(diǎn)擊錯(cuò)誤的顏色后繼續(xù)。每個(gè)新用戶都會(huì)獲得 5 條額外的生命，當(dāng)他們離開后，他們可以選擇使用 CISP 再購買 10 條生命。

展示

Speed Tap 利用顯示接口 API與 Echo Show 和 Echo Spot 設(shè)備上的顯示功能進(jìn)行交互，方法是在游戲開始時(shí)顯示彩色“啟動(dòng)畫面”，并在每次按下按鈕時(shí)顯示當(dāng)前回合。

隨著帶有顯示器的 Echo 設(shè)備變得越來越普遍，技能通過視覺提示和附加信息來補(bǔ)充其音頻輸出非常重要。

聲音庫

Alexa Skills Kit 聲音庫是可用于任何技能的音頻片段集合。這些音頻文件由亞馬遜存儲(chǔ)，可以插入到任何響應(yīng)中，而無需技能作者創(chuàng)建、存儲(chǔ)或交付它們。例如：

隨著用于多種用途的聲音樣本的選擇越來越多，這個(gè)庫為技能作者提供了一種簡(jiǎn)單的方法來為他們的技能添加一點(diǎn)額外的個(gè)性和樂趣。Speed Tap 在等待用戶按下按鈕以增加戲劇性和張力時(shí)將這些聲音用于音樂，以及用于積極和消極事件。

演講者

Alexa 語音輸出可以比默認(rèn)的文本轉(zhuǎn)語音更具表現(xiàn)力的方式說出某些詞。這些“ Speechcons ”僅限于每種支持語言的一組特定單詞，并使用標(biāo)記插入到您的 SSML 響應(yīng)中：

<say-as interpret-as="interjection">abracadabra!say-as> 

Speed Tap 使用 Speechcons 響應(yīng)每個(gè)按鈕按下，讓游戲?qū)τ脩魜碚f更有趣，并增加一點(diǎn)多樣性。玩游戲的孩子特別喜歡有趣的輸出。

Alexa 技能活動(dòng)

技能事件API允許技能響應(yīng)更改或事件，而無需用戶直接與技能交互。例如，當(dāng)用戶啟用或禁用技能時(shí)，可以通知該技能。

當(dāng)用戶使用手機(jī)上的 Alexa 應(yīng)用程序啟用或禁用對(duì)其客戶資料信息的訪問時(shí)，Speed Tap 使用 Skill Events API 立即做出響應(yīng)。收到此事件后，Speed Tap 會(huì)立即調(diào)用 API 獲取用戶姓名，因此無需用戶再次玩游戲即可更新排行榜。

用戶體驗(yàn)

語音應(yīng)用程序的用戶體驗(yàn)至關(guān)重要且微妙。與網(wǎng)絡(luò)和移動(dòng)等顯示媒體不同，音頻需要更長的時(shí)間來呈現(xiàn)信息，并且用戶無法處理選項(xiàng)列表或掃描屏幕以了解他們下一步想做什么。

Speed Tap 實(shí)施了許多改進(jìn)用戶體驗(yàn)的方法，這些方法雖然不那么明顯，但卻產(chǎn)生了很大的不同。

共享的全球經(jīng)驗(yàn)

與移動(dòng)應(yīng)用程序不同，大多數(shù) Alexa 游戲都是單人游戲，不與其他玩家社區(qū)互動(dòng)。用戶是孤立的，通常玩游戲是為了個(gè)人高分或自己探索游戲。

但是……和別人一起玩游戲更有趣！

Speed Tap 朝著這個(gè)方向邁出了獨(dú)特的一步，讓玩家可以看到他們的分?jǐn)?shù)與其他人的比較情況。網(wǎng)站上的排行榜列出了每個(gè)玩家的個(gè)人最高分以及他們用了多少次連續(xù)得分來達(dá)到這一目標(biāo)。添加你的真實(shí)姓名的能力讓你有吹牛的權(quán)利，看看你是否在打敗你的朋友。

玩家知道什么與實(shí)際上是什么？

為用戶提供相關(guān)信息的一個(gè)重要部分是跟蹤他們所知道的，而不是實(shí)際情況。

在 Speed Tap 中，這與世界紀(jì)錄有關(guān)。當(dāng)用戶玩游戲時(shí)，他們可能會(huì)被告知當(dāng)前的世界紀(jì)錄是 25 次點(diǎn)擊。但下次他們比賽時(shí)，世界紀(jì)錄可能會(huì)增加到 30，他們很想知道。

懶人技能只會(huì)在用戶每次開始游戲時(shí)告訴用戶世界紀(jì)錄。但為了獲得更好的體驗(yàn)，該技能需要知道用戶上次被告知的世界紀(jì)錄是什么，并且只有在更改時(shí)才告訴他們。通過這種方式，他們可以獲得他們想要的信息，但如果相同，則不必每次都被迫忍受關(guān)于當(dāng)前世界紀(jì)錄的相同句子。

Speed Tap 通過保留兩個(gè)獨(dú)立的數(shù)據(jù)區(qū)域來跟蹤此類事件。一個(gè)保存當(dāng)前的真實(shí)信息（例如當(dāng)前的世界紀(jì)錄和持有者），而另一個(gè)保存相同的信息，但處于用戶最后知道的狀態(tài)。然后將這些進(jìn)行比較以確定應(yīng)該告訴用戶什么。代碼如下所示：

sayif `Your high score is ${user.high_score} `;
// Check to see if there is a new world record to inform the user about
if (game.world_record) {
 if (user.world_record && user.world_record < game.world_record) {
   say `and there is a new world record. The highest score is now ${game.world_record}`;
 }
 else if (game.world_record_user && game.world_record_user===request.data.session.userId) {
   say `and you still hold the world record`;
 }
 else {
   say `and the world record is ${game.world_record}`;
 }
 user.world_record = game.world_record;
}

增量體驗(yàn)/會(huì)話跟蹤

由于用戶會(huì)多次玩游戲，因此不應(yīng)每次都向他們展示冗長的音頻介紹。當(dāng)他們多次使用特性時(shí)，不應(yīng)該要求他們?nèi)淌軐?duì)他們已經(jīng)理解的東西的解釋。

出于這個(gè)原因，跟蹤用戶與技能交互時(shí)的體驗(yàn)對(duì)于技能來說很重要，這樣技能就知道何時(shí)可以縮短交互。這正是人類所做的，通過這樣做，一項(xiàng)技能似乎更自然。

Speed Tap 為每個(gè)用戶保留一個(gè)“體驗(yàn)”對(duì)象，該對(duì)象隨依賴于它的每種交互類型進(jìn)行更新。然后，根據(jù)用戶當(dāng)前的體驗(yàn)水平更改輸出。下面是一些示例代碼：

// Open with a more different intro depending on how often the user has played
if (request.experience("session_count",false) <= 1) {
 say `Welcome to ${speedtap}. This is a game of quick reactions and concentration. Would you like to hear a quick explanation of how to play?`;
}
else {
 if (request.experience("session_count",false) < 4) {
   say `Welcome back to ${speedtap}.`;
 }
 else {
   response.say(`Welcome back.`);
 }
} 

experience 對(duì)象還用于確定是否應(yīng)該給出有關(guān)排行榜如何工作、所需權(quán)限等的解釋。

隨機(jī)輸出

一遍又一遍重復(fù)相同輸出的技能變得非常重復(fù)并且感覺不自然。至少隨機(jī)化部分輸出很重要，這樣技能就不會(huì)感覺那么“僵硬”。

對(duì)于 Speed Tap，簡(jiǎn)單的隨機(jī)化是使用我在其他技能中實(shí)施的文本后處理技術(shù)完成的。

輸出文本時(shí)，{braces} 可以放在作為隨機(jī)同義詞候選詞的任何單詞或短語周圍。然后，創(chuàng)建一個(gè)可能的同義詞列表，并在輸出字符串中僅使用主鍵。單詞會(huì)自動(dòng)隨機(jī)化，使技能感覺更自然，不那么機(jī)械化。

// The synonym list
const outputSynonyms = {
 "Okay, ": ["Okay, ","Alright, ",""]
};
// A method in the response object
"randomizeSynonyms": function(synonyms) {
 try {
   let ssml = this.response.response.outputSpeech.ssml;
   ssml = ssml.replace(/\{([^\}]+)\}/g, function (m, m1) {
     if (synonyms && synonyms[m1]) {
       let s = synonyms[m1];
       if (s.length) {
         // simple array of synonyms
         return s[Math.floor(Math.random() * s.length)];
       }
     }
     return m1;
   });
   this.response.response.outputSpeech.ssml = ssml;
 } catch(e) { }
}
// Example
response.say("{Okay, }let's play."); // Could be: "Alright, let's play" or "let's play" 
// Randomize synonyms in the output during app.post()
response.randomizeSynonyms(outputSynonyms);

執(zhí)行

本節(jié)將深入探討該技能的實(shí)現(xiàn)細(xì)節(jié)，并展示演示每種功能如何實(shí)現(xiàn)的代碼片段。

觸發(fā)切換

Lambda 函數(shù)需要根據(jù)它是從 CloudWatch Events（更新排行榜）還是從 Alexa 觸發(fā)而表現(xiàn)不同。Lambda 函數(shù)處理程序使用以下代碼進(jìn)行切換：

// connect to lambda
exports.handler = function(event, context, callback) {
 if (event && "aws.events"===event.source) {
   // Scheduled Event!
   app.scheduled(event).then((response)=>{
     callback(null,response);
   }).catch((e)=>{
     callback(e);
   });
 }
 else {
   // Alexa Request
   log("Alexa Request");
   app.handler(event, context, callback);
 }
}; 

按鈕偵聽器事件

技能使用 Gadgets API 監(jiān)聽按鈕事件。該技能返回一個(gè)指令，定義觸發(fā)技能的確切條件。這是一個(gè)示例按鈕偵聽器指令，它將導(dǎo)致在按下按鈕或超時(shí)時(shí)調(diào)用技能。

{
 "type" : "GameEngine.StartInputHandler",
 "timeout" : 25000,
 "proxies" : ["button"],
 "recognizers" : {
   "button_down_recognizer" : {
     "type" : "match",
     "anchor" : "end",
     "fuzzy" : false,
     "pattern" : [{
         "action" : "down"
       }
     ]
   }
 },
 "events" : {
   "button_down_listener" : {
     "meets" : ["button_down_recognizer"],
     "reports" : "matches",
     "shouldEndInputHandler" : true
   },
   "timeout" : {
     "meets" : ["timed out"],
     "reports" : "history",
     "shouldEndInputHandler" : true
   }
 }
} 

光指令

有幾種不同格式的 GadgetController.SetLight 指令可以根據(jù)按鈕的狀態(tài)更改按鈕的顏色。API 文檔詳細(xì)介紹了這些狀態(tài)是什么以及它們?nèi)绾喂ぷ鳌?/font>

{
 "type" : "GadgetController.SetLight",
 "version" : 1,
 "targetGadgets" : [],
 "parameters" : {
   "triggerEvent" : "none",
   "triggerEventTimeMs" : 0,
   "animations" : [
     {
       "repeat" : 255,
       "targetLights" : ["1"],
       "sequence" : [{
           "durationMs" : 1000,
           "blend" : false,
           "color" : "0000FF"
         }, {
           "durationMs" : 1000,
           "blend" : false,
           "color" : "FFA500"
         }, {
           "durationMs" : 1000,
           "blend" : false,
           "color" : "FF0000"
         }, {
           "durationMs" : 1000,
           "blend" : false,
           "color" : "FF00FF"
         }, {
           "durationMs" : 1000,
           "blend" : false,
           "color" : "00FF00"
         }
       ]
     }
   ]
 }
}

async function persist_user(persist_game_state) {
 // Persist user session back to db if it has changed
 if (user) {
   let u = JSON.parse(JSON.stringify(user));
   if (!persist_game_state) {
     delete u.round;
     delete u.lives_used;
     delete u.state;
     delete u.buttonConnected;
   }
   delete u.game;
   delete u.listenerRequestId;
   await ddb.put(app.user_persistence_table, u);
 }
}

'get': async function(table, keyAttribute, keyValue) {
 let params = {TableName:table, Key:{ [keyAttribute]:keyValue } };
 return docClient.get(params).promise()
   .then( (item)=> {
     if (!item || !item.Item) { return null; }
     return item.Item;
   });
}

if (round===1 && request.experience('intro_1')) {
 say `That was easy, but now the lights will get a little faster every round. How far can you go? Keep going.`;
}
else if (round===1) {
 say `Nice, Keep going.`;
}

let coins=1;
say `There {are} ${coins} coin{s} left.`;

"There is 1 coin left."

"There are 2 coins left."

app.intentMap({
 "continue": {
   [YES]: async()=>{
     await continue_game();
   }
   ,[NO]: async()=>{
     await end_game();
   }
 }
});

{
 'type': 'Connections.SendRequest',
 'name': 'Buy',
 'payload': {
   'InSkillProduct': {
     'productId': "XYZ"
   }
 },
 'token': "arbitrary-token"
}

app.on('AlexaSkillEvent.SkillPermissionAccepted', async()=>{
 try {
   let user_id = request.data.context.System.user.userId;
   user = await ddb.get(app.user_persistence_table, "userid", user_id);
   let name = await app.api("/v2/accounts/~current/settings/Profile.name");
   user.name = name;
   user.linked = true;
   await persist_user();
 } catch(e) {
   console.log(e.message);
 }
});

      "subscriptions": [
       {
         "eventName": "SKILL_PERMISSION_ACCEPTED"
       },
       {
         "eventName": "SKILL_PERMISSION_CHANGED"
       }
     ]

function display_splash_screen(request,response) {
 if (has_display(request)) {
   response.directive({
     "type" : "Display.RenderTemplate",
     "template" : {
       "type" : "BodyTemplate1",
       "backButton" : "HIDDEN",
       "backgroundImage" : {
         "contentDescription" : "",
         "sources" : [{
           "url" : "https://alexaspeedtap.com/splash.jpg",
           "size" : "MEDIUM"
         },{
           "url" : "https://alexaspeedtap.com/splash-square.jpg",
           "widthPixels":640,
           "heightPixels":640
         }
         ]
       }
     }
   });
 }
}

const has_display = function(request) {  try {    return !!request.data.context.System.device.supportedInterfaces.Display;  }  catch(e) { return false; }}; 

const putObjectToS3 = async function (o,filename) {
 let s3 = new AWS.S3({'region': 'us-east-1'});
 let params = {
   Bucket: "alexa-speed-tap",
   Key: filename,
   Body: JSON.stringify(o),
   ContentType: "application/json",
   CacheControl: "no-cache",
   ACL: "public-read"
 };
 return s3.putObject(params).promise();
}; 

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
   <AllowedOrigin>*AllowedOrigin>
   <AllowedMethod>GETAllowedMethod>
   <MaxAgeSeconds>3000MaxAgeSeconds>
   <AllowedHeader>*AllowedHeader>
CORSRule>
CORSConfiguration>