/towerDefense

一个使用pixi.js编写的类似保卫萝卜的塔防游戏。

Primary LanguageTypeScript

阻止传送

一个用pixi.js编写的h5塔防游戏,可以用electron打包为exe,支持移动端,也可以用webview控件打包为app在移动端使用

环境说明

  cnpm@6.2.0  
  npm@6.14.13  
  node@12.22.7  
  npminstall@3.28.0  
  yarn@1.22.10  
  
  npm config list  
  electron_mirror = "https://npm.taobao.org/mirrors/electron/"  
  home = "https://www.npmjs.org"  
  registry = "https://registry.npmmirror.com/"  

eslint说明

  @typescript-eslint/eslint-plugin@5.33.1  
  @typescript-eslint/parser@.33.1  
  eslint@8.22.0  
  eslint-config-prettier@8.5.0  
  eslint-config-standard@17.0.0  
  eslint-webpack-plugin@3.2.0  
  prettier@2.7.1  

关键库说明

  @pixi/sound@^4.3.3 //一个声音管理库
  @zip.js/zip.js@2.4.10 // 一个压缩管理库方便资源打包
  intersects@2.7.2 // 数学碰撞判断库
  lodash@4.17.20 // 一个辅助js更好用的类库深拷贝 浅拷贝
  pixi-filters@4.2.0 // 一个pixi的shader库 模糊,扭曲描边等功能
  pixi-spine@3.0.13 // spine动画支持库 我们对不同spine版本做了兼容
  pixi.js@6.5.9 // 一个渲染库
  uglify-js@^3.17.4 // 打包压缩js代码的工具库

目录说明

目录结构可以点击这里

安装运行

yarn  
npm run dev  

详细功能说明

(1)设计逻辑
(2)场景编辑器
(3)四叉树使用
(4)A星的使用
(5)子弹跟随精灵移动
(6)游戏资源打包逻辑
(7)plist在pixi.js中的使用
(8)发射圆圈子弹技能
(9)发射多炮弹技能

运行效果截图

项目运行效果截图
项目运行效果截图 项目运行效果截图 项目运行效果截图

项目开源地址:

https://github.com/yinhui1129754/towerDefense

游戏开发交流群:

859055710

赞助作者

如果项目对你有帮助,可以请他喝一杯咖啡。

赞赏码

如果图片不显示请点击 这里

注意项

场景id不能重复 不然会无法更改大小问题