react框架技术栈交流(开源基于React)(1)

提起坦克大战,我想现在30岁上下的这批人应该印象深刻。当年这个简单的游戏也曾火遍大江南北,上段游戏开始的音频,帮你们回忆一下。

现在有前端大佬【摸鱼的肥超】,使用React完美复刻了一版。

游戏体验地址:http://shinima.pw/battle-city/

开源地址:https://GitHub.com/shinima/battle-city

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

让几张图大家看下,像素的感觉做的相当棒:

针对鼠标交互设计的关卡编辑器

点击鼠标,选择画笔类型,在地图中拖拽鼠标就即可完成关卡配置,再也不用担心游戏手柄按得手酸啦 (●ˇ∀ˇ●)。

react框架技术栈交流(开源基于React)(2)

方便的自定义关卡管理页面

完成自定义关卡配置之后,可以将关卡信息保存到浏览器缓存中(localStorage)。然后在关卡管理页面编辑/删除/下载这些关卡配置,当然你也点击关卡缩略图下方 PLAY 按钮直接开始自定义关卡。

react框架技术栈交流(开源基于React)(3)

放大了很多倍的 Gallery

浏览 Gallery 页面来更全面地了解游戏中的各个元素。

react框架技术栈交流(开源基于React)(4)

仰慕前端大佬!

,