第一關：友和敵
// 農民和差役聚集在森林里。 // 命令農民戰斗，差役滾開！ while (true) { var friend = hero.findNearestFriend(); if (friend) { hero.say("去戰斗, " + friend.id + "!"); } // 尋找最近的敵人，然后讓他們滾開。 var enemy = hero.findNearestEnemy(); if (enemy) { hero.say("滾開," + enemy.id + "!"); } }
涉及的JavaScript知識點：
1.JavaScript 字符串：JavaScript 字符串用於存儲和處理文本；字符串可以存儲一系列字符；字符串可以是插入到引號中的任何字符，可以使用單引號或雙引號。本關中運用ID屬性將敵人名字與另一個字符串連接（"滾開," + enemy.id + "!"）。
2.JavaScript運算符：運算符 = 用於賦值，運算符 = 用於給 JavaScript 變量賦值。運算符 + 用於加值，算術運算符 + 用於把值加起來。
3.用於字符串的 + 運算符：+ 運算符用於把文本值或字符串變量加起來（連接起來）。如需把兩個或多個字符串變量連接起來，使用 + 運算符。
4.JavaScript變量：變量是用於存儲信息的"容器"。JavaScript 變量可用於存放值（比如 x=5）和表達式（比如 z=x+y）。變量可以使用短名稱（比如 x 和 y），也可以使用描述性更好的名稱。在 JavaScript 中創建變量通常稱為"聲明"變量，使用 var 關鍵詞來聲明變量，變量聲明之后，該變量是空的（它沒有值）。如需向變量賦值，使用等號，也可以在聲明變量時對其賦值。
5.JavaScript變量命名規則：
⑴變量命名必須以字母、下划線”_”或者”$”為開頭。其他字符可以是字母、_、美元符號或數字。
⑵變量名中不允許使用空格和其他標點符號，首個字不能為數字。
⑶變量名長度不能超過255個字符。
⑷變量名區分大小寫。(javascript是區分大小寫的語言)。
⑸變量名必須放在同一行中。
⑹不能使用腳本語言中保留的關鍵字、保留字、true、false 和 null 作為標識符。
6.JavaScript的if語句：只有當指定條件為 true 時，該語句才會執行代碼。語法：if (condition){當條件為 true 時執行的代碼}。使用小寫的 if，使用大寫字母（IF）會生成 JavaScript 錯誤！
7.JavaScript輸出：JavaScript 能夠以不同方式“顯示”數據：
⑴使用 window.alert() 寫入警告框
⑵使用 document.write() 寫入 HTML 輸出
⑶使用 innerHTML 寫入 HTML 元素
⑷使用 console.log() 寫入瀏覽器控制台
第二關：似曾相識的味道
// 你可以把字符串連起來，或者把數字連接到字符串。 // 一起唱歌，使用字符串連接： // X potions of health on the wall! // X potions of health! // Take Y down, pass it around! // X-Y potions of health on the wall. var potionsOnTheWall = 10; var numToTakeDown = 1; while (true) { hero.say(potionsOnTheWall + " potions of health on the wall!"); // 唱出下一句： hero.say(potionsOnTheWall + "potions of health!"); // 唱出下一句： hero.say("Take" + numToTakeDown + "down,pass it around!"); potionsOnTheWall -= numToTakeDown; // 唱出最后一句： hero.say(potionsOnTheWall + "potions of health on the wall."); }
涉及JavaScript的知識點：
字符串連接的方法：
⑴concat()：連接兩個字符串返回一個新字符串，並且不會被修改
⑵slice()：根據索引值和索引值截取字符串
⑶substr()：根據索引值和長度截取字符串
⑷substring()：根據索引和索引值截取字符串
第三關：罪與罰
// 看起來食人魔酋長正在偷你的寶石啊！ // 指揮兩門火炮攻擊敵人達成目標。 while (true) { var enemy = hero.findNearestEnemy(); if (enemy) { var enemyPos = enemy.pos.x + " " + enemy.pos.y; hero.say("敵人的位置在： " + enemyPos); } // 現在你遇到寶石攻擊了 // 為什么不把寶石也拿走呢？ // 找到寶石的位置並且 // 說出它作為火炮的目標。 var item = hero.findNearestItem(); if (item) { var itemPos = item.pos.x + "" + item.pos.y; hero.say("寶石的位置在：" + itemPos); } }
涉及JavaScript的知識點：
1.字符串連接可以在同一行中連接多個字符串。"Hello" + " " + "World" + "!" 結果等價於 "Hello World!"
2.While(true)無限循環：while(true)作為無限循環，經常在不知道循環次數的時候使用，並且需要在循環內使用break才會停止。此循環的下面不能放任何的代碼，因為永遠不會被執行。
第四關：巫師之門
// 去'Laszlo'那里，並獲得他的神秘數字。 hero.moveXY(30, 13); var las = hero.findNearestFriend().getSecret(); // 用'Laszlo'的數字加7，得到'Erzsebet'的數字。 // 去'Erzsebet'那里，並說出她的魔法數字。 var erz = las + 7; hero.moveXY(17, 26); hero.say(erz); // 將'Erzsebet'的數字除以4，得到'Simonyi'的數字。 // 去'Simonyi'那里，並告訴他他的數字。 var sim = erz / 4; hero.moveXY(30, 39); hero.say(sim); // 將'Simonyi'的數字乘以'Laszlo'的數字，得到'Agata'的數字。 // 去'Agata'那里，並告訴她她的數字。 var age = sim * las; hero.moveXY(43, 26); hero.say(age);
涉及JavaScript的知識點：
JavaScript算術運算符：
⑴涉及的相關運算符：
⑵運算符優先級：描述了在算術表達式中所執行操作的順序。乘法（*）和除法（%）比加法（+）和減法（-）擁有更高的優先級。同時，能夠通過使用括號來改變優先級：當多個運算擁有相同的優先級時（比如加法和減法），對它們的計算是從左向右的。
⑶在JavaScript中，等號（=）代表賦值符號，它在js運算中是最低等級的，一般都是先計算右邊的式子，在進行賦值運算，也就是說，把右邊的結果賦值給左邊。
第五關：巫師出沒
// 移動到'Zsofia'的身邊，從她那里得到秘密數字。 hero.moveXY(18, 20); var zso = hero.findNearestFriend().getSecret(); // 將'Zsofia'的數字除以 4 來得到'Mihaly'的數字。 // 移動到'Mihaly'並說出他的魔法數字。 var mih = zso / 4; hero.moveXY(30, 15); hero.say(mih); // 把'Mihaly'的數字除以 5 來得到'Beata'的數字 // 移動到'Beata'並說出她的魔法數字。 var bea = mih / 5; hero.moveXY(42, 20); hero.say(bea); // 用'Mihaly'的數字減去'Beata'的數字，來得到 Sandor 的數字。 // 移動到'Sandor' 並說出他的魔法數字。 var san = mih - bea; hero.moveXY(38, 37); hero.say(san);
涉及JavaScript的知識點：
這里面涉及了算術運算方面的除法運算
第六關：巫師天際層
// 移動到'Eszter'並從她那里得到神秘數字。 hero.moveXY(16, 32); var esz = hero.findNearestFriend().getSecret(); // 乘以3，減去2，得到'Tamas'的數字。 // 記住使用括號來確保計算順序正確。 // 移到'Tamas'並說出他的魔法數字。 var tam = esz * 3 - 2; hero.moveXY(24, 28); hero.say(tam); // 然后繼續 減去1然后乘4得到'Zsofi'的數字 // 移到'Zsofi'並說出她的魔法數字。 var zso = (tam - 1) * 4; hero.moveXY(32, 24); hero.say(zso); // 先將'Tamas'和'Zsofi'的數字相加，然后除以2得到'Istvan'的數字。 // 移到'Istvan'並說出他的魔法數字。 var its = (tam + zso) / 2; hero.moveXY(40, 20); hero.say(its); // 先將'Tamas'和'Zsofi'的數字相加，然后用'Zsofi'的數字減去'Istvan'的數字，再將兩個結果相乘得到'Csilla'的數字。 // 移動到'Csilla'並說出她的魔法數字。 var csi = (tam + zso) * (zso - its); hero.moveXY(48, 16); hero.say(csi);
涉及JavaScript的知識點：
這個關卡涉及到算術運算符中的加法，乘法，減法和優先級相關的知識點。
第七關：幣屑
// 跟隨硬幣的軌跡來到紅色 X 標記的出口。 while (true) { // 這能找到最近的物品。 var item = hero.findNearestItem(); if (item) { // 這將物品的pos，也就是坐標，存儲在變量中。 var itemPosition = item.pos; // 將物品的 X 和 Y 坐標存入變量。 var itemX = itemPosition.x; var itemY = itemPosition.y; // 現在，使用moveXY移動到itemX和itemY： hero.moveXY(itemX, itemY); } }
涉及JavaScript的知識點：
1.while無限循環
2.if條件語句
3.JavaScript坐標：可以參考這些人的博客，更加詳細的了解相關的知識
⑴阮一峰：http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html
⑵簡書：https://www.jianshu.com/p/ae74594dd9ba
⑶博客園：https://www.cnblogs.com/woodyliang/p/6497554.html
⑷博客園：https://www.cnblogs.com/asqq/archive/2012/04/19/2456927.html
4.游戲地圖中表示位置的兩個數字：x坐標和y坐標。
⑴x是表示左右的橫坐標。
⑵y是表示上下的縱坐標。
⑶向右運動時，x數值會增大。 向左運動時，x數值會減小。
⑷向上運動時，y數值會增大。 向下運動時，y數值會減小。
⑸地圖的左下角坐標是0, 0(x和y皆為0)。
第八關：白兔
// 跟隨發光石通過陷阱。 while (true) { var item = hero.findNearestItem(); if (item) { // 使用 item.pos 將物品位置保存到一個新的變量中： var itemPosition = item.pos; // 使用 pos.x 和 pos.y 保存X和Y坐標： var itemX = itemPosition.X; var itemY = itemPosition.Y; // 使用 moveXY() 和 變量X、Y移動至坐標： if (item) { hero.moveXY(item.pos.x, item.pos.y); } } }
涉及JavaScript的知識點：
變量，輸出，位置，while循環，if條件語句
第九關：偽裝者
// 食人魔偽裝成了硬幣或者寶石！ while (true) { var enemy = hero.findNearestEnemy(); // 如果你看見了敵人，攻擊它： if (enemy) { hero.attack(enemy); } var item = hero.findNearestItem(); // 如果你看見硬幣或者寶石，移動到它的X和Y坐標： if (item) { hero.moveXY(item.pos.x, item.pos.y); } }
相關的知識點同上，這關就是在重復練習相關的知識點，以便更加熟練地應用
第十關：邊地投彈
// pos屬性是一個具有x和y屬性的對象。 // pos.x是代表地圖上水平位置的數字 // pos.y是代表地圖上豎直位置的數字 while (true) { var enemy = hero.findNearestEnemy(); if (enemy) { var x = enemy.pos.x; // 得到敵人的y位置！ var pos = enemy.pos; var y = pos.y; // ∆ 更改這個！ // 說出x和y位置，用逗號隔開 hero.say(x + ',' + y); } else { hero.say("停止" + " " + "開火！"); } }
涉及JavaScript的知識點：
1.if...else語句：
⑴ if....else 語句在條件為 true 時執行代碼，在條件為 false 時執行其他代碼。
⑵語法：
if (condition) { 當條件為 true 時執行的代碼 } else { 當條件不為 true 時執行的代碼 }
2.JavaScript對象：對象是擁有屬性和方法的數據。
⑴對象定義：可以使用字符來定義和創建 JavaScript 對象，定義 JavaScript 對象可以跨越多行，空格跟換行不是必須的。
⑵對象屬性：通常認為 "JavaScript 對象是鍵值對的容器"。鍵值對通常寫法為 name : value (鍵與值以冒號分割)。鍵值對在 JavaScript 對象通常稱為 對象屬性。
⑶對象方法：對象的方法定義了一個函數，並作為對象的屬性存儲。對象方法通過添加 () 調用 (作為一個函數)。
⑷訪問對象方法：常用的兩種方法：
①語法1：objectName.methodName()
②語法2：methodName : function() { code lines }
⑸訪問對象屬性：方式如下
①方式1：objectName.propertyName
②方式2：objectName["propertyName"]
第十一關：叫陣
// 只有當 if 條件為真的時候，if 語句下面的命令才會執行。 // 在條件中，==表示"等於"。 if (2 + 2 == 4) { hero.say("嘿！"); } if (2 + 2 == 5) { hero.say("是的，你！"); } // 改變這里的條件，讓英雄說 來打我啊！ if (3 + 3 == 6) { // ∆ 讓這個成立。 hero.say("來打我啊！"); } if (2 == 2) { // ∆ 讓這個成立。 // 再添加一句嘲諷來引誘食人魔，來點有創意的！ hero.say("你個廢物！"); }
涉及JavaScript的知識點：
比較運算符
比較運算符在邏輯語句中使用，以測定變量或值是否相等。
⑴下面是比較運算符的運算符表
⑵用處：可以在條件語句中使用比較運算符對值進行比較，然后根據結果來采取行動
第十二關：瀕危樹瘤之戰
// 只攻擊"thrower"和"munchkin"兩種類型的敵人。 // 別攻擊"burl"，遇到"ogre"快跑！ while (true) { var enemy = hero.findNearestEnemy(); // 記住：別攻擊"burl"類型！ if (enemy.type == "burl") { hero.say("我不攻擊樹榴！"); } // "type"屬性告訴你對象是什么類型。 if (enemy.type == "munchkin") { hero.attack(enemy); } // 使用"if"來來攻擊"thrower"。 if (enemy.type == "thrower") { hero.attack(enemy); } // 如果是"ogre"，使用moveXY逃跑去村口！ if (enemy.type == "ogre") { hero.moveXY(40, 47); } }
重復練習比較運算符
第十三關：嘲弄
// 攻擊矮人，呼叫斗士，忽略樹精。 // 這個函數定義了英雄對敵人采取的行動。 function dealEnemy(enemy) { // 如果敵人的類型是"munchkin"： if (enemy.type == "munchkin") { // 那么就攻擊它： hero.attack(enemy); } // 如果敵人的類型是"brawler"： if (enemy.type == "brawler") { // 那么就說些什么來呼叫斗士： hero.say("救我！"); } } while (true) { var enemy = hero.findNearestEnemy(); if (enemy) { dealEnemy(enemy); } else { hero.moveXY(30, 34); } }
涉及JavaScript的知識點：
JavaScript函數
⑴函數是由事件驅動的或者當它被調用時執行的可重復使用的代碼塊。
⑵語法：
function name(參數 1, 參數 2, 參數 3) {
要執行的代碼
}
①JavaScript 函數通過 function 關鍵詞進行定義，其后是函數名和括號 ()。
②函數名可包含字母、數字、下划線和美元符號（規則與變量名相同）。
③圓括號可包括由逗號分隔的參數，由函數執行的代碼被放置在花括號中：{}
⑶函數調用：函數中的代碼將在其他代碼調用該函數時執行
①當事件發生時（當用戶點擊按鈕時）；
②當 JavaScript 代碼調用時；
③自動的（自調用）；
⑷函數返回：
①當 JavaScript 到達 return 語句，函數將停止執行。
②如果函數被某條語句調用，JavaScript 將在調用語句之后“返回”執行代碼。
③函數通常會計算出返回值。這個返回值會返回給調用者
第十四關：樹精樹林
// 不要攻擊樹精！ // 函數可以返回一個值。 // 當函數被調用時，它將等於函數返回的值。 function shouldAttack(target) { // return false 如果沒有`target` if (!target) { return false; } // return false 如果target.type == "burl" if (target.type == "burl") { return false; } // 否則 return true return true; } while (true) { var enemy = hero.findNearestEnemy(); // 在這里，我們使用shouldAttack()來決定是否應該進行攻擊！ // heroShouldAttack將被賦值為shouldAttack()返回的值！ var heroShouldAttack = shouldAttack(enemy); if (heroShouldAttack) { hero.attack(enemy); } }
對函數的相關練習，更加深刻的理解函數的返回
第十五關：盲距
// 告訴巫師，來襲食人魔的距離。 // 這個函數尋找最近的敵人，並返回距離。 function nearestEnemyDistance() { var enemy = hero.findNearestEnemy(); // 如果沒有敵人，則該函數返回0。 var result = 0; if (enemy) { result = hero.distanceTo(enemy); } return result; } while (true) { // 調用nearestEnemyDistance()並 // 將結果保存在變量enemyDistance中。 var enemyDistance = nearestEnemyDistance(); // 如果enemyDistance大於0： if (enemyDistance > 0) { // 說出enemyDistance變量的值。 hero.say(enemyDistance); } }
涉及JavaScript的知識點：
函數與變量
⑴用作變量值的函數：函數的使用方法與變量一致，在所有類型的公式、賦值和計算中。
⑵局部變量：
①在 JavaScript 函數內部聲明的變量（使用 var）是局部變量，所以只能在函數內部訪問它。（該變量的作用域是局部的）。
②可以在不同的函數中使用名稱相同的局部變量，因為只有聲明過該變量的函數才能識別出該變量。
③只要函數運行完畢，本地變量就會被刪除。
⑶全局變量：在函數外聲明的變量是全局變量，網頁上的所有腳本和函數都能訪問它。
⑷變量的生存期：
①JavaScript 變量的生命期從它們被聲明的時間開始。
②局部變量會在函數運行以后被刪除。
③全局變量會在頁面關閉后被刪除。
第十六關：固定打擊
// 你掉進陷阱里了！別動！你會受傷的！
// 這個函數檢查敵人是否在攻擊范圍內。
function inAttackRange(enemy) {
var distance = hero.distanceTo(enemy);
// 幾乎所有劍的攻擊范圍都是3。
if (distance <= 3) {
return true;
} else {
return false;
}
}
// 只有在觸手可及的范圍內才能攻擊食人魔。
while (true) {
// 找到最近的敵人，並將其儲存在一個變量中。
var enemy = hero.findNearestEnemy();
// 調用inAttackRange(enemy)，將enemy作為參數
// 把結果保存於canAttack變量中
var canAttack = inAttackRange(enemy);
// 如果存儲在canAttack中的結果是 true, 則發起攻擊！
if (canAttack) {
hero.attack(enemy);
}
}
涉及JavaScript的知識點：
1.邏輯運算符
2.數據類型：
⑴值類型(基本類型)：字符串（String）、數字(Number)、布爾(Boolean)、對空（Null）、未定義（Undefined）、Symbol（Symbol 是 ES6 引入了一種新的原始數據類型，表示獨一無二的值。）
⑵引用數據類型：對象(Object)、數組(Array)、函數(Function)。
⑶布爾（邏輯）只能有兩個值：true 或 false。
第十七關：金幣獵手
// 為了讓訓練更有趣，Senick給你下了毒。
// 當你不移動時，毒是無害的。
// 該函數會檢查硬幣的距離是否小於20米。
function isCoinClose(coin) {
// 確定與`coin`之間的距離。
var distance = hero.distanceTo(coin);
// 如果距離小於20：
if (distance < 20) {
// 返回 true
return true;
} // 否則：
else {
// 返回 false
return false;
}
}
while (true) {
var item = hero.findNearestItem();
if (item) {
// 如果isCoinClose(item)返回true：
if (isCoinClose(item)) {
hero.moveXY(item.pos.x, item.pos.y);
}
}
}
涉及JavaScript的知識點：
1.函數的相關知識
2.分析游戲中返回的的信息
⑴函數可以返回一個值給函數調用的位置。
⑵你會經常用到函數返回值：var enemy = hero.findNearestEnemy();
hero.findNearestEnemy()的返回值賦值給了變量enemy。
⑷你寫的函數也能返回值，這要用到return關鍵字，注意：return會立刻跳出函數，並將值返回給調用程序。
3.分析游戲中函數的知識
⑴編寫一個函數來確定是否應該移動到某枚硬幣：
⑵coin被作為參數傳入：
function isCoinClose(coin) {
如果硬幣很近則返回true；
否則返回false；}
第十八關：返回Agrippa
function enemyInRange(enemy) {
// 如果敵人的距離少於5米，則返回True值。
var distance = hero.distanceTo(enemy);
if (distance < 5) {
return true;
}
return false;
}
function cleaveOrAttack(enemy) {
if (hero.isReady("cleave")) {
hero.cleave(enemy);
} else {
hero.attack(enemy);
}
}
while (true) {
var enemy = hero.findNearestEnemy();
if (enemy) {
// 調用 enemyInRange 來檢查敵人的距離。
if (enemyInRange(enemy)) {
cleaveOrAttack(enemy);
}
}
}
涉及JavaScript的知識點：
定義一個函數
⑴函數具有函數名和函數體。
⑵函數體內的代碼只會在函數被調用時才會運行。
⑶如下是定義和調用函數的方式：
//函數名為myFunction function myFunction{ //這是函數體 //這里的命令只會在函數被調用時運行 hero.say("myFunction被調用了！"); } //這里不再處於函數體內部 //這一行調用了函數，名為"myFunction" myFunction();
第十九關：金屬探測器
// 大炮以硬幣作為目標。 // 你就像是炮兵的測距儀。 // 編寫函數。 function coinDistance() { // 找到最近的硬幣， var coin = hero.findNearestItem(); // 如果有一枚硬幣，返回到它的距離。 if (coin) { var distance = hero.distanceTo(coin); return distance; } // 否則，返回0（零）。 else { return 0; } } while (true) { var distance = coinDistance(); if (distance > 0) { // 說`distance`。 hero.say(distance); } }
涉及JavaScript的知識點：
if…else if…else語句
⑴規則：當該語句執行時，會從上到下對條件表達式進行求值判斷
⑵如果值為true，則執行當前語句
⑶如果值為false，則繼續向下判斷
⑷如果所有條件都不滿足，則執行else后面的語句
⑸在該語句中只有一個代碼塊會被執行，一旦代碼塊執行了，則直接結束語句
第二十關：穿越
// 不要侮辱這個和平食人魔部落 while (true) { var item = hero.findNearestItem(); if (item) { // 如果item.type不等於 "gem" if (item.type != "gem") { // 然后跟隨你的寵物。 hero.moveXY(pet.pos.x, pet.pos.y); } // 否則: else { // 移動到寶石的坐標。 hero.moveXY(item.pos.x, item.pos.y); } } }
涉及JavaScript的知識點：
if語句的嵌套：注意包含關系，數清楚"{ }"哦~~
以上就是第三大關的前20個小關卡的相關代碼攻略和涉及的相關JavaScript知識點
后面的關卡中有一些很讓人無奈的細節知識，一定要仔細仔細再仔細的閱讀提示里面的話，每一句都是精華，仔細品一品，嘗試着編寫和運行，后面有一關很像腦筋急轉彎呢，我是嘗試着讓我的英雄躺屍幾次后才拯救了她，下篇博客分享相關的有趣體驗哦~~~