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