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

*爱你&永不变心* 提交于 2021-01-23 00:53:06

第一关:友和敌

// 农民和差役聚集在森林里。
// 命令农民战斗,差役滚开!
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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!