关于Pond

Pond是一款可编程的对战类游戏，来自google团队，基于blockly-game构建,而blockly-game基于blockly，可以认为是利用blockly来构建游戏的脚手架，关于blockly可以参考我之前的文章:blockly入门与介绍

这个游戏的界面元素很简单

在一个池塘里，有4只鸭子(duck)，它们可以在池塘里游动(Swim),扫描周围的鸭子(Scan)，并发射大炮(Cannon)彼此攻击.

Swim、Scan、Cannon等策略都被封装为了blockly积木

通过拼搭blockly积木你将赋予鸭子以智慧让它闯荡江湖。

上手

上手这个游戏的最佳策略就是将入门关卡一一打通(和大多有趣的资源一样，你需要翻墙访问它)，一共是10个小关卡,每个关卡都会教会你鸭子的技能，这和大多数手游引导很像（没错,包括王者农药）

截图是入门引导的第一关，这一关里你将学会使用大炮技能，通过调整大炮的角度和射程，你将击中周围的鸭子

如果你不清楚新技能的使用，可以查看右下角的帮助文档

其他关卡就不一一介绍，教程设计得非常好，跟着打怪通关就行

开战

正式开战的时候，战场上有四只鸭子，你控制着左上角的小黄鸭。右边是编辑区域，你可以在其中使用blockly积木块来编辑你的战术，当然你也可以直接手写代码来编写战术

我们来看下我们的鸭子从战五渣到屌屌哒的转变历程

首先是呆如可达鸭的版本，只发射一枚大炮，之后呆呆地啥也不干

不出所料，一会儿就阵亡了

接着我们让我们的鸭子扫描周围，如果有敌人进入，就打它

哎依然活不久，细心的你可能发现， 那只小黑鸭非常聪明，它像狙击手一样(这也正是它的名字)，躲得远远的打一下就跑,电视里的狙击手要是呆着不动的话，活不过第一集的

最后我们放一个能干翻所有电脑玩家的小黄鸭

对战平台

基于Pond可以构建一个对战平台（适合K12/STEM教育），参赛选手们用积木块为自己的参赛鸭子构建战斗策略（就在当前的测试环境里构建即可），完成之后提交到平台上，之后平台随机将选手分为四人一组，展开战斗,每轮中的获胜者继续分组，如此循环，可以得到各自的名次

至于对战平台的技术架构，非常简单，将用户提交的作战策略generate为文本/代码，之后序列化它，存储下来,后台做好分组，在比赛的时候，加载出战略代码，反序列化，并运行它们，(每个分组可以是一个房间，通过url进入)，参赛选手可在每个房间里观看对战记录，当然他们肯定也会乐于分享给朋友一起看

所以这块后台就只要简单存储代码片段就行了 (积木到代码的转化参考blockly的文档)

教学相关

我在过去的半年，使用blockly主要是在做STEM教育项目，那么这个对战平台能承载哪些教学内容呢? 下边举几个例子

就编程教学而言，可以涵盖的话题很广，从编程的基本概念(序列/条件/循环)， 到具体的元素(变量/函数).另外值得一提的是，这些内容的教学是可选的，例如孩子们可以不必掌握函数来编写作战策略，可他们会发现，一旦他们掌握了函数，那么就可以利用这个新概念，构建更庞大的战略系统,而不会被庞大的代码压垮，同时他们也可能学会重用代码,他们会觉得函数不是一种学习负担，而是一个组织代码和思路的有力工具.

就数学而言，涵盖了角度、距离、坐标这些概念，和前边一样，不掌握这些概念，你也能参赛，掌握之后，你更容易制霸全场. 知识就是力量在这里显露无疑 (正式因为每个阶段学生的知识悬殊，你可以构建少儿组、青少组或者小学组、初中组)

除了数理逻辑方面的教学，你也能用于引入历史典故，许多优秀的鸭子采用的战术可以从历史上(如《三十六计》)找到原型,前头获胜的鸭子在早期就采用了以逸待劳

如果你的兴趣是编写鸭子后边的人，你想通过猜测他们的策略而决定自己的策略 ,这在和你熟悉的同学pk的时候，尤其有用，他的性格很可能决定他的鸭子的性格(喜欢逃跑或是鲁莽冲撞)，那么心理学/博弈很容易引入进来，所谓知己知彼 百战不殆

对于少部分有怀疑/创造精神同学，可能会指出这个游戏不合理，他们会给出改进游戏的建议，他们想制作更有趣的游戏规则，诸如允许团队作战，这个时候，因为游戏的源码开放性，可以把这部分同学引入到游戏的设计上来，通过修改源码，构建自己的游戏规则和平台

技术视角

下边我们切换到技术视角，来分析下这个游戏的源码结构和重要的实现细节,如果我们要将它改造为对战平台，理解源码是必经之路

我们带着几个问题来阅读源码的关键部分，之后顺藤摸瓜即可

如果你有看不懂的地方请翻阅blockly-game的文档

blockly-game最坑的地方是使用了closure-compiler,如果看到奇奇怪怪的东西，基本来自closure-compiler

点击运行程序按钮后都发生了什么

首先从前端入手，我们跟踪点击运行程序按钮后都发生了什么?

我们追踪到Pond.runButtonClick

我们提交的代码/积木块在哪里被运行

Pond.execute

参赛选手的初始化

var players

这一行也值得留意Pond.Battle.addAvatar(name, code, playerData.start, playerData.damage);

电脑控制的鸭子的战斗策略在哪里定义

playerCounter

战斗的过程(运行每个鸭子的作战策略)

Pond.Battle.updateInterpreters_

一些边缘问题

健壮性

任何时候不要相信用户的输入

构建一个系统，我们永远不该忘记上边这条箴言

如果某个用户输入的战斗策略有误，会不会影响战斗的进行?

这单可以放心，有误的战斗策略，会导致这个用户被淘汰，但不影响比赛的继续进行

一些改进的空间

• 更好的汉化
• 增强鸭子对环境的感知(比如看得到其他人的血槽)
• 引入物理引擎,力、冲量、加速度,使战斗更真实
• 积木块的目前参数不完备,诸如swim没有速度参数(只能在js里写)
• 对于高年级学生，可以增加活动空间，与其他设施，像掩体之类