├── app ├── index.js ├── coli.js ├── keyboard.js ├── textStyles.js ├── characters.json ├── spriteUtilities.js └── game.js ├── assets ├── bug │ ├── bug-hit1.png │ ├── bug-hit2.png │ ├── bug-hit3.png │ ├── bug-highhit1.png │ ├── bug-highhit2.png │ ├── bug-highhit3.png │ ├── bug-stance1.png │ ├── bug-stance2.png │ ├── bug-stance3.png │ ├── bug-stance4.png │ ├── bug-stance5.png │ ├── bug-stance6.png │ ├── bug-stance7.png │ └── bug-stance8.png ├── fatal │ ├── death1.png │ ├── death10.png │ ├── death11.png │ ├── death12.png │ ├── death13.png │ ├── death14.png │ ├── death15.png │ ├── death16.png │ ├── death17.png │ ├── death18.png │ ├── death19.png │ ├── death2.png │ ├── death20.png │ ├── death3.png │ ├── death4.png │ ├── death5.png │ ├── death6.png │ ├── death7.png │ ├── death8.png │ └── death9.png ├── fatalp │ ├── fire01.png │ ├── fire02.png │ ├── fire03.png │ ├── fire04.png │ ├── fire05.png │ ├── fire06.png │ └── fire07.png ├── pao │ ├── pao-death1.png │ ├── pao-death2.png │ ├── pao-death3.png │ ├── pao-death4.png │ ├── pao-death5.png │ ├── pao-death6.png │ ├── pao-death7.png │ ├── pao-death8.png │ ├── pao-death9.png │ ├── pao-duck1.png │ ├── pao-hit1.png │ ├── pao-jump1.png │ ├── pao-kick1.png │ ├── pao-kick2.png │ ├── pao-kick3.png │ ├── pao-punch1.png │ ├── pao-punch2.png │ ├── pao-punch3.png │ ├── pao-raise1.png │ ├── pao-walk1.png │ ├── pao-walk2.png │ ├── pao-walk3.png │ ├── pao-airkick1.png │ ├── pao-airkick2.png │ ├── pao-airkick3.png │ ├── pao-death10.png │ ├── pao-death11.png │ ├── pao-death12.png │ ├── pao-death13.png │ ├── pao-death14.png │ ├── pao-death15.png │ ├── pao-death16.png │ ├── pao-death17.png │ ├── pao-death18.png │ ├── pao-death19.png │ ├── pao-death20.png │ ├── pao-highhit1.png │ ├── pao-stance1.png │ ├── pao-stance2.png │ ├── pao-stance3.png │ └── pao-staticjump1.png ├── claudia │ ├── claudia-duck1.png │ ├── claudia-hit1.png │ ├── claudia-jump1.png │ ├── claudia-kick1.png │ ├── claudia-kick2.png │ ├── claudia-kick3.png │ ├── claudia-walk1.png │ ├── claudia-walk2.png │ ├── claudia-walk3.png │ ├── claudia-walk4.png │ ├── claudia-airkick1.png │ ├── claudia-airkick2.png │ ├── claudia-airkick3.png │ ├── claudia-death1.png │ ├── claudia-death10.png │ ├── claudia-death11.png │ ├── claudia-death12.png │ ├── claudia-death13.png │ ├── claudia-death14.png │ ├── claudia-death15.png │ ├── claudia-death16.png │ ├── claudia-death17.png │ ├── claudia-death18.png │ ├── claudia-death19.png │ ├── claudia-death2.png │ ├── claudia-death20.png │ ├── claudia-death3.png │ ├── claudia-death4.png │ ├── claudia-death5.png │ ├── claudia-death6.png │ ├── claudia-death7.png │ ├── claudia-death8.png │ ├── claudia-death9.png │ ├── claudia-punch1.png │ ├── claudia-punch2.png │ ├── claudia-punch3.png │ ├── claudia-raise1.png │ ├── claudia-stance1.png │ └── claudia-staticjump1.png ├── subzero │ ├── subzero-hit1.png │ ├── subzero-hit2.png │ ├── subzero-hit3.png │ ├── subzero-hit4.png │ ├── subzero-hit5.png │ ├── subzero-highhit1.png │ ├── subzero-highhit2.png │ ├── subzero-highhit3.png │ ├── subzero-highhit4.png │ ├── subzero-highhit5.png │ ├── subzero-stance1.png │ ├── subzero-stance2.png │ ├── subzero-stance3.png │ ├── subzero-stance4.png │ ├── subzero-stance5.png │ ├── subzero-stance6.png │ ├── subzero-stance7.png │ ├── subzero-stance8.png │ └── subzero-stance9.png └── scorpion │ ├── scorpion-death1.png │ ├── scorpion-death2.png │ ├── scorpion-death3.png │ ├── scorpion-death4.png │ ├── scorpion-death5.png │ ├── scorpion-death6.png │ ├── scorpion-death7.png │ ├── scorpion-death8.png │ ├── scorpion-death9.png │ ├── scorpion-duck1.png │ ├── scorpion-duck2.png │ ├── scorpion-duck3.png │ ├── scorpion-hit1.png │ ├── scorpion-hit2.png │ ├── scorpion-hit3.png │ ├── scorpion-hit4.png │ ├── scorpion-hit5.png │ ├── scorpion-jump1.png │ ├── scorpion-jump2.png │ ├── scorpion-jump3.png │ ├── scorpion-jump4.png │ ├── scorpion-jump5.png │ ├── scorpion-jump6.png │ ├── scorpion-jump7.png │ ├── scorpion-jump8.png │ ├── scorpion-jump9.png │ ├── scorpion-kick1.png │ ├── scorpion-kick10.png │ ├── scorpion-kick2.png │ ├── scorpion-kick3.png │ ├── scorpion-kick4.png │ ├── scorpion-kick5.png │ ├── scorpion-kick6.png │ ├── scorpion-kick7.png │ ├── scorpion-kick8.png │ ├── scorpion-kick9.png │ ├── scorpion-punch1.png │ ├── scorpion-punch2.png │ ├── scorpion-punch3.png │ ├── scorpion-punch4.png │ ├── scorpion-punch5.png │ ├── scorpion-raise1.png │ ├── scorpion-raise2.png │ ├── scorpion-raise3.png │ ├── scorpion-walk1.png │ ├── scorpion-walk2.png │ ├── scorpion-walk3.png │ ├── scorpion-walk4.png │ ├── scorpion-walk5.png │ ├── scorpion-walk6.png │ ├── scorpion-walk7.png │ ├── scorpion-walk8.png │ ├── scorpion-walk9.png │ ├── scorpion-airkick1.png │ ├── scorpion-airkick2.png │ ├── scorpion-airkick3.png │ ├── scorpion-death10.png │ ├── scorpion-death11.png │ ├── scorpion-death12.png │ ├── scorpion-death13.png │ ├── scorpion-death14.png │ ├── scorpion-death15.png │ ├── scorpion-death16.png │ ├── scorpion-death17.png │ ├── scorpion-death18.png │ ├── scorpion-death19.png │ ├── scorpion-death20.png │ ├── scorpion-highhit1.png │ ├── scorpion-highhit2.png │ ├── scorpion-highhit3.png │ ├── scorpion-highhit4.png │ ├── scorpion-highhit5.png │ ├── scorpion-stance1.png │ ├── scorpion-stance2.png │ ├── scorpion-stance3.png │ ├── scorpion-stance4.png │ ├── scorpion-stance5.png │ ├── scorpion-stance6.png │ ├── scorpion-stance7.png │ ├── scorpion-stance8.png │ ├── scorpion-stance9.png │ └── scorpion-staticjump1.png ├── .editorconfig ├── .travis.yml ├── README.md ├── webpack.config.js ├── .gitignore ├── deploy.sh └── package.json /app/index.js: -------------------------------------------------------------------------------- 1 | import Game from "./game.js"; 2 | 3 | window.game = new Game(); 4 | -------------------------------------------------------------------------------- /assets/bug/bug-hit1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/bug/bug-hit1.png -------------------------------------------------------------------------------- /assets/bug/bug-hit2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/bug/bug-hit2.png -------------------------------------------------------------------------------- /assets/bug/bug-hit3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/bug/bug-hit3.png -------------------------------------------------------------------------------- /assets/fatal/death1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatal/death1.png -------------------------------------------------------------------------------- /assets/fatal/death10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatal/death10.png -------------------------------------------------------------------------------- /assets/fatal/death11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatal/death11.png -------------------------------------------------------------------------------- /assets/fatal/death12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatal/death12.png -------------------------------------------------------------------------------- /assets/fatal/death13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatal/death13.png -------------------------------------------------------------------------------- /assets/fatal/death14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatal/death14.png -------------------------------------------------------------------------------- /assets/fatal/death15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatal/death15.png -------------------------------------------------------------------------------- /assets/fatal/death16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatal/death16.png -------------------------------------------------------------------------------- /assets/fatal/death17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatal/death17.png -------------------------------------------------------------------------------- /assets/fatal/death18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatal/death18.png -------------------------------------------------------------------------------- /assets/fatal/death19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatal/death19.png -------------------------------------------------------------------------------- /assets/fatal/death2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatal/death2.png -------------------------------------------------------------------------------- /assets/fatal/death20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatal/death20.png -------------------------------------------------------------------------------- /assets/fatal/death3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatal/death3.png -------------------------------------------------------------------------------- /assets/fatal/death4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatal/death4.png -------------------------------------------------------------------------------- /assets/fatal/death5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatal/death5.png -------------------------------------------------------------------------------- /assets/fatal/death6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatal/death6.png -------------------------------------------------------------------------------- /assets/fatal/death7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatal/death7.png -------------------------------------------------------------------------------- /assets/fatal/death8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatal/death8.png -------------------------------------------------------------------------------- /assets/fatal/death9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatal/death9.png -------------------------------------------------------------------------------- /assets/fatalp/fire01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatalp/fire01.png -------------------------------------------------------------------------------- /assets/fatalp/fire02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatalp/fire02.png -------------------------------------------------------------------------------- /assets/fatalp/fire03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatalp/fire03.png -------------------------------------------------------------------------------- /assets/fatalp/fire04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatalp/fire04.png -------------------------------------------------------------------------------- /assets/fatalp/fire05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatalp/fire05.png -------------------------------------------------------------------------------- /assets/fatalp/fire06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatalp/fire06.png -------------------------------------------------------------------------------- /assets/fatalp/fire07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/fatalp/fire07.png -------------------------------------------------------------------------------- /assets/pao/pao-death1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-death1.png -------------------------------------------------------------------------------- /assets/pao/pao-death2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-death2.png -------------------------------------------------------------------------------- /assets/pao/pao-death3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-death3.png -------------------------------------------------------------------------------- /assets/pao/pao-death4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-death4.png -------------------------------------------------------------------------------- /assets/pao/pao-death5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-death5.png -------------------------------------------------------------------------------- /assets/pao/pao-death6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-death6.png -------------------------------------------------------------------------------- /assets/pao/pao-death7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-death7.png -------------------------------------------------------------------------------- /assets/pao/pao-death8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-death8.png -------------------------------------------------------------------------------- /assets/pao/pao-death9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-death9.png -------------------------------------------------------------------------------- /assets/pao/pao-duck1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-duck1.png -------------------------------------------------------------------------------- /assets/pao/pao-hit1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-hit1.png -------------------------------------------------------------------------------- /assets/pao/pao-jump1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-jump1.png -------------------------------------------------------------------------------- /assets/pao/pao-kick1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-kick1.png -------------------------------------------------------------------------------- /assets/pao/pao-kick2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-kick2.png -------------------------------------------------------------------------------- /assets/pao/pao-kick3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-kick3.png -------------------------------------------------------------------------------- /assets/pao/pao-punch1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-punch1.png -------------------------------------------------------------------------------- /assets/pao/pao-punch2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-punch2.png -------------------------------------------------------------------------------- /assets/pao/pao-punch3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-punch3.png -------------------------------------------------------------------------------- /assets/pao/pao-raise1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-raise1.png -------------------------------------------------------------------------------- /assets/pao/pao-walk1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-walk1.png -------------------------------------------------------------------------------- /assets/pao/pao-walk2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-walk2.png -------------------------------------------------------------------------------- /assets/pao/pao-walk3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-walk3.png -------------------------------------------------------------------------------- /assets/bug/bug-highhit1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/bug/bug-highhit1.png -------------------------------------------------------------------------------- /assets/bug/bug-highhit2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/bug/bug-highhit2.png -------------------------------------------------------------------------------- /assets/bug/bug-highhit3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/bug/bug-highhit3.png -------------------------------------------------------------------------------- /assets/bug/bug-stance1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/bug/bug-stance1.png -------------------------------------------------------------------------------- /assets/bug/bug-stance2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/bug/bug-stance2.png -------------------------------------------------------------------------------- /assets/bug/bug-stance3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/bug/bug-stance3.png -------------------------------------------------------------------------------- /assets/bug/bug-stance4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/bug/bug-stance4.png -------------------------------------------------------------------------------- /assets/bug/bug-stance5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/bug/bug-stance5.png -------------------------------------------------------------------------------- /assets/bug/bug-stance6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/bug/bug-stance6.png -------------------------------------------------------------------------------- /assets/bug/bug-stance7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/bug/bug-stance7.png -------------------------------------------------------------------------------- /assets/bug/bug-stance8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/bug/bug-stance8.png -------------------------------------------------------------------------------- /assets/pao/pao-airkick1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-airkick1.png -------------------------------------------------------------------------------- /assets/pao/pao-airkick2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-airkick2.png -------------------------------------------------------------------------------- /assets/pao/pao-airkick3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-airkick3.png -------------------------------------------------------------------------------- /assets/pao/pao-death10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-death10.png -------------------------------------------------------------------------------- /assets/pao/pao-death11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-death11.png -------------------------------------------------------------------------------- /assets/pao/pao-death12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-death12.png -------------------------------------------------------------------------------- /assets/pao/pao-death13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-death13.png -------------------------------------------------------------------------------- /assets/pao/pao-death14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-death14.png -------------------------------------------------------------------------------- /assets/pao/pao-death15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-death15.png -------------------------------------------------------------------------------- /assets/pao/pao-death16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-death16.png -------------------------------------------------------------------------------- /assets/pao/pao-death17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-death17.png -------------------------------------------------------------------------------- /assets/pao/pao-death18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-death18.png -------------------------------------------------------------------------------- /assets/pao/pao-death19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-death19.png -------------------------------------------------------------------------------- /assets/pao/pao-death20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-death20.png -------------------------------------------------------------------------------- /assets/pao/pao-highhit1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-highhit1.png -------------------------------------------------------------------------------- /assets/pao/pao-stance1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-stance1.png -------------------------------------------------------------------------------- /assets/pao/pao-stance2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-stance2.png -------------------------------------------------------------------------------- /assets/pao/pao-stance3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-stance3.png -------------------------------------------------------------------------------- /assets/pao/pao-staticjump1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/pao/pao-staticjump1.png -------------------------------------------------------------------------------- /assets/claudia/claudia-duck1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-duck1.png -------------------------------------------------------------------------------- /assets/claudia/claudia-hit1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-hit1.png -------------------------------------------------------------------------------- /assets/claudia/claudia-jump1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-jump1.png -------------------------------------------------------------------------------- /assets/claudia/claudia-kick1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-kick1.png -------------------------------------------------------------------------------- /assets/claudia/claudia-kick2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-kick2.png -------------------------------------------------------------------------------- /assets/claudia/claudia-kick3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-kick3.png -------------------------------------------------------------------------------- /assets/claudia/claudia-walk1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-walk1.png -------------------------------------------------------------------------------- /assets/claudia/claudia-walk2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-walk2.png -------------------------------------------------------------------------------- /assets/claudia/claudia-walk3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-walk3.png -------------------------------------------------------------------------------- /assets/claudia/claudia-walk4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-walk4.png -------------------------------------------------------------------------------- /assets/subzero/subzero-hit1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/subzero/subzero-hit1.png -------------------------------------------------------------------------------- /assets/subzero/subzero-hit2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/subzero/subzero-hit2.png -------------------------------------------------------------------------------- /assets/subzero/subzero-hit3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/subzero/subzero-hit3.png -------------------------------------------------------------------------------- /assets/subzero/subzero-hit4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/subzero/subzero-hit4.png -------------------------------------------------------------------------------- /assets/subzero/subzero-hit5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/subzero/subzero-hit5.png -------------------------------------------------------------------------------- /assets/claudia/claudia-airkick1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-airkick1.png -------------------------------------------------------------------------------- /assets/claudia/claudia-airkick2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-airkick2.png -------------------------------------------------------------------------------- /assets/claudia/claudia-airkick3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-airkick3.png -------------------------------------------------------------------------------- /assets/claudia/claudia-death1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-death1.png -------------------------------------------------------------------------------- /assets/claudia/claudia-death10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-death10.png -------------------------------------------------------------------------------- /assets/claudia/claudia-death11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-death11.png -------------------------------------------------------------------------------- /assets/claudia/claudia-death12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-death12.png -------------------------------------------------------------------------------- /assets/claudia/claudia-death13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-death13.png -------------------------------------------------------------------------------- /assets/claudia/claudia-death14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-death14.png -------------------------------------------------------------------------------- /assets/claudia/claudia-death15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-death15.png -------------------------------------------------------------------------------- /assets/claudia/claudia-death16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-death16.png -------------------------------------------------------------------------------- /assets/claudia/claudia-death17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-death17.png -------------------------------------------------------------------------------- /assets/claudia/claudia-death18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-death18.png -------------------------------------------------------------------------------- /assets/claudia/claudia-death19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-death19.png -------------------------------------------------------------------------------- /assets/claudia/claudia-death2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-death2.png -------------------------------------------------------------------------------- /assets/claudia/claudia-death20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-death20.png -------------------------------------------------------------------------------- /assets/claudia/claudia-death3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-death3.png -------------------------------------------------------------------------------- /assets/claudia/claudia-death4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-death4.png -------------------------------------------------------------------------------- /assets/claudia/claudia-death5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-death5.png -------------------------------------------------------------------------------- /assets/claudia/claudia-death6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-death6.png -------------------------------------------------------------------------------- /assets/claudia/claudia-death7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-death7.png -------------------------------------------------------------------------------- /assets/claudia/claudia-death8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-death8.png -------------------------------------------------------------------------------- /assets/claudia/claudia-death9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-death9.png -------------------------------------------------------------------------------- /assets/claudia/claudia-punch1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-punch1.png -------------------------------------------------------------------------------- /assets/claudia/claudia-punch2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-punch2.png -------------------------------------------------------------------------------- /assets/claudia/claudia-punch3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-punch3.png -------------------------------------------------------------------------------- /assets/claudia/claudia-raise1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-raise1.png -------------------------------------------------------------------------------- /assets/claudia/claudia-stance1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-stance1.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-death1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-death1.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-death2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-death2.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-death3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-death3.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-death4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-death4.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-death5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-death5.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-death6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-death6.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-death7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-death7.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-death8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-death8.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-death9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-death9.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-duck1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-duck1.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-duck2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-duck2.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-duck3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-duck3.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-hit1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-hit1.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-hit2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-hit2.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-hit3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-hit3.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-hit4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-hit4.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-hit5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-hit5.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-jump1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-jump1.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-jump2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-jump2.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-jump3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-jump3.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-jump4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-jump4.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-jump5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-jump5.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-jump6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-jump6.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-jump7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-jump7.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-jump8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-jump8.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-jump9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-jump9.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-kick1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-kick1.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-kick10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-kick10.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-kick2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-kick2.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-kick3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-kick3.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-kick4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-kick4.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-kick5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-kick5.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-kick6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-kick6.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-kick7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-kick7.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-kick8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-kick8.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-kick9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-kick9.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-punch1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-punch1.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-punch2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-punch2.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-punch3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-punch3.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-punch4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-punch4.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-punch5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-punch5.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-raise1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-raise1.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-raise2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-raise2.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-raise3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-raise3.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-walk1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-walk1.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-walk2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-walk2.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-walk3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-walk3.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-walk4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-walk4.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-walk5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-walk5.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-walk6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-walk6.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-walk7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-walk7.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-walk8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-walk8.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-walk9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-walk9.png -------------------------------------------------------------------------------- /assets/subzero/subzero-highhit1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/subzero/subzero-highhit1.png -------------------------------------------------------------------------------- /assets/subzero/subzero-highhit2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/subzero/subzero-highhit2.png -------------------------------------------------------------------------------- /assets/subzero/subzero-highhit3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/subzero/subzero-highhit3.png -------------------------------------------------------------------------------- /assets/subzero/subzero-highhit4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/subzero/subzero-highhit4.png -------------------------------------------------------------------------------- /assets/subzero/subzero-highhit5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/subzero/subzero-highhit5.png -------------------------------------------------------------------------------- /assets/subzero/subzero-stance1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/subzero/subzero-stance1.png -------------------------------------------------------------------------------- /assets/subzero/subzero-stance2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/subzero/subzero-stance2.png -------------------------------------------------------------------------------- /assets/subzero/subzero-stance3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/subzero/subzero-stance3.png -------------------------------------------------------------------------------- /assets/subzero/subzero-stance4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/subzero/subzero-stance4.png -------------------------------------------------------------------------------- /assets/subzero/subzero-stance5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/subzero/subzero-stance5.png -------------------------------------------------------------------------------- /assets/subzero/subzero-stance6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/subzero/subzero-stance6.png -------------------------------------------------------------------------------- /assets/subzero/subzero-stance7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/subzero/subzero-stance7.png -------------------------------------------------------------------------------- /assets/subzero/subzero-stance8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/subzero/subzero-stance8.png -------------------------------------------------------------------------------- /assets/subzero/subzero-stance9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/subzero/subzero-stance9.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-airkick1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-airkick1.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-airkick2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-airkick2.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-airkick3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-airkick3.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-death10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-death10.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-death11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-death11.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-death12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-death12.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-death13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-death13.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-death14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-death14.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-death15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-death15.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-death16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-death16.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-death17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-death17.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-death18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-death18.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-death19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-death19.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-death20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-death20.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-highhit1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-highhit1.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-highhit2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-highhit2.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-highhit3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-highhit3.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-highhit4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-highhit4.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-highhit5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-highhit5.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-stance1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-stance1.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-stance2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-stance2.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-stance3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-stance3.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-stance4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-stance4.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-stance5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-stance5.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-stance6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-stance6.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-stance7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-stance7.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-stance8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-stance8.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-stance9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-stance9.png -------------------------------------------------------------------------------- /assets/claudia/claudia-staticjump1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/claudia/claudia-staticjump1.png -------------------------------------------------------------------------------- /assets/scorpion/scorpion-staticjump1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gara501/pixi-game/HEAD/assets/scorpion/scorpion-staticjump1.png -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - node 4 | notifications: 5 | email: false 6 | script: bash ./deploy.sh 7 | cache: yarn 8 | branches: 9 | only: 10 | - master 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Huge Kombat 2 | Game using PixiJS 3 | 4 | ## Demo 5 | https://gara501.github.io/pixi-game/ 6 | 7 | ## To Run it 8 | 1. npm install (or yarn). 9 | 2. npm start (or yarn start). 10 | 3. Open the game on http://localhost:3001 11 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports = { 4 | mode: 'development', 5 | entry: ["./app/index.js"], 6 | output: { 7 | path: path.resolve(__dirname, "./build"), 8 | filename: "bundle.js" 9 | }, 10 | devtool: "sourcemap" 11 | }; 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | *.DS_Store 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | 13 | # Compiled binary addons (http://nodejs.org/api/addons.html) 14 | build/Release 15 | 16 | # Dependency directories 17 | node_modules 18 | 19 | # Optional npm cache directory 20 | .npm 21 | 22 | build/bundle.js 23 | build/bundle.js.map 24 | -------------------------------------------------------------------------------- /app/coli.js: -------------------------------------------------------------------------------- 1 | export function cheapColi(a, b) { 2 | const ab = a.getBounds(); 3 | const bb = b.getBounds(); 4 | 5 | const hasColi = ( 6 | ab.x + ab.width > bb.x && 7 | ab.x < bb.x + bb.width && 8 | ab.y + ab.height > bb.y && 9 | ab.y < bb.y + bb.height 10 | ) 11 | 12 | if (hasColi) { 13 | return ab.x < bb.x ? 'right' : 'left'; 14 | } 15 | 16 | return false; 17 | } 18 | -------------------------------------------------------------------------------- /deploy.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | REMOTE_URL=$(git config remote.origin.url) 3 | HTTPS_PROTOCOL="https://" 4 | GIT_PROTOCOL="git://" 5 | REPO_URL=${REMOTE_URL/$HTTPS_PROTOCOL} 6 | REPO_URL=${REPO_URL/$GIT_PROTOCOL} 7 | 8 | yarn run build 9 | 10 | cd build 11 | 12 | git init 13 | 14 | git config user.name "gandres' Travis CI" 15 | git config user.email "gandres.ramirez@gmail.com" 16 | 17 | git add -A . 18 | git commit -m "Auto-updated GitHub Pages" 19 | 20 | git push --force "https://${TOKEN}@${REPO_URL}" master:gh-pages >/dev/null 2>&1 21 | -------------------------------------------------------------------------------- /app/keyboard.js: -------------------------------------------------------------------------------- 1 | function keyboard(keyCode) { 2 | var key = {}; 3 | key.code = keyCode; 4 | key.isDown = false; 5 | key.isUp = true; 6 | key.press = undefined; 7 | key.release = undefined; 8 | //The `downHandler` 9 | key.downHandler = function(event) { 10 | if (event.keyCode === key.code) { 11 | if (key.isUp && key.press) key.press(); 12 | key.isDown = true; 13 | key.isUp = false; 14 | } 15 | event.preventDefault(); 16 | }; 17 | 18 | //The `upHandler` 19 | key.upHandler = function(event) { 20 | if (event.keyCode === key.code) { 21 | if (key.isDown && key.release) key.release(); 22 | key.isDown = false; 23 | key.isUp = true; 24 | } 25 | event.preventDefault(); 26 | }; 27 | 28 | //Attach event listeners 29 | window.addEventListener("keydown", key.downHandler.bind(key), false); 30 | window.addEventListener("keyup", key.upHandler.bind(key), false); 31 | return key; 32 | } 33 | 34 | export default keyboard; 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pixi-game", 3 | "version": "2.0.0", 4 | "description": "Javascript basic game", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack --mode production", 8 | "start": "webpack-dev-server --hot --inline --port 3001 --content-base ./build" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/gara501/pixi-game.git" 13 | }, 14 | "babel": { 15 | "presets": [ 16 | "es2015" 17 | ] 18 | }, 19 | "keywords": [ 20 | "game", 21 | "pixi.js" 22 | ], 23 | "author": "Andres Ramirez", 24 | "license": "ISC", 25 | "bugs": { 26 | "url": "https://github.com/gara501/pixi-game/issues" 27 | }, 28 | "homepage": "https://github.com/gara501/pixi-game#readme", 29 | "devDependencies": { 30 | "howler": "^2.0.15", 31 | "pixi.js": "^4.8.2", 32 | "webpack-cli": "^3.1.2" 33 | }, 34 | "dependencies": { 35 | "webpack": "^4.20.2", 36 | "webpack-dev-server": "^3.1.9" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /app/textStyles.js: -------------------------------------------------------------------------------- 1 | import * as PIXI from "pixi.js"; 2 | 3 | class TextStyles { 4 | constructor(renderer) { 5 | this.renderer = renderer; 6 | } 7 | 8 | getTextObject(options, style) { 9 | let title = new PIXI.Text(options.textValue, style); 10 | if (options.x === "center") { 11 | title.x = this.renderer.width / 2 - title.width / 2; 12 | } else { 13 | title.x = options.x; 14 | } 15 | if (options.y === "center") { 16 | title.y = this.renderer.height / 2 - title.height / 2; 17 | } else { 18 | title.y = options.y; 19 | } 20 | return title; 21 | } 22 | 23 | customText(value, posx, posy) { 24 | let title = this.getTextObject( 25 | { 26 | textValue: value, 27 | x: posx, 28 | y: posy, 29 | vx: 2, 30 | vy: 0 31 | }, 32 | this.generalStyle() 33 | ); 34 | return title; 35 | } 36 | 37 | comandsText(value, posx, posy) { 38 | let title = this.getTextObject( 39 | { 40 | textValue: value, 41 | x: posx, 42 | y: posy, 43 | vx: 2, 44 | vy: 0 45 | }, 46 | this.basicStyle() 47 | ); 48 | return title; 49 | } 50 | 51 | finishText(value, posx, posy, size=64) { 52 | let title = this.getTextObject( 53 | { 54 | textValue: value, 55 | x: posx, 56 | y: posy, 57 | vx: 2, 58 | vy: 0 59 | }, 60 | this.generalStyle(size) 61 | ); 62 | return title; 63 | } 64 | 65 | generalStyle(fontSizeValue=36) { 66 | let titleStyle = new PIXI.TextStyle({ 67 | fontFamily: "mk", 68 | fontSize: fontSizeValue, 69 | fill: ["#ff0000", "#444"], // gradient 70 | wordWrapWidth: 440 71 | }); 72 | 73 | return titleStyle; 74 | } 75 | 76 | basicStyle(fontSizeValue=20) { 77 | let titleStyle = new PIXI.TextStyle({ 78 | fontFamily: "mk", 79 | fontSize: fontSizeValue, 80 | fill: ["#fff", "#fff"], // gradient 81 | wordWrapWidth: 440 82 | }); 83 | 84 | return titleStyle; 85 | } 86 | 87 | } 88 | 89 | export default TextStyles; 90 | -------------------------------------------------------------------------------- /app/characters.json: -------------------------------------------------------------------------------- 1 | { 2 | "characters": [ 3 | { 4 | "name": "scorpion", 5 | "x": 180, 6 | "profile": "assets/images/characters/scorpion.jpg", 7 | "scale": 1.5, 8 | "active": true, 9 | "animations": [ 10 | { 11 | "name": "stance", 12 | "frames": 9, 13 | "animationSpeed": 0.15, 14 | "loop": true, 15 | "visible": true 16 | }, 17 | { 18 | "name": "walk", 19 | "frames": 9, 20 | "loop": true, 21 | "animationSpeed": 0.15 22 | }, 23 | { 24 | "name": "duck", 25 | "frames": 3, 26 | "animationSpeed": 0.4 27 | }, 28 | { 29 | "name": "kick", 30 | "frames": 10, 31 | "animationSpeed": 0.4 32 | }, 33 | { 34 | "name": "raise", 35 | "frames": 3, 36 | "animationSpeed": 0.4 37 | }, 38 | { 39 | "name": "punch", 40 | "frames": 5, 41 | "animationSpeed": 0.3 42 | }, 43 | { 44 | "name": "jump", 45 | "frames": 9, 46 | "animationSpeed": 0.3 47 | }, 48 | { 49 | "name": "staticjump", 50 | "frames": 1, 51 | "animationSpeed": 1 52 | }, 53 | { 54 | "name": "airkick", 55 | "frames": 3, 56 | "animationSpeed": 0.3 57 | }, 58 | { 59 | "name": "hit", 60 | "frames": 5, 61 | "animationSpeed": 0.35 62 | }, 63 | { 64 | "name": "highhit", 65 | "frames": 5, 66 | "animationSpeed": 0.35 67 | }, 68 | { 69 | "name": "death", 70 | "frames": 20, 71 | "animationSpeed": 0.20, 72 | "loop": true 73 | } 74 | ] 75 | }, 76 | { 77 | "name": "reptile", 78 | "x": 180, 79 | "scale": 1.5, 80 | "active": false, 81 | "profile": "assets/images/characters/reptile.jpg", 82 | "animations": [ 83 | { 84 | "name": "stance", 85 | "frames": 9, 86 | "animationSpeed": 0.15, 87 | "loop": true, 88 | "visible": true 89 | }, 90 | { 91 | "name": "walk", 92 | "frames": 9, 93 | "loop": true, 94 | "animationSpeed": 0.15 95 | }, 96 | { 97 | "name": "duck", 98 | "frames": 3, 99 | "animationSpeed": 0.4 100 | }, 101 | { 102 | "name": "kick", 103 | "frames": 10, 104 | "animationSpeed": 0.4 105 | }, 106 | { 107 | "name": "raise", 108 | "frames": 3, 109 | "animationSpeed": 0.4 110 | }, 111 | { 112 | "name": "punch", 113 | "frames": 5, 114 | "animationSpeed": 0.3 115 | }, 116 | { 117 | "name": "jump", 118 | "frames": 9, 119 | "animationSpeed": 0.3 120 | }, 121 | { 122 | "name": "staticjump", 123 | "frames": 1, 124 | "animationSpeed": 1 125 | }, 126 | { 127 | "name": "airkick", 128 | "frames": 3, 129 | "animationSpeed": 0.3 130 | } 131 | ] 132 | }, 133 | { 134 | "name": "snow", 135 | "x": 180, 136 | "scale": 1.5, 137 | "active": false, 138 | "profile": "assets/images/characters/snowP.png", 139 | "animations": [ 140 | { 141 | "name": "stance", 142 | "frames": 9, 143 | "animationSpeed": 0.15, 144 | "loop": true, 145 | "visible": true 146 | }, 147 | { 148 | "name": "walk", 149 | "frames": 9, 150 | "loop": true, 151 | "animationSpeed": 0.15 152 | }, 153 | { 154 | "name": "duck", 155 | "frames": 3, 156 | "animationSpeed": 0.4 157 | }, 158 | { 159 | "name": "kick", 160 | "frames": 10, 161 | "animationSpeed": 0.4 162 | }, 163 | { 164 | "name": "raise", 165 | "frames": 3, 166 | "animationSpeed": 0.4 167 | }, 168 | { 169 | "name": "punch", 170 | "frames": 5, 171 | "animationSpeed": 0.3 172 | }, 173 | { 174 | "name": "jump", 175 | "frames": 9, 176 | "animationSpeed": 0.3 177 | }, 178 | { 179 | "name": "staticjump", 180 | "frames": 1, 181 | "animationSpeed": 1 182 | }, 183 | { 184 | "name": "airkick", 185 | "frames": 3, 186 | "animationSpeed": 0.3 187 | } 188 | ] 189 | }, 190 | { 191 | "name": "aram", 192 | "x": 180, 193 | "scale": 1, 194 | "active": true, 195 | "profile": "assets/images/characters/aram.jpg", 196 | "animations": [ 197 | { 198 | "name": "stance", 199 | "frames": 4, 200 | "animationSpeed": 0.15, 201 | "loop": true, 202 | "visible": true 203 | }, 204 | { 205 | "name": "walk", 206 | "frames": 1, 207 | "loop": true, 208 | "animationSpeed": 0.15 209 | }, 210 | { 211 | "name": "duck", 212 | "frames": 1, 213 | "animationSpeed": 0.4 214 | }, 215 | { 216 | "name": "kick", 217 | "frames": 7, 218 | "animationSpeed": 0.4 219 | }, 220 | { 221 | "name": "punch", 222 | "frames": 5, 223 | "animationSpeed": 0.3 224 | }, 225 | { 226 | "name": "jump", 227 | "frames": 1, 228 | "animationSpeed": 0.3 229 | }, 230 | { 231 | "name": "staticjump", 232 | "frames": 1, 233 | "animationSpeed": 1 234 | }, 235 | { 236 | "name": "airkick", 237 | "frames": 1, 238 | "animationSpeed": 0.3 239 | } 240 | ] 241 | }, 242 | { 243 | "name": "subzero", 244 | "x": 770, 245 | "scale": 1.5, 246 | "opponent": true, 247 | "profile": "assets/images/characters/subzero.jpg", 248 | "active": false, 249 | "animations": [ 250 | { 251 | "name": "stance", 252 | "frames": 9, 253 | "animationSpeed": 0.15, 254 | "loop": true, 255 | "visible": true 256 | }, 257 | { 258 | "name": "hit", 259 | "frames": 5, 260 | "animationSpeed": 0.35 261 | }, 262 | { 263 | "name": "highhit", 264 | "frames": 5, 265 | "animationSpeed": 0.35 266 | } 267 | ] 268 | }, 269 | { 270 | "name": "claudia", 271 | "x": 180, 272 | "profile": "assets/images/characters/claudia-portrait.png", 273 | "scale": 0.55, 274 | "active": true, 275 | "animations": [ 276 | { 277 | "name": "stance", 278 | "frames": 1, 279 | "animationSpeed": 0.15, 280 | "loop": true, 281 | "visible": true 282 | }, 283 | { 284 | "name": "walk", 285 | "frames": 4, 286 | "loop": true, 287 | "animationSpeed": 0.15 288 | }, 289 | { 290 | "name": "duck", 291 | "frames": 1, 292 | "animationSpeed": 0.4 293 | }, 294 | { 295 | "name": "kick", 296 | "frames": 3, 297 | "animationSpeed": 0.4 298 | }, 299 | { 300 | "name": "raise", 301 | "frames": 1, 302 | "animationSpeed": 0.4 303 | }, 304 | { 305 | "name": "punch", 306 | "frames": 3, 307 | "animationSpeed": 0.3 308 | }, 309 | { 310 | "name": "jump", 311 | "frames": 1, 312 | "animationSpeed": 0.3 313 | }, 314 | { 315 | "name": "staticjump", 316 | "frames": 1, 317 | "animationSpeed": 1 318 | }, 319 | { 320 | "name": "airkick", 321 | "frames": 3, 322 | "animationSpeed": 0.3 323 | }, 324 | { 325 | "name": "hit", 326 | "frames": 1, 327 | "animationSpeed": 0.35 328 | }, 329 | { 330 | "name": "highhit", 331 | "frames": 1, 332 | "animationSpeed": 0.35 333 | }, 334 | { 335 | "name": "death", 336 | "frames": 20, 337 | "animationSpeed": 0.20, 338 | "loop": true 339 | } 340 | ] 341 | }, 342 | { 343 | "name": "pao", 344 | "x": 180, 345 | "profile": "assets/images/characters/pao-portrait.png", 346 | "scale": 0.52, 347 | "active": true, 348 | "animations": [ 349 | { 350 | "name": "stance", 351 | "frames": 1, 352 | "animationSpeed": 0.15, 353 | "loop": true, 354 | "visible": true 355 | }, 356 | { 357 | "name": "walk", 358 | "frames": 3, 359 | "loop": true, 360 | "animationSpeed": 0.15 361 | }, 362 | { 363 | "name": "duck", 364 | "frames": 1, 365 | "animationSpeed": 0.4 366 | }, 367 | { 368 | "name": "kick", 369 | "frames": 3, 370 | "animationSpeed": 0.4 371 | }, 372 | { 373 | "name": "raise", 374 | "frames": 1, 375 | "animationSpeed": 0.4 376 | }, 377 | { 378 | "name": "punch", 379 | "frames": 3, 380 | "animationSpeed": 0.3 381 | }, 382 | { 383 | "name": "jump", 384 | "frames": 1, 385 | "animationSpeed": 0.3 386 | }, 387 | { 388 | "name": "staticjump", 389 | "frames": 1, 390 | "animationSpeed": 1 391 | }, 392 | { 393 | "name": "airkick", 394 | "frames": 3, 395 | "animationSpeed": 0.3 396 | }, 397 | { 398 | "name": "hit", 399 | "frames": 1, 400 | "animationSpeed": 0.35 401 | }, 402 | { 403 | "name": "highhit", 404 | "frames": 1, 405 | "animationSpeed": 0.35 406 | }, 407 | { 408 | "name": "death", 409 | "frames": 20, 410 | "animationSpeed": 0.20, 411 | "loop": true 412 | } 413 | ] 414 | } 415 | ] 416 | } 417 | -------------------------------------------------------------------------------- /app/spriteUtilities.js: -------------------------------------------------------------------------------- 1 | class SpriteUtilities { 2 | constructor(renderingEngine = PIXI) { 3 | if (renderingEngine === undefined) 4 | throw new Error( 5 | "Please supply a reference to PIXI in the SpriteUtilities constructor before using spriteUtilities.js" 6 | ); 7 | 8 | //Find out which rendering engine is being used (the default is Pixi) 9 | this.renderer = ""; 10 | 11 | //If the `renderingEngine` is Pixi, set up Pixi object aliases 12 | if (renderingEngine.particles.ParticleContainer && renderingEngine.Sprite) { 13 | this.renderer = "pixi"; 14 | this.Container = renderingEngine.Container; 15 | this.ParticleContainer = renderingEngine.particles.ParticleContainer; 16 | this.TextureCache = renderingEngine.utils.TextureCache; 17 | this.Texture = renderingEngine.Texture; 18 | this.Rectangle = renderingEngine.Rectangle; 19 | this.MovieClip = renderingEngine.extras.AnimatedSprite; 20 | this.BitmapText = renderingEngine.extras.BitmapText; 21 | this.Sprite = renderingEngine.Sprite; 22 | this.TilingSprite = renderingEngine.extras.TilingSprite; 23 | this.Graphics = renderingEngine.Graphics; 24 | this.Text = renderingEngine.Text; 25 | 26 | //An array to store all the shaking sprites 27 | this.shakingSprites = []; 28 | } 29 | } 30 | 31 | update() { 32 | if (this.shakingSprites.length > 0) { 33 | for (let i = this.shakingSprites.length - 1; i >= 0; i--) { 34 | let shakingSprite = this.shakingSprites[i]; 35 | if (shakingSprite.updateShake) shakingSprite.updateShake(); 36 | } 37 | } 38 | } 39 | 40 | sprite(source, x = 0, y = 0, tiling = false, width, height) { 41 | let o, texture; 42 | 43 | //Create a sprite if the `source` is a string 44 | if (typeof source === "string") { 45 | //Access the texture in the cache if it's there 46 | if (this.TextureCache[source]) { 47 | texture = this.TextureCache[source]; 48 | } else { 49 | //If it's not is the cache, load it from the source file 50 | texture = this.Texture.fromImage(source); 51 | } 52 | 53 | //If the texture was created, make the o 54 | if (texture) { 55 | //If `tiling` is `false`, make a regular `Sprite` 56 | if (!tiling) { 57 | o = new this.Sprite(texture); 58 | } else { 59 | //If `tiling` is `true` make a `TilingSprite` 60 | o = new this.TilingSprite(texture, width, height); 61 | } 62 | } else { 63 | //But if the source still can't be found, alert the user 64 | throw new Error(`${source} cannot be found`); 65 | } 66 | } else if (source instanceof this.Texture) { 67 | //Create a o if the `source` is a texture 68 | if (!tiling) { 69 | o = new this.Sprite(source); 70 | } else { 71 | o = new this.TilingSprite(source, width, height); 72 | } 73 | } else if (source instanceof Array) { 74 | //Create a `MovieClip` o if the `source` is an array 75 | //Is it an array of frame ids or textures? 76 | if (typeof source[0] === "string") { 77 | //They're strings, but are they pre-existing texture or 78 | //paths to image files? 79 | //Check to see if the first element matches a texture in the 80 | //cache 81 | if (this.TextureCache[source[0]]) { 82 | //It does, so it's an array of frame ids 83 | o = this.MovieClip.fromFrames(source); 84 | } else { 85 | //It's not already in the cache, so let's load it 86 | o = this.MovieClip.fromImages(source); 87 | } 88 | } else if (source[0] instanceof this.Texture) { 89 | //If the `source` isn't an array of strings, check whether 90 | //it's an array of textures 91 | //Yes, it's an array of textures. 92 | //Use them to make a MovieClip o 93 | o = new this.MovieClip(source); 94 | } 95 | } 96 | 97 | //If the sprite was successfully created, intialize it 98 | if (o) { 99 | //Position the sprite 100 | o.x = x; 101 | o.y = y; 102 | 103 | //Set optional width and height 104 | if (width) o.width = width; 105 | if (height) o.height = height; 106 | 107 | //If the sprite is a MovieClip, add a state player so that 108 | //it's easier to control 109 | if (o instanceof this.MovieClip) this.addStatePlayer(o); 110 | 111 | //Assign the sprite 112 | return o; 113 | } 114 | } 115 | 116 | addStatePlayer(sprite) { 117 | let frameCounter = 0, 118 | numberOfFrames = 0, 119 | startFrame = 0, 120 | endFrame = 0, 121 | timerInterval = undefined; 122 | 123 | //The `show` function (to display static states) 124 | function show(frameNumber) { 125 | //Reset any possible previous animations 126 | reset(); 127 | 128 | //Find the new state on the sprite 129 | sprite.gotoAndStop(frameNumber); 130 | } 131 | 132 | //The `stop` function stops the animation at the current frame 133 | function stopAnimation() { 134 | reset(); 135 | sprite.gotoAndStop(sprite.currentFrame); 136 | } 137 | 138 | //The `playSequence` function, to play a sequence of frames 139 | function playAnimation(sequenceArray) { 140 | //Reset any possible previous animations 141 | reset(); 142 | 143 | //Figure out how many frames there are in the range 144 | if (!sequenceArray) { 145 | startFrame = 0; 146 | endFrame = sprite.totalFrames - 1; 147 | } else { 148 | startFrame = sequenceArray[0]; 149 | endFrame = sequenceArray[1]; 150 | } 151 | 152 | //Calculate the number of frames 153 | numberOfFrames = endFrame - startFrame; 154 | 155 | //Compensate for two edge cases: 156 | //1. If the `startFrame` happens to be `0` 157 | /* 158 | if (startFrame === 0) { 159 | numberOfFrames += 1; 160 | frameCounter += 1; 161 | } 162 | */ 163 | 164 | //2. If only a two-frame sequence was provided 165 | /* 166 | if(numberOfFrames === 1) { 167 | numberOfFrames = 2; 168 | frameCounter += 1; 169 | } 170 | */ 171 | 172 | //Calculate the frame rate. Set the default fps to 12 173 | if (!sprite.fps) sprite.fps = 12; 174 | let frameRate = 1000 / sprite.fps; 175 | 176 | //Set the sprite to the starting frame 177 | sprite.gotoAndStop(startFrame); 178 | 179 | //Set the `frameCounter` to the first frame 180 | frameCounter = 1; 181 | 182 | //If the state isn't already `playing`, start it 183 | if (!sprite.animating) { 184 | timerInterval = setInterval(advanceFrame.bind(this), frameRate); 185 | sprite.animating = true; 186 | } 187 | } 188 | 189 | //`advanceFrame` is called by `setInterval` to display the next frame 190 | //in the sequence based on the `frameRate`. When the frame sequence 191 | //reaches the end, it will either stop or loop 192 | function advanceFrame() { 193 | //Advance the frame if `frameCounter` is less than 194 | //the state's total frames 195 | if (frameCounter < numberOfFrames + 1) { 196 | //Advance the frame 197 | sprite.gotoAndStop(sprite.currentFrame + 1); 198 | 199 | //Update the frame counter 200 | frameCounter += 1; 201 | 202 | //If we've reached the last frame and `loop` 203 | //is `true`, then start from the first frame again 204 | } else { 205 | if (sprite.loop) { 206 | sprite.gotoAndStop(startFrame); 207 | frameCounter = 1; 208 | } 209 | } 210 | } 211 | 212 | function reset() { 213 | //Reset `sprite.playing` to `false`, set the `frameCounter` to 0, //and clear the `timerInterval` 214 | if (timerInterval !== undefined && sprite.animating === true) { 215 | sprite.animating = false; 216 | frameCounter = 0; 217 | startFrame = 0; 218 | endFrame = 0; 219 | numberOfFrames = 0; 220 | clearInterval(timerInterval); 221 | } 222 | } 223 | 224 | //Add the `show`, `play`, `stop`, and `playSequence` methods to the sprite 225 | sprite.show = show; 226 | sprite.stopAnimation = stopAnimation; 227 | sprite.playAnimation = playAnimation; 228 | } 229 | 230 | //`tilingSpirte` lets you quickly create Pixi tiling sprites 231 | tilingSprite(source, width, height, x, y) { 232 | if (width === undefined) { 233 | throw new Error( 234 | "Please define a width as your second argument for the tiling sprite" 235 | ); 236 | } 237 | if (height === undefined) { 238 | throw new Error( 239 | "Please define a height as your third argument for the tiling sprite" 240 | ); 241 | } 242 | let o = this.sprite(source, x, y, true, width, height); 243 | 244 | //Add `tileX`, `tileY`, `tileScaleX` and `tileScaleY` properties 245 | Object.defineProperties(o, { 246 | tileX: { 247 | get() { 248 | return o.tilePosition.x; 249 | }, 250 | set(value) { 251 | o.tilePosition.x = value; 252 | }, 253 | enumerable: true, 254 | configurable: true 255 | }, 256 | tileY: { 257 | get() { 258 | return o.tilePosition.y; 259 | }, 260 | set(value) { 261 | o.tilePosition.y = value; 262 | }, 263 | enumerable: true, 264 | configurable: true 265 | }, 266 | tileScaleX: { 267 | get() { 268 | return o.tileScale.x; 269 | }, 270 | set(value) { 271 | o.tileScale.x = value; 272 | }, 273 | enumerable: true, 274 | configurable: true 275 | }, 276 | tileScaleY: { 277 | get() { 278 | return o.tileScale.y; 279 | }, 280 | set(value) { 281 | o.tileScale.y = value; 282 | }, 283 | enumerable: true, 284 | configurable: true 285 | } 286 | }); 287 | 288 | return o; 289 | } 290 | 291 | filmstrip(texture, frameWidth, frameHeight, spacing = 0) { 292 | //An array to store the x/y positions of the frames 293 | let positions = []; 294 | 295 | //Find the width and height of the texture 296 | let textureWidth = this.TextureCache[texture].width, 297 | textureHeight = this.TextureCache[texture].height; 298 | 299 | //Find out how many columns and rows there are 300 | let columns = textureWidth / frameWidth, rows = textureHeight / frameHeight; 301 | 302 | //Find the total number of frames 303 | let numberOfFrames = columns * rows; 304 | 305 | for (let i = 0; i < numberOfFrames; i++) { 306 | //Find the correct row and column for each frame 307 | //and figure out its x and y position 308 | let x = i % columns * frameWidth, 309 | y = Math.floor(i / columns) * frameHeight; 310 | 311 | //Compensate for any optional spacing (padding) around the tiles if 312 | //there is any. This bit of code accumlates the spacing offsets from the 313 | //left side of the tileset and adds them to the current tile's position 314 | if (spacing > 0) { 315 | x += spacing + spacing * i % columns; 316 | y += spacing + spacing * Math.floor(i / columns); 317 | } 318 | 319 | //Add the x and y value of each frame to the `positions` array 320 | positions.push([x, y]); 321 | } 322 | 323 | //Return the frames 324 | return this.frames(texture, positions, frameWidth, frameHeight); 325 | } 326 | 327 | //Make a texture from a frame in another texture or image 328 | frame(source, x, y, width, height) { 329 | let texture, imageFrame; 330 | 331 | //If the source is a string, it's either a texture in the 332 | //cache or an image file 333 | if (typeof source === "string") { 334 | if (this.TextureCache[source]) { 335 | texture = new this.Texture(this.TextureCache[source]); 336 | } 337 | } else if (source instanceof this.Texture) { 338 | //If the `source` is a texture, use it 339 | texture = new this.Texture(source); 340 | } 341 | if (!texture) { 342 | throw new Error(`Please load the ${source} texture into the cache.`); 343 | } else { 344 | //Make a rectangle the size of the sub-image 345 | imageFrame = new this.Rectangle(x, y, width, height); 346 | texture.frame = imageFrame; 347 | return texture; 348 | } 349 | } 350 | 351 | //Make an array of textures from a 2D array of frame x and y coordinates in 352 | //texture 353 | frames(source, coordinates, frameWidth, frameHeight) { 354 | let baseTexture, textures; 355 | 356 | //If the source is a string, it's either a texture in the 357 | //cache or an image file 358 | if (typeof source === "string") { 359 | if (this.TextureCache[source]) { 360 | baseTexture = new this.Texture(this.TextureCache[source]); 361 | } 362 | } else if (source instanceof this.Texture) { 363 | //If the `source` is a texture, use it 364 | baseTexture = new this.Texture(source); 365 | } 366 | if (!baseTexture) { 367 | throw new Error(`Please load the ${source} texture into the cache.`); 368 | } else { 369 | let textures = coordinates.map(position => { 370 | let x = position[0], y = position[1]; 371 | let imageFrame = new this.Rectangle(x, y, frameWidth, frameHeight); 372 | let frameTexture = new this.Texture(baseTexture); 373 | frameTexture.frame = imageFrame; 374 | return frameTexture; 375 | }); 376 | return textures; 377 | } 378 | } 379 | 380 | frameSeries(startNumber = 0, endNumber = 1, baseName = "", extension = "") { 381 | //Create an array to store the frame names 382 | let frames = []; 383 | 384 | for (let i = startNumber; i < endNumber + 1; i++) { 385 | let frame = this.TextureCache[`${baseName + i + extension}`]; 386 | frames.push(frame); 387 | } 388 | return frames; 389 | } 390 | 391 | /* Text creation */ 392 | 393 | //The`text` method is a quick way to create a Pixi Text sprite 394 | text( 395 | content = "message", 396 | font = "16px sans", 397 | fillStyle = "red", 398 | x = 0, 399 | y = 0 400 | ) { 401 | //Create a Pixi Sprite object 402 | let message = new this.Text(content, { font: font, fill: fillStyle }); 403 | message.x = x; 404 | message.y = y; 405 | 406 | //Add a `_text` property with a getter/setter 407 | message._content = content; 408 | Object.defineProperty(message, "content", { 409 | get() { 410 | return this._content; 411 | }, 412 | set(value) { 413 | this._content = value; 414 | this.text = value; 415 | }, 416 | enumerable: true, 417 | configurable: true 418 | }); 419 | 420 | //Return the text object 421 | return message; 422 | } 423 | 424 | //The`bitmapText` method lets you create bitmap text 425 | bitmapText(content = "message", font, align, tint, x = 0, y = 0) { 426 | //Create a Pixi Sprite object 427 | let message = new this.BitmapText(content, { 428 | font: font, 429 | align: align, 430 | tint: tint 431 | }); 432 | message.x = x; 433 | message.y = y; 434 | 435 | //Add a `_text` property with a getter/setter 436 | message._content = content; 437 | Object.defineProperty(message, "content", { 438 | get() { 439 | return this._content; 440 | }, 441 | set(value) { 442 | this._content = value; 443 | this.text = value; 444 | }, 445 | enumerable: true, 446 | configurable: true 447 | }); 448 | 449 | //Return the text object 450 | return message; 451 | } 452 | 453 | /* Shapes and lines */ 454 | 455 | //Rectangle 456 | rectangle( 457 | width = 32, 458 | height = 32, 459 | fillStyle = 0xff3300, 460 | strokeStyle = 0x0033cc, 461 | lineWidth = 0, 462 | x = 0, 463 | y = 0 464 | ) { 465 | let o = new this.Graphics(); 466 | o._sprite = undefined; 467 | o._width = width; 468 | o._height = height; 469 | o._fillStyle = this.color(fillStyle); 470 | o._strokeStyle = this.color(strokeStyle); 471 | o._lineWidth = lineWidth; 472 | 473 | //Draw the rectangle 474 | let draw = (width, height, fillStyle, strokeStyle, lineWidth) => { 475 | o.clear(); 476 | o.beginFill(fillStyle); 477 | if (lineWidth > 0) { 478 | o.lineStyle(lineWidth, strokeStyle, 1); 479 | } 480 | o.drawRect(0, 0, width, height); 481 | o.endFill(); 482 | }; 483 | 484 | //Draw the line and capture the sprite that the `draw` function 485 | //returns 486 | draw(o._width, o._height, o._fillStyle, o._strokeStyle, o._lineWidth); 487 | 488 | //Generate a texture from the rectangle 489 | let texture = o.generateTexture(); 490 | 491 | //Use the texture to create a sprite 492 | let sprite = new this.Sprite(texture); 493 | 494 | //Position the sprite 495 | sprite.x = x; 496 | sprite.y = y; 497 | 498 | //Add getters and setters to the sprite 499 | let self = this; 500 | Object.defineProperties(sprite, { 501 | fillStyle: { 502 | get() { 503 | return o._fillStyle; 504 | }, 505 | set(value) { 506 | o._fillStyle = self.color(value); 507 | 508 | //Draw the new rectangle 509 | draw( 510 | o._width, 511 | o._height, 512 | o._fillStyle, 513 | o._strokeStyle, 514 | o._lineWidth, 515 | o._x, 516 | o._y 517 | ); 518 | 519 | //Generate a new texture and set it as the sprite's texture 520 | let texture = o.generateTexture(); 521 | o._sprite.texture = texture; 522 | }, 523 | enumerable: true, 524 | configurable: true 525 | }, 526 | strokeStyle: { 527 | get() { 528 | return o._strokeStyle; 529 | }, 530 | set(value) { 531 | o._strokeStyle = self.color(value); 532 | 533 | //Draw the new rectangle 534 | draw( 535 | o._width, 536 | o._height, 537 | o._fillStyle, 538 | o._strokeStyle, 539 | o._lineWidth, 540 | o._x, 541 | o._y 542 | ); 543 | 544 | //Generate a new texture and set it as the sprite's texture 545 | let texture = o.generateTexture(); 546 | o._sprite.texture = texture; 547 | }, 548 | enumerable: true, 549 | configurable: true 550 | }, 551 | lineWidth: { 552 | get() { 553 | return o._lineWidth; 554 | }, 555 | set(value) { 556 | o._lineWidth = value; 557 | 558 | //Draw the new rectangle 559 | draw( 560 | o._width, 561 | o._height, 562 | o._fillStyle, 563 | o._strokeStyle, 564 | o._lineWidth, 565 | o._x, 566 | o._y 567 | ); 568 | 569 | //Generate a new texture and set it as the sprite's texture 570 | let texture = o.generateTexture(); 571 | o._sprite.texture = texture; 572 | }, 573 | enumerable: true, 574 | configurable: true 575 | } 576 | }); 577 | 578 | //Get a local reference to the sprite so that we can 579 | //change the rectangle properties later using the getters/setters 580 | o._sprite = sprite; 581 | 582 | //Return the sprite 583 | return sprite; 584 | } 585 | 586 | //Circle 587 | circle( 588 | diameter = 32, 589 | fillStyle = 0xff3300, 590 | strokeStyle = 0x0033cc, 591 | lineWidth = 0, 592 | x = 0, 593 | y = 0 594 | ) { 595 | let o = new this.Graphics(); 596 | o._diameter = diameter; 597 | o._fillStyle = this.color(fillStyle); 598 | o._strokeStyle = this.color(strokeStyle); 599 | o._lineWidth = lineWidth; 600 | 601 | //Draw the circle 602 | let draw = (diameter, fillStyle, strokeStyle, lineWidth) => { 603 | o.clear(); 604 | o.beginFill(fillStyle); 605 | if (lineWidth > 0) { 606 | o.lineStyle(lineWidth, strokeStyle, 1); 607 | } 608 | o.drawCircle(0, 0, diameter / 2); 609 | o.endFill(); 610 | }; 611 | 612 | //Draw the cirlce 613 | draw(o._diameter, o._fillStyle, o._strokeStyle, o._lineWidth); 614 | 615 | //Generate a texture from the rectangle 616 | let texture = o.generateTexture(); 617 | 618 | //Use the texture to create a sprite 619 | let sprite = new this.Sprite(texture); 620 | 621 | //Position the sprite 622 | sprite.x = x; 623 | sprite.y = y; 624 | 625 | //Add getters and setters to the sprite 626 | let self = this; 627 | Object.defineProperties(sprite, { 628 | fillStyle: { 629 | get() { 630 | return o._fillStyle; 631 | }, 632 | set(value) { 633 | o._fillStyle = self.color(value); 634 | 635 | //Draw the cirlce 636 | draw(o._diameter, o._fillStyle, o._strokeStyle, o._lineWidth); 637 | 638 | //Generate a new texture and set it as the sprite's texture 639 | let texture = o.generateTexture(); 640 | o._sprite.texture = texture; 641 | }, 642 | enumerable: true, 643 | configurable: true 644 | }, 645 | strokeStyle: { 646 | get() { 647 | return o._strokeStyle; 648 | }, 649 | set(value) { 650 | o._strokeStyle = self.color(value); 651 | 652 | //Draw the cirlce 653 | draw(o._diameter, o._fillStyle, o._strokeStyle, o._lineWidth); 654 | 655 | //Generate a new texture and set it as the sprite's texture 656 | let texture = o.generateTexture(); 657 | o._sprite.texture = texture; 658 | }, 659 | enumerable: true, 660 | configurable: true 661 | }, 662 | diameter: { 663 | get() { 664 | return o._diameter; 665 | }, 666 | set(value) { 667 | o._lineWidth = 10; 668 | 669 | //Draw the cirlce 670 | draw(o._diameter, o._fillStyle, o._strokeStyle, o._lineWidth); 671 | 672 | //Generate a new texture and set it as the sprite's texture 673 | let texture = o.generateTexture(); 674 | o._sprite.texture = texture; 675 | }, 676 | enumerable: true, 677 | configurable: true 678 | }, 679 | radius: { 680 | get() { 681 | return o._diameter / 2; 682 | }, 683 | set(value) { 684 | //Draw the cirlce 685 | draw(value * 2, o._fillStyle, o._strokeStyle, o._lineWidth); 686 | 687 | //Generate a new texture and set it as the sprite's texture 688 | let texture = o.generateTexture(); 689 | o._sprite.texture = texture; 690 | }, 691 | enumerable: true, 692 | configurable: true 693 | } 694 | }); 695 | //Get a local reference to the sprite so that we can 696 | //change the circle properties later using the getters/setters 697 | o._sprite = sprite; 698 | 699 | //Return the sprite 700 | return sprite; 701 | } 702 | 703 | //Line 704 | line( 705 | strokeStyle = 0x000000, 706 | lineWidth = 1, 707 | ax = 0, 708 | ay = 0, 709 | bx = 32, 710 | by = 32 711 | ) { 712 | //Create the line object 713 | let o = new this.Graphics(); 714 | 715 | //Private properties 716 | o._strokeStyle = this.color(strokeStyle); 717 | o._width = lineWidth; 718 | o._ax = ax; 719 | o._ay = ay; 720 | o._bx = bx; 721 | o._by = by; 722 | 723 | //A helper function that draws the line 724 | let draw = (strokeStyle, lineWidth, ax, ay, bx, by) => { 725 | o.clear(); 726 | o.lineStyle(lineWidth, strokeStyle, 1); 727 | o.moveTo(ax, ay); 728 | o.lineTo(bx, by); 729 | }; 730 | 731 | //Draw the line 732 | draw(o._strokeStyle, o._width, o._ax, o._ay, o._bx, o._by); 733 | 734 | //Define getters and setters that redefine the line's start and 735 | //end points and re-draws it if they change 736 | let self = this; 737 | Object.defineProperties(o, { 738 | ax: { 739 | get() { 740 | return o._ax; 741 | }, 742 | set(value) { 743 | o._ax = value; 744 | draw(o._strokeStyle, o._width, o._ax, o._ay, o._bx, o._by); 745 | }, 746 | enumerable: true, 747 | configurable: true 748 | }, 749 | ay: { 750 | get() { 751 | return o._ay; 752 | }, 753 | set(value) { 754 | o._ay = value; 755 | draw(o._strokeStyle, o._width, o._ax, o._ay, o._bx, o._by); 756 | }, 757 | enumerable: true, 758 | configurable: true 759 | }, 760 | bx: { 761 | get() { 762 | return o._bx; 763 | }, 764 | set(value) { 765 | o._bx = value; 766 | draw(o._strokeStyle, o._width, o._ax, o._ay, o._bx, o._by); 767 | }, 768 | enumerable: true, 769 | configurable: true 770 | }, 771 | by: { 772 | get() { 773 | return o._by; 774 | }, 775 | set(value) { 776 | o._by = value; 777 | draw(o._strokeStyle, o._width, o._ax, o._ay, o._bx, o._by); 778 | }, 779 | enumerable: true, 780 | configurable: true 781 | }, 782 | strokeStyle: { 783 | get() { 784 | return o._strokeStyle; 785 | }, 786 | set(value) { 787 | o._strokeStyle = self.color(value); 788 | 789 | //Draw the line 790 | draw(o._strokeStyle, o._width, o._ax, o._ay, o._bx, o._by); 791 | }, 792 | enumerable: true, 793 | configurable: true 794 | }, 795 | width: { 796 | get() { 797 | return o._width; 798 | }, 799 | set(value) { 800 | o._width = value; 801 | 802 | //Draw the line 803 | draw(o._strokeStyle, o._width, o._ax, o._ay, o._bx, o._by); 804 | }, 805 | enumerable: true, 806 | configurable: true 807 | } 808 | }); 809 | 810 | //Return the line 811 | return o; 812 | } 813 | 814 | /* Compound sprites */ 815 | 816 | //Use `grid` to create a grid of sprites 817 | grid( 818 | columns = 0, 819 | rows = 0, 820 | cellWidth = 32, 821 | cellHeight = 32, 822 | centerCell = false, 823 | xOffset = 0, 824 | yOffset = 0, 825 | makeSprite = undefined, 826 | extra = undefined 827 | ) { 828 | //Create an empty group called `container`. This `container` 829 | //group is what the function returns back to the main program. 830 | //All the sprites in the grid cells will be added 831 | //as children to this container 832 | let container = new this.Container(); 833 | 834 | //The `create` method plots the grid 835 | 836 | let createGrid = () => { 837 | //Figure out the number of cells in the grid 838 | let length = columns * rows; 839 | 840 | //Create a sprite for each cell 841 | for (let i = 0; i < length; i++) { 842 | //Figure out the sprite's x/y placement in the grid 843 | let x = i % columns * cellWidth, 844 | y = Math.floor(i / columns) * cellHeight; 845 | 846 | //Use the `makeSprite` function supplied in the constructor 847 | //to make a sprite for the grid cell 848 | let sprite = makeSprite(); 849 | 850 | //Add the sprite to the `container` 851 | container.addChild(sprite); 852 | 853 | //Should the sprite be centered in the cell? 854 | 855 | //No, it shouldn't be centered 856 | if (!centerCell) { 857 | sprite.x = x + xOffset; 858 | sprite.y = y + yOffset; 859 | } else { 860 | //Yes, it should be centered 861 | sprite.x = x + cellWidth / 2 - sprite.width / 2 + xOffset; 862 | sprite.y = y + cellHeight / 2 - sprite.width / 2 + yOffset; 863 | } 864 | 865 | //Run any optional extra code. This calls the 866 | //`extra` function supplied by the constructor 867 | if (extra) extra(sprite); 868 | } 869 | }; 870 | 871 | //Run the `createGrid` method 872 | createGrid(); 873 | 874 | //Return the `container` group back to the main program 875 | return container; 876 | } 877 | 878 | //Use `shoot` to create bullet sprites 879 | shoot( 880 | shooter, 881 | angle, 882 | x, 883 | y, 884 | container, 885 | bulletSpeed, 886 | bulletArray, 887 | bulletSprite 888 | ) { 889 | //Make a new sprite using the user-supplied `bulletSprite` function 890 | let bullet = bulletSprite(); 891 | 892 | //Set the bullet's anchor point to its center 893 | bullet.anchor.set(0.5, 0.5); 894 | 895 | //Temporarily add the bullet to the shooter 896 | //so that we can position it relative to the 897 | //shooter's position 898 | shooter.addChild(bullet); 899 | bullet.x = x; 900 | bullet.y = y; 901 | 902 | //Find the bullet's global coordinates so that we can use 903 | //them to position the bullet on the new parent container 904 | let tempGx = bullet.getGlobalPosition().x, 905 | tempGy = bullet.getGlobalPosition().y; 906 | 907 | //Add the bullet to the new parent container using 908 | //the new global coordinates 909 | container.addChild(bullet); 910 | bullet.x = tempGx; 911 | bullet.y = tempGy; 912 | 913 | //Set the bullet's velocity 914 | bullet.vx = Math.cos(angle) * bulletSpeed; 915 | bullet.vy = Math.sin(angle) * bulletSpeed; 916 | 917 | //Push the bullet into the `bulletArray` 918 | bulletArray.push(bullet); 919 | } 920 | 921 | /* 922 | grid 923 | ---- 924 | 925 | Helps you to automatically create a grid of sprites. `grid` returns a 926 | `group` sprite object that contains a sprite for every cell in the 927 | grid. You can define the rows and columns in the grid, whether or 928 | not the sprites should be centered inside each cell, or what their offset from the 929 | top left corner of each cell should be. Supply a function that 930 | returns the sprite that you want to make for each cell. You can 931 | supply an optional final function that runs any extra code after 932 | each sprite has been created. Here's the format for creating a grid: 933 | 934 | gridGroup = grid( 935 | 936 | //Set the grid's properties 937 | columns, rows, cellWidth, cellHeight, 938 | areSpirtesCentered?, xOffset, yOffset, 939 | 940 | //A function that returns a sprite 941 | () => g.circle(16, "blue"), 942 | 943 | //An optional final function that runs some extra code 944 | () => console.log("extra!") 945 | ); 946 | */ 947 | 948 | grid( 949 | columns = 0, 950 | rows = 0, 951 | cellWidth = 32, 952 | cellHeight = 32, 953 | centerCell = false, 954 | xOffset = 0, 955 | yOffset = 0, 956 | makeSprite = undefined, 957 | extra = undefined 958 | ) { 959 | //Create an empty group called `container`. This `container` 960 | //group is what the function returns back to the main program. 961 | //All the sprites in the grid cells will be added 962 | //as children to this container 963 | let container = this.group(); 964 | 965 | //The `create` method plots the grid 966 | let createGrid = () => { 967 | //Figure out the number of cells in the grid 968 | let length = columns * rows; 969 | 970 | //Create a sprite for each cell 971 | for (let i = 0; i < length; i++) { 972 | //Figure out the sprite's x/y placement in the grid 973 | let x = i % columns * cellWidth, 974 | y = Math.floor(i / columns) * cellHeight; 975 | 976 | //Use the `makeSprite` function supplied in the constructor 977 | //to make a sprite for the grid cell 978 | let sprite = makeSprite(); 979 | 980 | //Add the sprite to the `container` 981 | container.addChild(sprite); 982 | 983 | //Should the sprite be centered in the cell? 984 | 985 | //No, it shouldn't be centered 986 | if (!centerCell) { 987 | sprite.x = x + xOffset; 988 | sprite.y = y + yOffset; 989 | } else { 990 | //Yes, it should be centered 991 | sprite.x = x + cellWidth / 2 - sprite.halfWidth + xOffset; 992 | sprite.y = y + cellHeight / 2 - sprite.halfHeight + yOffset; 993 | } 994 | 995 | //Run any optional extra code. This calls the 996 | //`extra` function supplied by the constructor 997 | if (extra) extra(sprite); 998 | } 999 | }; 1000 | 1001 | //Run the `createGrid` method 1002 | createGrid(); 1003 | 1004 | //Return the `container` group back to the main program 1005 | return container; 1006 | } 1007 | 1008 | /* 1009 | shake 1010 | ----- 1011 | 1012 | Used to create a shaking effect, like a screen shake 1013 | */ 1014 | 1015 | shake(sprite, magnitude = 16, angular = false) { 1016 | //Get a reference to this current object so that 1017 | //it's easy to maintain scope in the nested sub-functions 1018 | let self = this; 1019 | 1020 | //A counter to count the number of shakes 1021 | let counter = 1; 1022 | 1023 | //The total number of shakes (there will be 1 shake per frame) 1024 | let numberOfShakes = 10; 1025 | 1026 | //Capture the sprite's position and angle so you can 1027 | //restore them after the shaking has finished 1028 | let startX = sprite.x, startY = sprite.y, startAngle = sprite.rotation; 1029 | 1030 | //Divide the magnitude into 10 units so that you can 1031 | //reduce the amount of shake by 10 percent each frame 1032 | let magnitudeUnit = magnitude / numberOfShakes; 1033 | 1034 | //The `randomInt` helper function 1035 | let randomInt = (min, max) => { 1036 | return Math.floor(Math.random() * (max - min + 1)) + min; 1037 | }; 1038 | 1039 | //Add the sprite to the `shakingSprites` array if it 1040 | //isn't already there 1041 | if (self.shakingSprites.indexOf(sprite) === -1) { 1042 | self.shakingSprites.push(sprite); 1043 | 1044 | //Add an `updateShake` method to the sprite. 1045 | //The `updateShake` method will be called each frame 1046 | //in the game loop. The shake effect type can be either 1047 | //up and down (x/y shaking) or angular (rotational shaking). 1048 | sprite.updateShake = () => { 1049 | if (angular) { 1050 | angularShake(); 1051 | } else { 1052 | upAndDownShake(); 1053 | } 1054 | }; 1055 | } 1056 | 1057 | //The `upAndDownShake` function 1058 | function upAndDownShake() { 1059 | //Shake the sprite while the `counter` is less than 1060 | //the `numberOfShakes` 1061 | if (counter < numberOfShakes) { 1062 | //Reset the sprite's position at the start of each shake 1063 | sprite.x = startX; 1064 | sprite.y = startY; 1065 | 1066 | //Reduce the magnitude 1067 | magnitude -= magnitudeUnit; 1068 | 1069 | //Randomly change the sprite's position 1070 | sprite.x += randomInt(-magnitude, magnitude); 1071 | sprite.y += randomInt(-magnitude, magnitude); 1072 | 1073 | //Add 1 to the counter 1074 | counter += 1; 1075 | } 1076 | 1077 | //When the shaking is finished, restore the sprite to its original 1078 | //position and remove it from the `shakingSprites` array 1079 | if (counter >= numberOfShakes) { 1080 | sprite.x = startX; 1081 | sprite.y = startY; 1082 | self.shakingSprites.splice(self.shakingSprites.indexOf(sprite), 1); 1083 | } 1084 | } 1085 | 1086 | //The `angularShake` function 1087 | //First set the initial tilt angle to the right (+1) 1088 | let tiltAngle = 1; 1089 | 1090 | function angularShake() { 1091 | if (counter < numberOfShakes) { 1092 | //Reset the sprite's rotation 1093 | sprite.rotation = startAngle; 1094 | 1095 | //Reduce the magnitude 1096 | magnitude -= magnitudeUnit; 1097 | 1098 | //Rotate the sprite left or right, depending on the direction, 1099 | //by an amount in radians that matches the magnitude 1100 | sprite.rotation = magnitude * tiltAngle; 1101 | counter += 1; 1102 | 1103 | //Reverse the tilt angle so that the sprite is tilted 1104 | //in the opposite direction for the next shake 1105 | tiltAngle *= -1; 1106 | } 1107 | 1108 | //When the shaking is finished, reset the sprite's angle and 1109 | //remove it from the `shakingSprites` array 1110 | if (counter >= numberOfShakes) { 1111 | sprite.rotation = startAngle; 1112 | self.shakingSprites.splice(self.shakingSprites.indexOf(sprite), 1); 1113 | } 1114 | } 1115 | } 1116 | 1117 | /* 1118 | _getCenter 1119 | ---------- 1120 | 1121 | A utility that finds the center point of the sprite. If it's anchor point is the 1122 | sprite's top left corner, then the center is calculated from that point. 1123 | If the anchor point has been shifted, then the anchor x/y point is used as the sprite's center 1124 | */ 1125 | 1126 | _getCenter(o, dimension, axis) { 1127 | if (o.anchor !== undefined) { 1128 | if (o.anchor[axis] !== 0) { 1129 | return 0; 1130 | } else { 1131 | return dimension / 2; 1132 | } 1133 | } else { 1134 | return dimension; 1135 | } 1136 | } 1137 | 1138 | /* Groups */ 1139 | 1140 | //Group sprites into a container 1141 | group(...sprites) { 1142 | let container = new this.Container(); 1143 | sprites.forEach(sprite => { 1144 | container.addChild(sprite); 1145 | }); 1146 | return container; 1147 | } 1148 | 1149 | //Use the `batch` method to create a ParticleContainer 1150 | batch( 1151 | size = 15000, 1152 | options = { rotation: true, alpha: true, scale: true, uvs: true } 1153 | ) { 1154 | let o = new this.ParticleContainer(size, options); 1155 | return o; 1156 | } 1157 | 1158 | //`remove` is a global convenience method that will 1159 | //remove any sprite, or an argument list of sprites, from its parent. 1160 | remove(...sprites) { 1161 | //Remove sprites that's aren't in an array 1162 | if (!(sprites[0] instanceof Array)) { 1163 | if (sprites.length > 1) { 1164 | sprites.forEach(sprite => { 1165 | sprite.parent.removeChild(sprite); 1166 | }); 1167 | } else { 1168 | sprites[0].parent.removeChild(sprites[0]); 1169 | } 1170 | } else { 1171 | //Remove sprites in an array of sprites 1172 | let spritesArray = sprites[0]; 1173 | if (spritesArray.length > 0) { 1174 | for (let i = spritesArray.length - 1; i >= 0; i--) { 1175 | let sprite = spritesArray[i]; 1176 | sprite.parent.removeChild(sprite); 1177 | spritesArray.splice(spritesArray.indexOf(sprite), 1); 1178 | } 1179 | } 1180 | } 1181 | } 1182 | 1183 | /* Color conversion */ 1184 | //From: http://stackoverflow.com/questions/1573053/javascript-function-to-convert-color-names-to-hex-codes 1185 | //Utilities to convert HTML color string names to hexadecimal codes 1186 | 1187 | colorToRGBA(color) { 1188 | // Returns the color as an array of [r, g, b, a] -- all range from 0 - 255 1189 | // color must be a valid canvas fillStyle. This will cover most anything 1190 | // you'd want to use. 1191 | // Examples: 1192 | // colorToRGBA('red') # [255, 0, 0, 255] 1193 | // colorToRGBA('#f00') # [255, 0, 0, 255] 1194 | var cvs, ctx; 1195 | cvs = document.createElement("canvas"); 1196 | cvs.height = 1; 1197 | cvs.width = 1; 1198 | ctx = cvs.getContext("2d"); 1199 | ctx.fillStyle = color; 1200 | ctx.fillRect(0, 0, 1, 1); 1201 | let data = ctx.getImageData(0, 0, 1, 1).data; 1202 | return data; 1203 | } 1204 | 1205 | byteToHex(num) { 1206 | // Turns a number (0-255) into a 2-character hex number (00-ff) 1207 | return ("0" + num.toString(16)).slice(-2); 1208 | } 1209 | 1210 | colorToHex(color) { 1211 | // Convert any CSS color to a hex representation 1212 | // Examples: 1213 | // colorToHex('red') # '#ff0000' 1214 | // colorToHex('rgb(255, 0, 0)') # '#ff0000' 1215 | var rgba, hex; 1216 | rgba = this.colorToRGBA(color); 1217 | hex = [0, 1, 2].map(idx => this.byteToHex(rgba[idx])).join(""); 1218 | return "0x" + hex; 1219 | } 1220 | 1221 | //A function to find out if the user entered a number (a hex color 1222 | //code) or a string (an HTML color string) 1223 | color(value) { 1224 | //Check if it's a number 1225 | if (!isNaN(value)) { 1226 | //Yes, it is a number, so just return it 1227 | return value; 1228 | } else { 1229 | //No it's not a number, so it must be a string 1230 | return parseInt(this.colorToHex(value)); 1231 | /* 1232 | 1233 | //Find out what kind of color string it is. 1234 | //Let's first grab the first character of the string 1235 | let firstCharacter = value.charAt(0); 1236 | 1237 | //If the first character is a "#" or a number, then 1238 | //we know it must be a RGBA color 1239 | if (firstCharacter === "#") { 1240 | console.log("first character: " + value.charAt(0)) 1241 | } 1242 | */ 1243 | } 1244 | 1245 | /* 1246 | //Find out if the first character in the string is a number 1247 | if (!isNaN(parseInt(string.charAt(0)))) { 1248 | 1249 | //It's not, so convert it to a hex code 1250 | return colorToHex(string); 1251 | 1252 | //The use input a number, so it must be a hex code. Just return it 1253 | } else { 1254 | 1255 | return string; 1256 | } 1257 | 1258 | */ 1259 | } 1260 | } 1261 | 1262 | export default SpriteUtilities; 1263 | -------------------------------------------------------------------------------- /app/game.js: -------------------------------------------------------------------------------- 1 | import * as PIXI from "pixi.js"; 2 | import { cheapColi } from "./coli.js"; 3 | import "howler"; 4 | import SpriteUtilities from "./spriteUtilities.js"; 5 | import TextStyles from "./textStyles.js"; 6 | import Keyboard from "./keyboard.js"; 7 | import characterData from "./characters.json"; 8 | 9 | class Game { 10 | constructor() { 11 | this.app = new PIXI.Application(1000, 600); 12 | this.textObj = new TextStyles(this.app.renderer); 13 | this.utils = new SpriteUtilities(PIXI); 14 | this.scenes = { 15 | intro: {}, 16 | select: {}, 17 | game: {}, 18 | gameOver: {}, 19 | youWin: {} 20 | }; 21 | 22 | this.powers = []; 23 | this.characterNames = []; 24 | this.action = []; 25 | this.power = []; 26 | this.finishHim = false; 27 | this.switchLeft = true; 28 | this.switchRight = false; 29 | 30 | this.energyBars = { 31 | left: { 32 | bars: { 33 | exterior: {}, 34 | interior: {} 35 | }, 36 | level: 385 37 | }, 38 | right: { 39 | bars: { 40 | exterior: {}, 41 | interior: {} 42 | }, 43 | level: 385 44 | } 45 | }; 46 | 47 | this.initScenes(); 48 | 49 | this.energyBarLeft = {}; 50 | this.energyBarLeftInterior = {}; 51 | this.energyBarLeftRed = {}; 52 | this.energyBarRight = {}; 53 | 54 | this.backgrounds = {}; 55 | 56 | this.keys = {}; 57 | 58 | this.gravity = 1.3; 59 | this.groundY = 315; 60 | 61 | this.attachEvents(); 62 | 63 | this.sound = null; 64 | 65 | PIXI.loader 66 | .add([ 67 | "assets/images/powers/yelo.json", 68 | "assets/images/powers/fire.json", 69 | "assets/images/powers/death.json", 70 | "assets/images/characters/scorpion.json", 71 | "assets/images/characters/claudia.json", 72 | "assets/images/characters/pao.json", 73 | "assets/images/characters/aram.json", 74 | "assets/images/backgrounds/fight.json", 75 | "assets/images/backgrounds/intro.png", 76 | "assets/images/backgrounds/win.jpg", 77 | "assets/images/characters/aram.jpg", 78 | "assets/images/characters/scorpion.jpg", 79 | "assets/images/characters/claudia.png", 80 | "assets/images/characters/pao.png", 81 | "assets/images/characters/claudia-portrait.png", 82 | "assets/images/characters/pao-portrait.png", 83 | "assets/images/backgrounds/combat.jpg", 84 | "assets/sounds/fight.mp3", 85 | "assets/sounds/hitsounds/mk3-00100.mp3", 86 | "assets/sounds/hitsounds/mk3-00105.mp3", 87 | "assets/sounds/hitsounds/mk3-00155.mp3", 88 | "assets/sounds/hitsounds/mk3-00165.mp3", 89 | "assets/sounds/hitsounds/mk3-00170.mp3", 90 | "assets/sounds/male/mk3-03000.mp3", 91 | "assets/sounds/short/mk3-00054.mp3", 92 | "assets/sounds/short/mk3-00053.mp3", 93 | "assets/sounds/vsmusic.mp3", 94 | "assets/sounds/fightScream.mp3", 95 | "assets/sounds/hitscream.mp3", 96 | "assets/sounds/finish.mp3", 97 | "assets/sounds/scream.mp3" 98 | ]) 99 | .load(() => { 100 | this.initGame(); 101 | }); 102 | document.querySelector(".app").appendChild(this.app.renderer.view); 103 | } 104 | 105 | initScenes() { 106 | for (let scene in this.scenes) { 107 | this.scenes[scene] = new PIXI.Container(); 108 | this.scenes[scene].alpha = 0; 109 | this.app.stage.addChild(this.scenes[scene]); 110 | } 111 | } 112 | 113 | setActiveScene(sceneName) { 114 | for (let scene in this.scenes) { 115 | this.scenes[scene].visible = false; 116 | if (scene === sceneName) { 117 | this.scenes[scene].visible = true; 118 | } 119 | } 120 | } 121 | 122 | playSound(event, options = { loop: false, bg: false }) { 123 | let soundPath = ""; 124 | switch (event) { 125 | case "jump": 126 | soundPath = "assets/sounds/hitsounds/mk3-00155.mp3"; 127 | break; 128 | case "kick": 129 | soundPath = "assets/sounds/hitsounds/mk3-00100.mp3"; 130 | break; 131 | case "punch": 132 | soundPath = "assets/sounds/hitsounds/mk3-00105.mp3"; 133 | break; 134 | case "hit": 135 | soundPath = "assets/sounds/male/mk3-03000.mp3"; 136 | break; 137 | case "nopunch": 138 | soundPath = "assets/sounds/hitsounds/mk3-00165.mp3"; 139 | break; 140 | case "nokick": 141 | soundPath = "assets/sounds/hitsounds/mk3-00170.mp3"; 142 | break; 143 | case "intro": 144 | soundPath = "assets/sounds/short/mk3-00054.mp3"; 145 | break; 146 | case "vs": 147 | soundPath = "assets/sounds/short/mk3-00053.mp3"; 148 | break; 149 | case "fight": 150 | soundPath = "assets/sounds/fight.mp3"; 151 | break; 152 | case "vsmusic": 153 | soundPath = "assets/sounds/vsmusic.mp3"; 154 | break; 155 | case "fightScream": 156 | soundPath = "assets/sounds/fightScream.mp3"; 157 | break; 158 | case "scream": 159 | soundPath = "assets/sounds/scream.mp3"; 160 | break; 161 | case "hitscream": 162 | soundPath = "assets/sounds/hitscream.mp3"; 163 | break; 164 | case "gameover": 165 | soundPath = "assets/sounds/yousuck.mp3"; 166 | break; 167 | case "welldone": 168 | soundPath = "assets/sounds/welldone.mp3"; 169 | break; 170 | case "finish": 171 | soundPath = "assets/sounds/finish.mp3"; 172 | break; 173 | default: 174 | break; 175 | } 176 | 177 | if (options.bg) { 178 | this.bgSound = new Howl({ 179 | src: [soundPath], 180 | loop: options.loop 181 | }); 182 | this.bgSound.play(); 183 | } else { 184 | this.sound = new Howl({ 185 | src: [soundPath], 186 | loop: options.loop 187 | }); 188 | this.sound.play(); 189 | } 190 | } 191 | 192 | stopSound() { 193 | if (this.sound) { 194 | this.sound.stop(); 195 | } 196 | } 197 | 198 | stopBgSound() { 199 | this.bgSound.stop(); 200 | } 201 | 202 | loadBackgrounds() { 203 | this.backgrounds.intro = new PIXI.Sprite.from( 204 | PIXI.loader.resources["assets/images/backgrounds/intro.png"].texture 205 | ); 206 | this.setBGScale(this.backgrounds.intro); 207 | this.scenes.intro.addChild(this.backgrounds.intro); 208 | 209 | this.backgrounds.battle = new PIXI.Sprite.from( 210 | PIXI.loader.resources["assets/images/backgrounds/combat.jpg"].texture 211 | ); 212 | this.setBGScale(this.backgrounds.battle); 213 | this.scenes.game.addChild(this.backgrounds.battle); 214 | 215 | this.backgrounds.win = new PIXI.Sprite.from( 216 | PIXI.loader.resources["assets/images/backgrounds/win.jpg"].texture 217 | ); 218 | this.setBGScale(this.backgrounds.win); 219 | this.scenes.youWin.addChild(this.backgrounds.win); 220 | } 221 | 222 | // Set intro Container, first scene 223 | initGame() { 224 | this.loadBackgrounds(); 225 | this.introScreen(); 226 | this.gameLoop(); 227 | } 228 | 229 | gameLoop() { 230 | this.app.ticker.add(() => { 231 | if (!this.scenes.game.visible) return; 232 | 233 | this.characters.forEach((character, index) => { 234 | character.animations.forEach(animation => { 235 | if (animation.name !== "hit" && animation.name !== "highhit") { 236 | animation.visible = false; 237 | } 238 | }); 239 | 240 | let collision; 241 | const opponent = index === 0 ? this.characters[1] : this.characters[0]; 242 | 243 | if ( 244 | opponent.actions.hit && 245 | opponent.actions.hit.visible && 246 | opponent.actions.hit.currentFrame + 1 === 247 | opponent.actions.hit.totalFrames 248 | ) { 249 | opponent.actions.stance.visible = true; 250 | opponent.actions.hit.visible = false; 251 | } 252 | 253 | if ( 254 | opponent.actions.highhit && 255 | opponent.actions.highhit.visible && 256 | opponent.actions.highhit.currentFrame + 1 === 257 | opponent.actions.highhit.totalFrames 258 | ) { 259 | opponent.actions.stance.visible = true; 260 | opponent.actions.highhit.visible = false; 261 | } 262 | 263 | if ( 264 | this.action[index] === "jump" && 265 | this.keys.up[index].isDown && 266 | this.keys.right[index].isDown 267 | ) { 268 | this.action[index] = "jump-right"; 269 | 270 | this.characters.forEach(character => { 271 | if (character.actions.jump) { 272 | character.actions.jump.gotoAndPlay(0); 273 | this.playSound("jump"); 274 | } 275 | }); 276 | } 277 | 278 | if ( 279 | this.action[index] === "jump" && 280 | this.keys.up[index].isDown && 281 | this.keys.left[index].isDown 282 | ) { 283 | this.characters.forEach(character => { 284 | if (character.actions.jump) { 285 | this.action[index] = "jump-left"; 286 | character.actions.jump.gotoAndPlay(0); 287 | this.playSound("jump"); 288 | } 289 | }); 290 | } 291 | 292 | this.utils.update(); 293 | 294 | switch (this.power[index]) { 295 | case "yelo": 296 | this.powers[index].yelo.visible = true; 297 | 298 | collision = cheapColi(this.powers[index].yelo, opponent); 299 | 300 | if (collision) { 301 | if (opponent.actions.highhit) { 302 | opponent.actions.highhit.gotoAndPlay(0); 303 | opponent.actions.stance.visible = false; 304 | opponent.actions.highhit.visible = true; 305 | } 306 | 307 | this.powers[index].yelo.visible = false; 308 | this.powers[index].yelo.x = -10000; 309 | this.power[index] = ""; 310 | 311 | this.playSound("punch"); 312 | this.playSound("hit"); 313 | 314 | this.utils.shake(this.scenes.game, 0.01, true); 315 | 316 | this.registerHit(index); 317 | } else { 318 | // TODO: calc direction based on opponent position 319 | this.powers[index].yelo.x += this.powers[index].yelo.vx; 320 | } 321 | break; 322 | case "fire": 323 | this.powers[index].fire.visible = true; 324 | 325 | collision = cheapColi(this.powers[index].fire, opponent); 326 | 327 | if (collision) { 328 | if (opponent.actions.highhit) { 329 | opponent.actions.highhit.gotoAndPlay(0); 330 | opponent.actions.stance.visible = false; 331 | opponent.actions.highhit.visible = true; 332 | } 333 | 334 | this.powers[index].fire.visible = false; 335 | this.powers[index].fire.x = -10000; 336 | this.power[index] = ""; 337 | 338 | this.playSound("punch"); 339 | this.playSound("hit"); 340 | 341 | this.utils.shake(this.scenes.game, 0.03, true); 342 | 343 | this.registerHit(index); 344 | 345 | let victim = opponent === 0 ? 0 : 1; 346 | let winner = opponent === 0 ? 1 : 0; 347 | if (this.finishHim) { 348 | this.playSound("scream"); 349 | this.action[victim] = "death"; 350 | setTimeout(() => { 351 | this.youWin(winner); 352 | }, 1000); 353 | } 354 | } else { 355 | // TODO: calc direction based on opponent position 356 | this.powers[index].fire.x += this.powers[index].fire.vx; 357 | } 358 | break; 359 | } 360 | switch (this.action[index]) { 361 | case "ducking": 362 | if (character.actions.duck) { 363 | character.actions.duck.visible = true; 364 | } 365 | break; 366 | case "death": 367 | if (character.actions.death) { 368 | character.actions.death.visible = true; 369 | character.actions.stance.visible = false; 370 | character.actions.highhit.visible = false; 371 | character.actions.hit.visible = false; 372 | 373 | character.position.y += 3; 374 | 375 | if (character.position.y >= this.groundY + 110) { 376 | character.position.y = this.groundY + 110; 377 | } 378 | } 379 | break; 380 | case "walk-right": 381 | if (character.actions.walk) { 382 | character.actions.walk.visible = true; 383 | 384 | collision = cheapColi(character, opponent); 385 | 386 | if (!collision || collision === "left") { 387 | character.position.x += character.vx; 388 | } 389 | 390 | if (character.position.x >= 900) { 391 | character.position.x = 900; 392 | } 393 | } 394 | break; 395 | case "walk-left": 396 | if (character.actions.walk) { 397 | character.actions.walk.visible = true; 398 | 399 | collision = cheapColi(character, opponent); 400 | 401 | if (!collision || collision === "right") { 402 | character.position.x -= character.vx; 403 | } 404 | 405 | if (character.position.x <= 0) { 406 | character.position.x = 0; 407 | } 408 | } 409 | break; 410 | case "kick": 411 | if (character.actions.kick) { 412 | character.actions.kick.visible = true; 413 | 414 | if ( 415 | character.actions.kick.currentFrame + 1 === 416 | character.actions.kick.totalFrames 417 | ) { 418 | this.action[index] = "stance"; 419 | this.blockHit = false; 420 | } 421 | 422 | const collision = cheapColi(character, opponent); 423 | 424 | if (collision) { 425 | if (opponent.actions.hit) { 426 | opponent.actions.stance.visible = false; 427 | opponent.actions.hit.gotoAndPlay(0); 428 | opponent.actions.hit.visible = true; 429 | } 430 | 431 | this.playSound("kick"); 432 | this.playSound("hit"); 433 | 434 | this.utils.shake(this.scenes.game, 5); 435 | 436 | if (!this.blockHit) { 437 | this.registerHit(index); 438 | this.blockHit = true; 439 | } 440 | } 441 | } 442 | break; 443 | case "punch": 444 | if (character.actions.punch) { 445 | character.actions.punch.visible = true; 446 | 447 | if ( 448 | character.actions.punch.currentFrame + 1 === 449 | character.actions.punch.totalFrames 450 | ) { 451 | this.action[index] = "stance"; 452 | this.blockHit = false; 453 | } 454 | 455 | collision = cheapColi(character, opponent); 456 | 457 | if (collision) { 458 | if (opponent.actions.highhit) { 459 | opponent.actions.highhit.gotoAndPlay(0); 460 | opponent.actions.stance.visible = false; 461 | opponent.actions.highhit.visible = true; 462 | } 463 | 464 | this.playSound("punch"); 465 | this.playSound("hit"); 466 | 467 | this.utils.shake(this.scenes.game, 0.01, true); 468 | 469 | if (!this.blockHit) { 470 | this.registerHit(index); 471 | this.blockHit = true; 472 | } 473 | } 474 | } 475 | break; 476 | case "stance": 477 | if ( 478 | character.actions.stance && 479 | (!character.actions.hit || 480 | (!character.actions.hit.visible && 481 | !character.actions.highhit.visible)) 482 | ) { 483 | character.actions.stance.visible = true; 484 | } 485 | break; 486 | case "raise": 487 | if (character.actions.raise) { 488 | character.actions.raise.visible = true; 489 | 490 | if ( 491 | character.actions.raise.currentFrame + 1 === 492 | character.actions.raise.totalFrames 493 | ) { 494 | this.action[index] = "stance"; 495 | } 496 | } 497 | break; 498 | case "airkick-right": 499 | if (character.actions.airkick) { 500 | character.actions.airkick.visible = true; 501 | 502 | character.vy += this.gravity; 503 | 504 | collision = cheapColi(character, opponent); 505 | 506 | if (collision) { 507 | if (opponent.actions.hit) { 508 | opponent.actions.hit.gotoAndPlay(0); 509 | opponent.actions.stance.visible = false; 510 | opponent.actions.hit.visible = true; 511 | } 512 | 513 | if (opponent.actions.stance.visible) { 514 | this.playSound("kick"); 515 | this.playSound("hit"); 516 | 517 | this.utils.shake(this.scenes.game.children[0], 10); 518 | 519 | this.registerHit(index); 520 | } 521 | } 522 | 523 | if (character.y + character.vy <= this.groundY) { 524 | character.x += character.vx * 2.5; 525 | character.y += character.vy; 526 | } else { 527 | character.y = this.groundY; 528 | if (this.keys.right.isDown) { 529 | this.action[index] = "walk-right"; 530 | } else { 531 | this.action[index] = "stance"; 532 | } 533 | } 534 | } 535 | break; 536 | case "jump-right": 537 | if (character.actions.jump) { 538 | character.actions.jump.visible = true; 539 | 540 | character.vy += this.gravity; 541 | 542 | if (character.y + character.vy <= this.groundY) { 543 | character.x += character.vx * 2.5; 544 | character.y += character.vy; 545 | } else { 546 | character.y = this.groundY; 547 | if (this.keys.right.isDown) { 548 | this.action[index] = "walk-right"; 549 | } else { 550 | this.action[index] = "stance"; 551 | } 552 | } 553 | 554 | if (character.position.x >= 900) { 555 | character.position.x = 900; 556 | } 557 | } 558 | break; 559 | 560 | case "airkick-left": 561 | if (character.actions.airkick) { 562 | character.actions.airkick.visible = true; 563 | 564 | character.vy += this.gravity; 565 | 566 | collision = cheapColi(character, opponent); 567 | 568 | if (collision) { 569 | if (opponent.actions.hit) { 570 | opponent.actions.hit.gotoAndPlay(0); 571 | opponent.actions.stance.visible = false; 572 | opponent.actions.hit.visible = true; 573 | } 574 | 575 | if (opponent.actions.stance.visible) { 576 | this.playSound("kick"); 577 | this.playSound("hit"); 578 | this.registerHit(index); 579 | } 580 | } 581 | 582 | if (character.y + character.vy <= this.groundY) { 583 | character.x -= character.vx * 2.5; 584 | character.y += character.vy; 585 | } else { 586 | character.y = this.groundY; 587 | if (this.keys.left.isDown) { 588 | this.action[index] = "walk-left"; 589 | } else { 590 | this.action[index] = "stance"; 591 | } 592 | } 593 | } 594 | break; 595 | 596 | case "jump-left": 597 | if (character.actions.jump) { 598 | character.actions.jump.visible = true; 599 | character.vy += this.gravity; 600 | 601 | if (character.y + character.vy <= this.groundY) { 602 | character.x -= character.vx * 2.5; 603 | character.y += character.vy; 604 | } else { 605 | character.y = this.groundY; 606 | if (this.keys.left.isDown) { 607 | this.action[index] = "walk-left"; 608 | } else { 609 | this.action[index] = "stance"; 610 | } 611 | } 612 | 613 | if (character.position.x <= 0) { 614 | character.position.x = 0; 615 | } 616 | } 617 | break; 618 | 619 | case "airkick": 620 | if (character.actions.airkick) { 621 | character.actions.airkick.visible = true; 622 | 623 | character.vy += this.gravity; 624 | 625 | collision = cheapColi(character, opponent); 626 | 627 | if (collision) { 628 | if (opponent.actions.hit) { 629 | opponent.actions.hit.gotoAndPlay(0); 630 | opponent.actions.stance.visible = false; 631 | opponent.actions.hit.visible = true; 632 | } 633 | 634 | if (opponent.actions.stance.visible) { 635 | this.playSound("kick"); 636 | this.playSound("hit"); 637 | this.registerHit(index); 638 | } 639 | } 640 | 641 | if (character.y <= this.groundY) { 642 | character.y += character.vy; 643 | } else { 644 | character.y = this.groundY; 645 | 646 | this.action[index] = "stance"; 647 | } 648 | } 649 | break; 650 | 651 | case "jump": 652 | if (character.actions.jump) { 653 | character.actions.staticjump.visible = true; 654 | character.vy += this.gravity; 655 | 656 | if (character.y <= this.groundY) { 657 | character.y += character.vy; 658 | } else { 659 | character.y = this.groundY; 660 | this.action[index] = "stance"; 661 | } 662 | } 663 | break; 664 | } 665 | }); 666 | }); 667 | } 668 | 669 | registerHit(index) { 670 | const side = index === 1 ? "left" : "right"; 671 | // why these numbers? how knows 672 | const increment = index === 1 ? 23 : 29; 673 | 674 | this.energyBars[side].bars.interior.width = 675 | this.energyBars[side].bars.interior.width - 20; 676 | this.energyBars[side].bars.interior.position.x = 677 | this.energyBars[side].bars.interior.position.x + increment; 678 | if (this.energyBars[side].bars.interior.width <= 0) { 679 | this.energyBars[side].bars.interior.width = this.energyBars[ 680 | side 681 | ].bars.level; 682 | this.energyBars[side].bars.interior.position.x = 55; 683 | this.finish(side); 684 | } 685 | } 686 | 687 | finish(side) { 688 | var winner = side === "left" ? 1 : 0; 689 | this.playSound("finish"); 690 | this.finishHim = true; 691 | let finishHimText = this.textObj.finishText("FINISH HIM!", "center", 100); 692 | this.scenes.game.addChild(finishHimText); 693 | this.characters.forEach((character, index) => { 694 | if (winner !== index) { 695 | character.isDeath = true; 696 | this.action[index] = "stance"; 697 | character.vx = 0; 698 | } 699 | }); 700 | } 701 | 702 | introScreen() { 703 | this.setActiveScene("intro"); 704 | this.playSound("intro"); 705 | 706 | let startText = this.textObj.customText( 707 | "Press Enter to start", 708 | "center", 709 | 520 710 | ); 711 | 712 | let titleText = this.textObj.finishText("HUGE COMBAT", "center", 240, 140); 713 | 714 | let comands = this.textObj.comandsText( 715 | "Player 1: A (left), D (right), S (down), W (up)", 716 | 20, 717 | 70 718 | ); 719 | 720 | let comandsHits = this.textObj.comandsText( 721 | "Hits: F (kick), G (punch), H (power) and j (fatality)", 722 | 20, 723 | 110 724 | ); 725 | 726 | let comands2 = this.textObj.comandsText("Player 2: Arrows", 580, 70); 727 | 728 | let comandsHits2 = this.textObj.comandsText( 729 | "Hits: P (kick), O (punch), I (power) and U (fatality)", 730 | 580, 731 | 110 732 | ); 733 | 734 | this.scenes.intro.addChild(comands); 735 | this.scenes.intro.addChild(comandsHits); 736 | this.scenes.intro.addChild(comands2); 737 | this.scenes.intro.addChild(comandsHits2); 738 | this.scenes.intro.addChild(startText); 739 | this.scenes.intro.addChild(titleText); 740 | 741 | let animate = () => { 742 | requestAnimationFrame(animate); 743 | this.scenes.intro.alpha += 0.05; 744 | }; 745 | animate(); 746 | } 747 | 748 | chooseScreen() { 749 | this.characters = []; 750 | 751 | this.setActiveScene("select"); 752 | this.stopSound(); 753 | this.playSound("vsmusic", { loop: true }); 754 | 755 | let title = this.textObj.customText("SELECT PLAYER 1", "center", 520); 756 | let counter = 1; 757 | let counter2 = 0; 758 | let initialPosition = 70; 759 | 760 | characterData.characters.forEach(data => { 761 | if (data.active) { 762 | this.backgrounds["player" + counter] = PIXI.Sprite.from( 763 | PIXI.loader.resources[data.profile].texture 764 | ); 765 | this.backgrounds["player" + counter].playerName = data.name; 766 | counter++; 767 | } 768 | }); 769 | 770 | for (let bg in this.backgrounds) { 771 | if (bg.indexOf("player") !== -1) { 772 | if (counter2 > 0) { 773 | initialPosition += 180; 774 | } 775 | 776 | this.backgrounds[bg].position.x = initialPosition; 777 | this.backgrounds[bg].position.y = 200; 778 | this.backgrounds[bg].width = 150; 779 | this.backgrounds[bg].height = 150; 780 | this.backgrounds[bg].interactive = true; 781 | this.backgrounds[bg].buttonMode = true; 782 | this.backgrounds[bg].on("pointerdown", () => { 783 | if (this.characters.length === 1) { 784 | this.setupCharacters(this.backgrounds[bg].playerName, true); 785 | this.setupPowers(true); 786 | this.setupFatality(true); 787 | 788 | this.battleScene(); 789 | } else { 790 | this.setupCharacters(this.backgrounds[bg].playerName); 791 | this.setupPowers(); 792 | this.setupFatality(); 793 | 794 | this.scenes.select.removeChild(title); 795 | title = this.textObj.customText("SELECT PLAYER 2", "center", 520); 796 | this.scenes.select.addChild(title); 797 | } 798 | }); 799 | 800 | let playerName = this.textObj.customText( 801 | this.backgrounds[bg].playerName, 802 | initialPosition, 803 | 350 804 | ); 805 | let textPosition = (this.backgrounds[bg].width - playerName.width) / 2; 806 | playerName.position.x = initialPosition + textPosition; 807 | this.scenes.select.addChild(this.backgrounds[bg]); 808 | this.scenes.select.addChild(playerName); 809 | counter2++; 810 | } 811 | } 812 | 813 | this.scenes.select.addChild(title); 814 | 815 | let animate = () => { 816 | requestAnimationFrame(animate); 817 | this.scenes.select.alpha += 0.05; 818 | }; 819 | animate(); 820 | } 821 | 822 | battleScene() { 823 | this.stopSound(); 824 | this.playSound("vs"); 825 | 826 | this.setActiveScene("game"); 827 | this.stopSound(); 828 | this.playSound("fight", { loop: true, bg: true }); 829 | 830 | for (let bar in this.energyBars.left.bars) { 831 | this.energyBars.left.bars[bar] = new PIXI.Graphics(); 832 | if (bar === "exterior") { 833 | this.energyBars.left.bars[bar].beginFill(0x910303); 834 | this.energyBars.left.bars[bar].drawRect(50, 50, 400, 30); 835 | } 836 | if (bar === "interior") { 837 | this.energyBars.left.bars[bar].beginFill(0x0246e7, 0.8); 838 | this.energyBars.left.bars[bar].drawRect( 839 | 55, 840 | 55, 841 | this.energyBars.left.level, 842 | 20 843 | ); 844 | } 845 | this.energyBars.left.bars[bar].endFill(); 846 | this.scenes.game.addChild(this.energyBars.left.bars[bar]); 847 | } 848 | 849 | for (let bar in this.energyBars.right.bars) { 850 | this.energyBars.right.bars[bar] = new PIXI.Graphics(); 851 | if (bar === "exterior") { 852 | this.energyBars.right.bars[bar].beginFill(0x910303); 853 | this.energyBars.right.bars[bar].drawRect(550, 50, 400, 30); 854 | } 855 | if (bar === "interior") { 856 | this.energyBars.right.bars[bar].beginFill(0x0246e7); 857 | this.energyBars.right.bars[bar].drawRect( 858 | 555, 859 | 55, 860 | this.energyBars.right.level, 861 | 20 862 | ); 863 | } 864 | this.scenes.game.addChild(this.energyBars.right.bars[bar]); 865 | } 866 | 867 | const fightAnim = this.createAnimation("fight", 44); 868 | fightAnim.loop = false; 869 | fightAnim.visible = false; 870 | fightAnim.animationSpeed = 0.42; 871 | fightAnim.scale.x = 2; 872 | fightAnim.scale.y = 2; 873 | fightAnim.x = (1000 - fightAnim.width) / 2 + 16; 874 | fightAnim.y = (600 - fightAnim.height) / 3; 875 | 876 | setTimeout(() => { 877 | fightAnim.visible = true; 878 | fightAnim.play(); 879 | this.playSound("fightScream"); 880 | }, 1000); 881 | 882 | this.scenes.game.addChild(fightAnim); 883 | this.scenes.game.addChild(this.characterNames[0]); 884 | this.scenes.game.addChild(this.characterNames[1]); 885 | 886 | let animate = () => { 887 | requestAnimationFrame(animate); 888 | this.scenes.game.alpha += 0.05; 889 | }; 890 | animate(); 891 | } 892 | 893 | youWin(winner) { 894 | this.setActiveScene("youWin"); 895 | let title = this.textObj.customText( 896 | this.characterNames[winner]._text + " Wins!", 897 | "center", 898 | 50 899 | ); 900 | let titleContinue = this.textObj.customText( 901 | "Press Enter to Restart", 902 | "center", 903 | 480 904 | ); 905 | 906 | this.scenes.youWin.addChild(title); 907 | this.scenes.youWin.addChild(titleContinue); 908 | let animate = () => { 909 | requestAnimationFrame(animate); 910 | this.scenes.youWin.alpha += 0.05; 911 | }; 912 | animate(); 913 | 914 | this.stopBgSound(); 915 | this.playSound("welldone"); 916 | } 917 | 918 | gameOver() { 919 | this.setActiveScene("gameOver"); 920 | this.stopSound(); 921 | let title = this.textObj.customText("GAME OVER", "center", 200); 922 | let titleContinue = this.textObj.customText( 923 | "Press Enter to Restart", 924 | "center", 925 | 250 926 | ); 927 | 928 | this.scenes.gameOver.addChild(title); 929 | this.scenes.gameOver.addChild(titleContinue); 930 | let animate = () => { 931 | requestAnimationFrame(animate); 932 | this.scenes.gameOver.alpha += 0.05; 933 | }; 934 | animate(); 935 | } 936 | 937 | groupSprites(container, options) { 938 | for (let i = 0; i < options.length; i++) { 939 | container.addChild(options[i]); 940 | } 941 | } 942 | 943 | setBGScale(sprite) { 944 | const winAspectRatio = 1000 / 600; 945 | const bgAspectRatio = sprite.texture.width / sprite.texture.height; 946 | let ratio; 947 | 948 | if (winAspectRatio > bgAspectRatio) { 949 | ratio = 1000 / sprite.texture.width; 950 | } else { 951 | ratio = 600 / sprite.texture.height; 952 | } 953 | 954 | sprite.scale.x = ratio; 955 | sprite.scale.y = ratio; 956 | 957 | sprite.x = (1000 - sprite.width) / 2; 958 | sprite.y = (600 - sprite.height) / 2; 959 | } 960 | 961 | attachEvents() { 962 | window.addEventListener("keydown", e => { 963 | if (this.scenes.intro.visible) { 964 | if (e.key === "Enter") { 965 | this.chooseScreen(); 966 | } 967 | } 968 | 969 | if (this.scenes.gameOver.visible) { 970 | if (e.key === "Enter") { 971 | this.introScreen(); 972 | } 973 | } 974 | 975 | if (this.scenes.youWin.visible) { 976 | if (e.key === "Enter") { 977 | window.location.reload(false); 978 | } 979 | } 980 | }); 981 | } 982 | 983 | createAnimation(id, numberFrames, reverse = false) { 984 | let frames = []; 985 | 986 | if (!reverse) { 987 | for (let i = 1; i <= numberFrames; i++) { 988 | frames.push(PIXI.Texture.fromFrame(`${id}${i}.png`)); 989 | } 990 | } else { 991 | for (let i = numberFrames; i > 0; i--) { 992 | frames.push(PIXI.Texture.fromFrame(`${id}${i}.png`)); 993 | } 994 | } 995 | 996 | const anim = new PIXI.extras.AnimatedSprite(frames); 997 | 998 | return anim; 999 | } 1000 | 1001 | setupKeys(character, opponent) { 1002 | this.keys.left = this.keys.left || []; 1003 | this.keys.up = this.keys.up || []; 1004 | this.keys.right = this.keys.right || []; 1005 | this.keys.down = this.keys.down || []; 1006 | this.keys.kick = this.keys.kick || []; 1007 | this.keys.punch = this.keys.punch || []; 1008 | this.keys.pawa = this.keys.pawa || []; 1009 | this.keys.fatal = this.keys.fatal || []; 1010 | 1011 | let player = opponent ? 1 : 0; 1012 | 1013 | if (opponent) { 1014 | this.keys.left[player] = Keyboard(37); // left 1015 | this.keys.up[player] = Keyboard(38); // up 1016 | this.keys.right[player] = Keyboard(39); // right 1017 | this.keys.down[player] = Keyboard(40); // down 1018 | this.keys.kick[player] = Keyboard(80); // p 1019 | this.keys.punch[player] = Keyboard(79); // o 1020 | this.keys.pawa[player] = Keyboard(73); // i 1021 | this.keys.fatal[player] = Keyboard(85); // u 1022 | } else { 1023 | this.keys.left[player] = Keyboard(65); // a 1024 | this.keys.up[player] = Keyboard(87); // w 1025 | this.keys.right[player] = Keyboard(68); // d 1026 | this.keys.down[player] = Keyboard(83); // s 1027 | this.keys.kick[player] = Keyboard(70); // f 1028 | this.keys.punch[player] = Keyboard(71); // g 1029 | this.keys.pawa[player] = Keyboard(72); // h 1030 | this.keys.fatal[player] = Keyboard(74); // j 1031 | } 1032 | 1033 | this.keys.left[player].press = () => { 1034 | if (!this.characters[player].isDeath) { 1035 | if (character.actions.walk) { 1036 | if (character.y === this.groundY) { 1037 | this.action[player] = "walk-left"; 1038 | character.vx = 3; 1039 | this.checkSide(); 1040 | } 1041 | } 1042 | } 1043 | }; 1044 | 1045 | this.keys.left[player].release = () => { 1046 | if (!this.characters[player].isDeath) { 1047 | if (character.actions.walk) { 1048 | if (character.y === this.groundY) { 1049 | this.action[player] = "stance"; 1050 | character.vx = 0; 1051 | } 1052 | } 1053 | } 1054 | }; 1055 | 1056 | this.keys.right[player].press = () => { 1057 | if (!this.characters[player].isDeath) { 1058 | if (character.actions.walk) { 1059 | if (character.y === this.groundY) { 1060 | this.action[player] = "walk-right"; 1061 | character.vx = 3; 1062 | this.checkSide(); 1063 | } 1064 | } 1065 | } 1066 | }; 1067 | 1068 | this.keys.right[player].release = () => { 1069 | if (!this.characters[player].isDeath) { 1070 | if (character.actions.walk) { 1071 | if (character.y === this.groundY) { 1072 | this.action[player] = "stance"; 1073 | character.vx = 0; 1074 | } 1075 | } 1076 | } 1077 | }; 1078 | 1079 | this.keys.down[player].press = () => { 1080 | if (!this.characters[player].isDeath) { 1081 | if (character.actions.duck) { 1082 | if (character.y === this.groundY) { 1083 | this.action[player] = "ducking"; 1084 | character.actions.duck.gotoAndPlay(0); 1085 | } 1086 | } 1087 | } 1088 | }; 1089 | 1090 | this.keys.down[player].release = () => { 1091 | if (!this.characters[player].isDeath) { 1092 | if (character.actions.raise) { 1093 | if (character.y === this.groundY) { 1094 | this.action[player] = "raise"; 1095 | character.actions.raise.gotoAndPlay(0); 1096 | } 1097 | } 1098 | } 1099 | }; 1100 | 1101 | this.keys.pawa[player].press = () => { 1102 | if (!this.characters[player].isDeath) { 1103 | if (character.y === this.groundY) { 1104 | if (character.actions.punch) { 1105 | this.action[player] = "punch"; 1106 | this.power[player] = "yelo"; 1107 | this.powers[player].yelo.gotoAndPlay(0); 1108 | this.powers[player].yelo.visible = true; 1109 | this.powers[player].yelo.y = this.groundY; 1110 | this.powers[player].yelo.x = character.position.x; 1111 | 1112 | character.actions.punch.gotoAndPlay(0); 1113 | 1114 | if (this.scenes.game.visible) { 1115 | this.playSound("nopunch"); 1116 | this.playSound("hitscream"); 1117 | } 1118 | } 1119 | } 1120 | } 1121 | }; 1122 | 1123 | this.keys.fatal[player].press = () => { 1124 | if (!this.characters[player].isDeath) { 1125 | if (character.actions.punch) { 1126 | this.action[player] = "punch"; 1127 | this.power[player] = "fire"; 1128 | this.powers[player].fire.gotoAndPlay(7); 1129 | this.powers[player].fire.visible = true; 1130 | this.powers[player].fire.y = this.groundY; 1131 | this.powers[player].fire.x = character.position.x; 1132 | 1133 | character.actions.punch.gotoAndPlay(0); 1134 | 1135 | if (this.scenes.game.visible) { 1136 | this.playSound("nopunch"); 1137 | this.playSound("hitscream"); 1138 | } 1139 | } 1140 | } 1141 | }; 1142 | 1143 | this.keys.kick[player].press = () => { 1144 | if (!this.characters[player].isDeath) { 1145 | if (character.actions.kick) { 1146 | if (character.y === this.groundY) { 1147 | this.action[player] = "kick"; 1148 | character.actions.kick.gotoAndPlay(0); 1149 | 1150 | if (this.scenes.game.visible) { 1151 | this.playSound("nopunch"); 1152 | this.playSound("hitscream"); 1153 | } 1154 | } else { 1155 | if (!character.actions.airkick) { 1156 | return; 1157 | } 1158 | 1159 | if (this.action[player] === "jump-right") { 1160 | this.action[player] = "airkick-right"; 1161 | } else if (this.action[player] === "jump-left") { 1162 | this.action[player] = "airkick-left"; 1163 | } else if (this.action[player] === "jump") { 1164 | this.action[player] = "airkick"; 1165 | } 1166 | 1167 | character.actions.airkick.gotoAndPlay(0); 1168 | 1169 | if (this.scenes.game.visible) { 1170 | this.playSound("nopunch"); 1171 | this.playSound("hitscream"); 1172 | } 1173 | } 1174 | } 1175 | } 1176 | }; 1177 | 1178 | this.keys.punch[player].press = () => { 1179 | if (!this.characters[player].isDeath) { 1180 | if (character.actions.punch) { 1181 | if (character.y === this.groundY) { 1182 | this.action[player] = "punch"; 1183 | character.actions.punch.gotoAndPlay(0); 1184 | if (this.scenes.game.visible) { 1185 | this.playSound("nopunch"); 1186 | this.playSound("hitscream"); 1187 | } 1188 | } 1189 | } 1190 | } 1191 | }; 1192 | 1193 | this.keys.up[player].press = () => { 1194 | if (!this.characters[player].isDeath) { 1195 | if (character.actions.jump) { 1196 | if (character.y === this.groundY) { 1197 | this.action[player] = "jump"; 1198 | character.vy = -24; 1199 | this.playSound("jump"); 1200 | } 1201 | } 1202 | } 1203 | }; 1204 | } 1205 | 1206 | checkSide() { 1207 | if (!this.switchRight) { 1208 | if (this.characters[1].x < this.characters[0].x) { 1209 | this.characters[1].width = this.characters[1].width * -1; 1210 | this.characters[0].width = this.characters[0].width * -1; 1211 | this.switchRight = true; 1212 | this.switchLeft = false; 1213 | } 1214 | } 1215 | 1216 | if (!this.switchLeft) { 1217 | if (this.characters[1].x > this.characters[0].x) { 1218 | this.characters[1].width = this.characters[1].width * -1; 1219 | this.characters[0].width = this.characters[0].width * -1; 1220 | this.switchLeft = true; 1221 | this.switchRight = false; 1222 | } 1223 | } 1224 | } 1225 | 1226 | setupPowers(opponent) { 1227 | const player = opponent ? 0 : 1; 1228 | 1229 | this.powers[player] = {}; 1230 | 1231 | this.powers[player].yelo = this.createAnimation("yelo-moving", 1); 1232 | this.powers[player].yelo.visible = false; 1233 | this.powers[player].yelo.x = 0; 1234 | this.powers[player].yelo.vx = 15; 1235 | if (player === 1) { 1236 | this.powers[player].yelo.vx = -15; 1237 | } 1238 | 1239 | this.scenes.game.addChild(this.powers[player].yelo); 1240 | } 1241 | 1242 | setupFatality(opponent) { 1243 | const player = opponent ? 0 : 1; 1244 | 1245 | this.powers[player].fire = this.createAnimation("fire0", 7); 1246 | this.powers[player].fire.loop = true; 1247 | this.powers[player].fire.animationSpeed = 0.25; 1248 | this.powers[player].fire.visible = false; 1249 | this.powers[player].fire.x = 0; 1250 | this.powers[player].fire.vx = 15; 1251 | if (player === 1) { 1252 | this.powers[player].fire.vx = -15; 1253 | } 1254 | 1255 | this.scenes.game.addChild(this.powers[player].fire); 1256 | } 1257 | 1258 | setupCharacters(selectedPlayer, opponent) { 1259 | const player = opponent ? 1 : 0; 1260 | 1261 | characterData.characters.forEach(data => { 1262 | if (data.name === selectedPlayer) { 1263 | if (data.active) { 1264 | const character = new PIXI.Container(); 1265 | const animations = []; 1266 | const actions = {}; 1267 | 1268 | character.x = opponent ? 770 : 180; 1269 | character.y = this.groundY; 1270 | character.scale.x = opponent ? -data.scale : data.scale; 1271 | character.scale.y = data.scale; 1272 | 1273 | data.animations.forEach(animation => { 1274 | const sprite = this.createAnimation( 1275 | `${data.name}-${animation.name}`, 1276 | animation.frames 1277 | ); 1278 | sprite.name = animation.name; 1279 | sprite.animationSpeed = animation.animationSpeed; 1280 | sprite.anchor.set(0.5, 0); 1281 | 1282 | if (animation.loop === true) { 1283 | sprite.play(); 1284 | } else { 1285 | sprite.loop = false; 1286 | } 1287 | 1288 | if (animation.loop === "one") { 1289 | sprite.play(1); 1290 | } 1291 | 1292 | if (!animation.visible) { 1293 | sprite.visible = false; 1294 | } 1295 | 1296 | animations.push(sprite); 1297 | actions[animation.name] = sprite; 1298 | }); 1299 | 1300 | this.groupSprites(character, animations); 1301 | 1302 | character.actions = actions; 1303 | character.animations = animations; 1304 | character.opponent = data.opponent; 1305 | character.active = data.active; 1306 | character.isDeath = false; 1307 | 1308 | this.characters.push(character); 1309 | 1310 | if (this.characters.length === 1) { 1311 | this.characterNames[0] = this.textObj.customText( 1312 | selectedPlayer, 1313 | 53, 1314 | 48 1315 | ); 1316 | } else { 1317 | this.characterNames[1] = this.textObj.customText( 1318 | selectedPlayer, 1319 | 817, 1320 | 48 1321 | ); 1322 | } 1323 | 1324 | this.setupKeys(character, opponent); 1325 | } 1326 | } 1327 | }); 1328 | 1329 | this.characters.forEach(character => { 1330 | if (character.active) { 1331 | this.scenes.game.addChild(character); 1332 | } 1333 | }); 1334 | 1335 | this.action[player] = "stance"; 1336 | } 1337 | } 1338 | 1339 | export default Game; 1340 | --------------------------------------------------------------------------------