网易极客战记官网codecombat|当算法进入游戏，解开用代码画画的奥秘！

什么是算法？

算法二字看起来玄而又玄，许多初入门的编程新手更是始终摸不清算法的门道，但其实，算法并没有你们想像的那么复杂玄奥。

百科对算法的解释为：算法（Algorithm）是指解题方案的准确而完整的描述，是一系列解决问题的清晰指令，算法代表着用系统的方法描述解决问题的策略机制。

总的来说，能够输入并且输出的东西就叫做算法。

例如：冒泡排序法，递归法，或者是一些计算幂，计算角度绘制圆形的代码函数也都能称之为算法。

难一点的还有离散数学里的Kruskal算法、霍夫曼算法等等。

我们常常使用一些现有完善的算法思想来帮助我们完成一些编程任务，而在极客战记里也是，从沙漠开始，关卡里就开始或多或少地出现一些算法，而由于关卡主要是为了对其它知识的教学，也没有对这些算法进行解析，只是让用户自行体会。

因此今天我们就给大家解析解析极客战记里面几个有意思的算法。

画圆画方的几何算法

说到有意思，最值得一提的应该就是山峰关卡「花的几何学」里用于绘画的几何算法了。

我们曾在《颠覆你对程序猿的印象，这是你从未见过的美丽》一文中提过在极客战记中绘图的乐趣，点击图片即可查看该文。

**算法名称：**画圆算法

算法代码：

算法解析：

画圆算法的代码并不长，但却不太好懂。

首先第一行定义函数，我们可以看到使用该函数，我们需要向内传递三个值，分别是圆的圆心xy坐标以及该圆的大小（半径）

hero.toggleFlowers(False)并不是算法的一部分，该代码只是花之戒的一个函数，用于关闭绘画功能，等到英雄走到正确的位置以后，再开启进行绘画。

主要我们来看下面的循环代码块。

该循环的条件:

angle<= Math.PI * 2

很好理解吧，Math.PI就是圆周率π。

那么Math.PI*2——2π是什么呢？

因为π=180°，那么2π就是360°啦。

该循环是将angle变量从0开始循环并自增，直至angle的值大于等于360°（画满一个圆），循环结束。

需要注意的是我们这里提到2π是360°是为了便于理解，实际上在代码运行的时候，π并不以角度运行，而是以弧度值的形式参与运行。

接下来的三行代码就是画圆的核心，我们知道绘画是让配备了花之戒的英雄通过走动来绘出图像，因此英雄移动的轨迹，就是画出的图形，所以在这里，我们创建了newX和newY两个每次循环都会产生改变的值。

在此时，x为之前我们传进来的圆心坐标，后面的括号内容是:圆的半径 * cos(角度)

随着每一次循环结束，angle变量自增产生改变，对应的Math.cos(angle)的值也会改变。

也许光看代码，很难以理解angle的改变为何能够使英雄画出一个圆，接下来我们用几幅图的形式来解释一下。

假如我们此时想要求圆上一点的坐标。

我们可以运用勾股定理。

若要求某点point1{x:34;y:44}的坐标，

我们可以通过圆心坐标的x加上x1,y加上y1来得到。

而x1和y1又怎么求呢？

根据勾股定理：正弦值= 对边/斜边.

此时对边是y1，斜边是size，角度是angle.

因此y1= sin（angle）*size。

用代码来显示的话：

newY = y + (size * Math.sin(angle))

就是这样啦~

接下来随着angle变量的自增至360°，一个圆形就画好啦！

**算法名称：**画方算法

算法代码:

算法解析：

画方算法的代码比画圆算法要长一些，看起来较为复杂，但实际上画方算法十分好理解。

定义函数的时候也是传入三个值：中心点的xy坐标和这个正方形的长。

画方形我们只需要确立四个顶点的坐标，然后让英雄依次走过即可。

顶点的坐标如何确立呢？同样我们用一幅图来解析：

如果我们要求左下红点的坐标，我们可以通过中心点的坐标x减去一半的边长，坐标y下降一半的边长，即：

newX= （x -size/2,y - size/2）

依此法便可写出让英雄依次走过四个顶点的代码：

这样一来，一个方形也画好啦！~

本攻略发于极客战记
极客战记——学编程，用玩的！