4回合后,💙离开比赛,因为她留下了一个空的⚪️。 尽管在此游戏中,两个玩家每回合至少连接3个圆圈,但是您并不需要阻止更少的回合,尽管您每回合必须填写至少1个圆圈。 差不多了!
库和工具
我们可以使用许多不同的语言,库,平台和工具来构建此游戏。 这就是我最终要解决的问题,以及原因:
- React Native-基于我已经在网络上熟悉的渲染模型,还随附了方便的本机组件。
- ClojureScript —具有丰富数据结构的简单语言,支持在短周期内进行非常动态的开发(稍后会介绍)。
- Om.next — React的ClojureScript接口,它带有用于以灵活,可预测的方式管理应用程序状态的工具。
- Figwheel —生成ClojureScript并将其热加载到正在运行的应用程序中。
- 重新生成—将以上所有库合并到一个脚手架工具中,该工具负责设置所有内容。
- Spacemacs — Emacs之上的插件套件和增强功能套件,使使用ClojureScript成为符合人体工程学且有趣的体验。
如果这个列表看起来令人生畏,那就可以了! 希望在我们开始构建应用程序时,希望这些工具如何简化有关界面和游戏状态的推理将变得更加明显。
入门
我已经考虑过使用re-natal设置项目支架,因此我们可以继续克隆仓库,项目自述文件中提供了其他说明。
$ git clone https://github.com/pheuter/connect-game
$ cd connect-game && npm安装
使用像React Native这样与平台无关的视图层的一件好事是,我们可以编写通用代码,并使其在iOS和Android上运行。 因此,大多数实用程序和组件都位于src / connect_game / shared目录中,例如Board Component:
目前,该组件除了渲染具有某些样式的基本文本视图外,无济于事,但我们可能会担心稍后对其进行重构。 此模块有3个主要内容:
- 您可以使用defui宏在Om.next中定义React Components。
- 无需使用JSX,您可以调用带有两个参数的工厂函数:属性映射和子代。 在这种情况下,我们正在调用文本,并向其传递一些样式属性和“ Board”字符串文字。
- 为了使用您定义的组件,您需要创建一个工厂函数,该函数应由呈现该组件的父级调用。
谈到这些父母,让我们看一下src / connect_game / ios / core.cljs中的iOS AppRoot (此时的Android版本几乎相同):
这里需要做更多的内务处理来设置主根节点并注册Om.next Reconciler(稍后再介绍),但是类似地,我们定义了一个AppRoot组件,该组件呈现一个视图,其中Board是唯一的子级。 在这种情况下,我们不会将任何属性或子级传递给董事会。
等效的JavaScript可能看起来像这样:
AppRoot类扩展了React.Component {
render(){
返回(
);
}
}
让我们尝试在实际的Android设备上运行该应用程序(我碰巧有一个Nexus 5,但您也可以配置一个模拟器)。
您基本上需要执行3个命令:
- 启动React Native打包器: $ npm start
- 在适当的平台上启动Figwheel: $ lein figwheel android
- 运行应用程序: $ react-native run-android
存储库中的自述文件也包含有关在iOS上执行的说明。
如果一切顺利,您应该会看到类似以下内容的信息:
我在前面简要提到过,使用ClojureScript之类的语言可以实现动态开发。 部分原因是由于您使用的语言的设计使您可以直接评估代码的阅读器,从而为像Figwheel这样的出色工具腾出了空间,这些工具利用了该评估模型来实现跨平台的实时编辑。
如果继续进行并编辑Board组件,我们应该看到所做的更改几乎立即反映在正在运行的应用程序中。 由于尚未引入状态,所以现在不会看到它,但是热加载也会保留任何现有状态。 当我们进入游戏的核心业务逻辑时,这将变得超级有用!