shinima / battle-city

🎮 Battle city remake built with react.

坦克大战复刻版（Battle City Remake）

游戏地址: https://shinima.github.io/battle-city

游戏详细介绍见知乎专栏文章: https://zhuanlan.zhihu.com/p/35551654

该 GitHub 仓库的版本是经典坦克大战的复刻版本，基于原版素材，使用 React 将各类素材封装为对应的组件。素材使用 SVG 进行渲染以展现游戏的像素风，可以先调整浏览器缩放再进行游戏，1080P 屏幕下使用 200% 缩放为最佳。此游戏使用网页前端技术进行开发，主要使用 React 进行页面展现，使用 Immutable.js 作为数据结构工具库，使用 redux 管理游戏状态，以及使用 redux-saga/little-saga 处理复杂的游戏逻辑。

如果游戏过程中发现任何 BUG 的话，欢迎提 issue。

开发进度：

Milestone 0.2（已完成于 2018-04-16)

• 游戏的基本框架
• 单人模式
• 展览页面
• 关卡编辑器与自定义关卡管理

Milestone 0.3（已完成于 2018-11-03）

• 性能优化
• 完整的游戏音效（有一些小瑕疵）
• 双人模式（已完成）

Milestone 1.0（看起来遥遥无期 /(ㄒ o ㄒ)/~~）

• 更合理的电脑玩家
• 完整的设计、开发文档
• 基于 websocket 的多人游戏模式

本地开发

1. 克隆该项目到本地
2. 运行 yarn install 来安装依赖 （或者使用 npm install）
3. 运行 yarn start 开启 webpack-dev-server，并在浏览器中打开 localhost:8080
4. 运行 yarn build 来打包生产版本，打包输出在 dist/ 文件夹下

devConfig.js 包含了一些开发用的配置项，注意修改该文件中的配置之后需要重启 webpack-dev-server

battle-city's Issues

子弹生成位置调整

参考一下 这篇文章 中的的思路来优化子弹生成的位置.

Bug Report

I get an error when I pass the 1st mission and play the 2rd mission:
通过了第一关以后跳转到第二关，然后出现了下面的错误：

uncaught at s at s 
 at f 
 at E 
 at E 
 at d 
 at _ 
 at u 
 TypeError: Cannot destructure property `active` of 'undefined' or 'null'.
    at t.playerTank (http://shinima.pw/battle-city/main-c3d36b.js:14:80639)
    at http://shinima.pw/battle-city/main-c3d36b.js:14:125601
    at L (http://shinima.pw/battle-city/main-c3d36b.js:14:125654)
    at D (http://shinima.pw/battle-city/main-c3d36b.js:14:126447)
    at M (http://shinima.pw/battle-city/main-c3d36b.js:14:122393)
    at c (http://shinima.pw/battle-city/main-c3d36b.js:14:126208)
    at http://shinima.pw/battle-city/main-c3d36b.js:14:125631
    at L (http://shinima.pw/battle-city/main-c3d36b.js:14:125654)
    at D (http://shinima.pw/battle-city/main-c3d36b.js:14:126447)
    at M (http://shinima.pw/battle-city/main-c3d36b.js:14:122393)
X @ main-c3d36b.js:1

添加游戏手柄支持

使用HTML5提供的游戏手柄API MDN Gamepad API支持游戏手柄

使用Continuous Collision Detection来检测子弹与其他物体是否有碰撞

目前游戏中使用了离散的方式来判断子弹是否与其他物体发生了碰撞, 当子弹速度较快, 游戏帧率较低的时候, 该判断方式会出错. 目前子弹只能横着飞或是竖着飞, 所以CCD算法可以实现地较为简单.

坦克重生后有重复出现的问题。

死亡重生后，两个同颜色坦克同时存在。并且有一个无敌且不能动

为什么不用canvas写呢？

用dom性能不好

玩家在冰面上没有打滑效果

如题，走在白色的冰面上没有打滑

已知问题

下面的问题算是已经解决，但有可能仍会出现：

• 游戏偶尔会奔溃，截图见下方
• 有的时候关卡会提前结束
• 击毁所有的 AI 坦克之后没有自动进入下一关 fixed in 972f8b5

---

已完成：

• 两架坦克贴在一起的时候，其中一架进行转弯可能会和另一架坦克粘在一起 ( f6855e9 8bff100)
• 有的时候无法显示部分贴图（例如 AI 坦克爆炸效果）
• 因为老鹰被击毁而导致游戏结束时 场上坦克消失过快
• 部分 PowerUp （例如 Shovel）的效果会留到下一个关卡
• 编辑器：并不是每次goback 时都需要提醒「未保存的修改将丢失」
• 游戏结束的时候 powerup、flicker、爆炸效果没有被正确清理

---

一些已经完成的功能可以在 #1 中查看

第二关？

基于electron打包为单机版本

可以尝试基于electron打包游戏为单机版本

.

.

English docs?

Hey guys,

Thanks for the project. It would be better if docs would be translated in English. So we could understand it better and contribute this project.

Thanks!

目前已经完成的功能

• 新增stories页面, 来预览各个组件
• 所有标准关卡配置
• 新增stage-saga, 其生命周期对应一个关卡; 在关卡开始时, stage-saga启动; 当玩家clear stage时stage-saga结束, 并向game-saga返回关卡相关信息; stage-saga负责关卡地图生成, 关卡信息统计等与关卡相关的逻辑
• 在关卡配置文件stage-xxx.json中添加enemies字段, 用来描述这一个关卡中不同等级的敌人的数量. AIMasterSaga生成AI tank时使用该配置来确定坦克的等级
• 关卡结束/游戏结束时的统计页面内容(StatisticsOverlay), 以及该页面内的动画
• 支持4*4 brick小块的地图配置
• 新增坦克血量的相关逻辑
• 坦克血量机制[DONE]
• 根据血量的多少来确定颜色
• 关卡编辑器
  • 地图编辑
  • 关卡名称/关卡难度/AI坦克配置
  • 配置文件导入/导出
• 的掉落/拾取/效果触发
• 玩家得分显示
  • 击杀分数显示
  • 物品拾取分数显示
• 游戏暂停功能
• 子弹连续碰撞检测

bug report：切换关卡之后 AI 玩家的控制器有时会找不到 AI 玩家

我玩了4个关卡
除了第一关到第二关正常

第二关到第三关
第三关到 第四关
都是进入到新关之后，如果按任何一个键，都会出现卡死，就是地图上没有任何一个坦克，包括我自己的。
只好 重新刷新一下浏览器，就又出来了。

甚至不按任何键也可以出现这个问题。

小游戏不错，有相应的api吗，比如移动、攻击

毕竟手机上操作不了。

PowerUp生成与消失的规则

• 当玩家第一次击中属性withPowerUp为true的坦克时, PowerUp就会掉落
• 当一架withPowerUp为true的坦克开始生成时(Flicker开始的时候), 地图上的PowerUp都会消失
• 每一关第4, 11, 18架坦克的withPowerUp属性为true

希望增加全屏功能

att

优化敌方坦克机器人

目前 Bot 不是很合理：例如 Bot 往往只会选择可以通行的路线，几乎不会选择「击穿砖墙再通过」的方式；又例如 fast bot tank 会一直保持高速运动。

坦克会被卡在砖块里

火狐浏览器不显示素材

firefox 59.0.2 (64 位)
不显示素材