基于Pond的对战平台(构想)

关于Pond

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

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

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

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

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

上手

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

1

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

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

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

开战

正式开战的时候,战场上有四只鸭子,你控制着左上角的小黄鸭。右边是编辑区域,你可以在其中使用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里写)
  • 对于高年级学生,可以增加活动空间,与其他设施,像掩体之类



Fork me on GitHub