優質文章,及時送達
本文編輯:小逛;首發公眾號@逛逛GitHub,微博@逛逛GitHub
哈哈,小逛找到一個摸魚神器!今天玩了一上午的坦克大戰!
坦克大戰當年紅遍大江南北,很多和我一樣的九零後應該都有着對這個遊戲的記憶。現在顯示器分辨率越來越高,使用矢量圖來實現像素風格遊戲,可以獲得非常高的展現質量。
小逛找到了一個 GitHub 項目,完美復刻了坦克大戰小遊戲。
這個項目是作者肥超花了很長時間折騰的復刻版本,所有元素都使用矢量圖(SVG)進行渲染,針對網頁的交互方式重新設計了關卡編輯器,該復刻版新增了關卡選擇功能、自定義關卡管理功能等,另外它還包括了一個 Gallery 頁面用於展示所有的遊戲元素,想必它一定可以勾起你的兒時回憶。
在線試玩:https://battle-city.js.org/#/
GitHub:https://github.com/shinima/battle-city
小逛體驗了一把,操作體驗很棒,不卡頓:
針對鼠標交互設計的關卡編輯器
點擊鼠標,選擇畫筆類型,在地圖中拖拽鼠標就即可完成關卡配置,再也不用擔心遊戲手柄按得手酸啦 (●ˇ∀ˇ●)。
方便的自定義關卡管理頁面
完成自定義關卡配置之後,可以將關卡信息保存到瀏覽器緩存中(localStorage)。然後在關卡管理頁面編輯/刪除/下載這些關卡配置,當然你也點擊關卡縮略圖下方 PLAY 按鈕直接開始自定義關卡。
放大了很多倍的 Gallery
瀏覽 Gallery 頁面來更全面地了解遊戲中的各個元素。
整個遊戲的開發過程作者也進行了介紹,對 React / Redux 感興趣的前端同學可以去看作者寫的文章:
www.zhuanlan.zhihu.com/p/35551654
- END -
最近整理一份面試資料《Java技術棧學習手冊》,覆蓋了Java技術、面試題精選、Spring全家桶、Nginx、SSM、微服務、數據庫、數據結構、架構等等。
獲取方式:點“ 並回復 777