Codecombat 游戏攻略——JavaScript编辑语言——关卡（计算机科学三）Ⅰ

第一关：友和敌

// 农民和差役聚集在森林里。
// 命令农民战斗，差役滚开！
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知识点

后面的关卡中有一些很让人无奈的细节知识，一定要仔细仔细再仔细的阅读提示里面的话，每一句都是精华，仔细品一品，尝试着编写和运行，后面有一关很像脑筋急转弯呢，我是尝试着让我的英雄躺尸几次后才拯救了她，下篇博客分享相关的有趣体验哦~~~

 

参考：https://www.w3school.com.cn/index.html