├── .DS_Store ├── .gitignore ├── .vscode └── launch.json ├── LICENSE ├── README.md ├── createBoundsFromMask.js ├── index.html ├── package-lock.json ├── package.json ├── server ├── index.js ├── package-lock.json └── package.json ├── shipmask.png ├── src ├── .DS_Store ├── animation.js ├── assets │ ├── player.png │ └── ship.png ├── constants.js ├── index.js ├── mapBounds.js └── movement.js └── webpack ├── base.js └── prod.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danba340/barely-amongjs/f5ee9172273145a5b4989e9c885a8c43bc3c788c/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | server/node_modules -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "node", 9 | "request": "launch", 10 | "name": "mask", 11 | "skipFiles": [ 12 | "/**" 13 | ], 14 | "program": "${workspaceFolder}/createBoundsFromMask.js" 15 | },{ 16 | "type": "node", 17 | "request": "launch", 18 | "name": "server", 19 | "skipFiles": [ 20 | "/**" 21 | ], 22 | "program": "${workspaceFolder}/server/index.js" 23 | } 24 | ] 25 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Richard Davey 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Phaser 3 Webpack Project Template 2 | 3 | A Phaser 3 project template with ES6 support via [Babel 7](https://babeljs.io/) and [Webpack 4](https://webpack.js.org/) that includes hot-reloading for development and production-ready builds. 4 | 5 | This has been updated for Phaser 3.50.0 version and above. 6 | 7 | Loading images via JavaScript module `import` is also supported, although not recommended. 8 | 9 | ## Requirements 10 | 11 | [Node.js](https://nodejs.org) is required to install dependencies and run scripts via `npm`. 12 | 13 | ## Available Commands 14 | 15 | | Command | Description | 16 | |---------|-------------| 17 | | `npm install` | Install project dependencies | 18 | | `npm start` | Build project and open web server running project | 19 | | `npm run build` | Builds code bundle with production settings (minification, uglification, etc..) | 20 | 21 | ## Writing Code 22 | 23 | After cloning the repo, run `npm install` from your project directory. Then, you can start the local development server by running `npm start`. 24 | 25 | After starting the development server with `npm start`, you can edit any files in the `src` folder and webpack will automatically recompile and reload your server (available at `http://localhost:8080` by default). 26 | 27 | ## Customizing the Template 28 | 29 | ### Babel 30 | 31 | You can write modern ES6+ JavaScript and Babel will transpile it to a version of JavaScript that you want your project to support. The targeted browsers are set in the `.babelrc` file and the default currently targets all browsers with total usage over "0.25%" but excludes IE11 and Opera Mini. 32 | 33 | ``` 34 | "browsers": [ 35 | ">0.25%", 36 | "not ie 11", 37 | "not op_mini all" 38 | ] 39 | ``` 40 | 41 | ### Webpack 42 | 43 | If you want to customize your build, such as adding a new webpack loader or plugin (i.e. for loading CSS or fonts), you can modify the `webpack/base.js` file for cross-project changes, or you can modify and/or create new configuration files and target them in specific npm tasks inside of `package.json'. 44 | 45 | ## Deploying Code 46 | 47 | After you run the `npm run build` command, your code will be built into a single bundle located at `dist/bundle.min.js` along with any other assets you project depended. 48 | 49 | If you put the contents of the `dist` folder in a publicly-accessible location (say something like `http://mycoolserver.com`), you should be able to open `http://mycoolserver.com/index.html` and play your game. 50 | -------------------------------------------------------------------------------- /createBoundsFromMask.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const PNG = require('png-js'); 3 | const IMG_WIDTH = 2160; 4 | 5 | PNG.decode('shipmask.png', function (data) { 6 | const result = {}; 7 | for (let i = 0; i < data.length; i += 4) { 8 | const row = Math.floor(i / 4 / IMG_WIDTH); 9 | if (data[i] === 0 && data[i + 1] === 255 && data[i + 2] === 0) { 10 | if (result[row]) { 11 | result[row].push((i / 4) % IMG_WIDTH); 12 | } else { 13 | result[row] = [(i / 4) % IMG_WIDTH]; 14 | } 15 | } 16 | } 17 | fs.writeFileSync( 18 | './mapBounds.js', 19 | 'export const mapBounds = ' + JSON.stringify(result), 20 | ); 21 | }); 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "phaser3-project-template", 3 | "version": "1.1.2", 4 | "description": "A Phaser 3 Project Template", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "build": "webpack --config webpack/prod.js ", 8 | "start": "webpack-dev-server --config webpack/base.js --open" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/photonstorm/phaser3-project-template.git" 13 | }, 14 | "author": "Richard Davey (http://www.photonstorm.com)", 15 | "license": "MIT", 16 | "licenseUrl": "http://www.opensource.org/licenses/mit-license.php", 17 | "bugs": { 18 | "url": "https://github.com/photonstorm/phaser3-project-template/issues" 19 | }, 20 | "homepage": "https://github.com/photonstorm/phaser3-project-template#readme", 21 | "devDependencies": { 22 | "@babel/core": "^7.7.2", 23 | "@babel/preset-env": "^7.7.1", 24 | "babel-loader": "^8.0.6", 25 | "clean-webpack-plugin": "^3.0.0", 26 | "file-loader": "^4.2.0", 27 | "html-webpack-plugin": "^3.2.0", 28 | "raw-loader": "^3.1.0", 29 | "terser-webpack-plugin": "^2.2.1", 30 | "webpack": "^4.41.2", 31 | "webpack-cli": "^3.3.10", 32 | "webpack-dev-server": "^3.9.0", 33 | "webpack-merge": "^4.2.2" 34 | }, 35 | "dependencies": { 36 | "phaser": "^3.50.0", 37 | "png-js": "^1.0.0", 38 | "socket.io-client": "^3.1.1" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /server/index.js: -------------------------------------------------------------------------------- 1 | const app = require('express')(); 2 | 3 | const http = require('http').Server(app); 4 | 5 | const io = require('socket.io')(http, { 6 | cors: { 7 | origins: ['http://localhost:8080'], 8 | }, 9 | }); 10 | 11 | io.on('connection', (socket) => { 12 | console.log('player connected'); 13 | 14 | socket.on('disconnect', () => { 15 | console.log('player disconnected'); 16 | }); 17 | 18 | socket.on('move', ({ x, y }) => { 19 | socket.broadcast.emit('move', { x, y }); 20 | }); 21 | socket.on('moveEnd', () => { 22 | socket.broadcast.emit('moveEnd'); 23 | }); 24 | }); 25 | 26 | http.listen(3000, () => { 27 | console.log('server listening on localhost:3000'); 28 | }); 29 | -------------------------------------------------------------------------------- /server/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "amongjs-server", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "@types/component-emitter": { 8 | "version": "1.2.10", 9 | "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.10.tgz", 10 | "integrity": "sha512-bsjleuRKWmGqajMerkzox19aGbscQX5rmmvvXl3wlIp5gMG1HgkiwPxsN5p070fBDKTNSPgojVbuY1+HWMbFhg==" 11 | }, 12 | "@types/cookie": { 13 | "version": "0.4.0", 14 | "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.0.tgz", 15 | "integrity": "sha512-y7mImlc/rNkvCRmg8gC3/lj87S7pTUIJ6QGjwHR9WQJcFs+ZMTOaoPrkdFA/YdbuqVEmEbb5RdhVxMkAcgOnpg==" 16 | }, 17 | "@types/cors": { 18 | "version": "2.8.9", 19 | "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.9.tgz", 20 | "integrity": "sha512-zurD1ibz21BRlAOIKP8yhrxlqKx6L9VCwkB5kMiP6nZAhoF5MvC7qS1qPA7nRcr1GJolfkQC7/EAL4hdYejLtg==" 21 | }, 22 | "@types/node": { 23 | "version": "14.14.25", 24 | "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.25.tgz", 25 | "integrity": "sha512-EPpXLOVqDvisVxtlbvzfyqSsFeQxltFbluZNRndIb8tr9KiBnYNLzrc1N3pyKUCww2RNrfHDViqDWWE1LCJQtQ==" 26 | }, 27 | "accepts": { 28 | "version": "1.3.7", 29 | "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", 30 | "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==", 31 | "requires": { 32 | "mime-types": "~2.1.24", 33 | "negotiator": "0.6.2" 34 | } 35 | }, 36 | "array-flatten": { 37 | "version": "1.1.1", 38 | "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", 39 | "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" 40 | }, 41 | "base64-arraybuffer": { 42 | "version": "0.1.4", 43 | "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz", 44 | "integrity": "sha1-mBjHngWbE1X5fgQooBfIOOkLqBI=" 45 | }, 46 | "base64id": { 47 | "version": "2.0.0", 48 | "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz", 49 | "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==" 50 | }, 51 | "body-parser": { 52 | "version": "1.19.0", 53 | "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz", 54 | "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==", 55 | "requires": { 56 | "bytes": "3.1.0", 57 | "content-type": "~1.0.4", 58 | "debug": "2.6.9", 59 | "depd": "~1.1.2", 60 | "http-errors": "1.7.2", 61 | "iconv-lite": "0.4.24", 62 | "on-finished": "~2.3.0", 63 | "qs": "6.7.0", 64 | "raw-body": "2.4.0", 65 | "type-is": "~1.6.17" 66 | }, 67 | "dependencies": { 68 | "debug": { 69 | "version": "2.6.9", 70 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", 71 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", 72 | "requires": { 73 | "ms": "2.0.0" 74 | } 75 | }, 76 | "ms": { 77 | "version": "2.0.0", 78 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 79 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" 80 | } 81 | } 82 | }, 83 | "bytes": { 84 | "version": "3.1.0", 85 | "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz", 86 | "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==" 87 | }, 88 | "component-emitter": { 89 | "version": "1.3.0", 90 | "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", 91 | "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==" 92 | }, 93 | "content-disposition": { 94 | "version": "0.5.3", 95 | "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz", 96 | "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==", 97 | "requires": { 98 | "safe-buffer": "5.1.2" 99 | } 100 | }, 101 | "content-type": { 102 | "version": "1.0.4", 103 | "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", 104 | "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" 105 | }, 106 | "cookie": { 107 | "version": "0.4.1", 108 | "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz", 109 | "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==" 110 | }, 111 | "cookie-signature": { 112 | "version": "1.0.6", 113 | "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", 114 | "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" 115 | }, 116 | "cors": { 117 | "version": "2.8.5", 118 | "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", 119 | "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", 120 | "requires": { 121 | "object-assign": "^4", 122 | "vary": "^1" 123 | } 124 | }, 125 | "debug": { 126 | "version": "4.3.1", 127 | "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", 128 | "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==", 129 | "requires": { 130 | "ms": "2.1.2" 131 | } 132 | }, 133 | "depd": { 134 | "version": "1.1.2", 135 | "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", 136 | "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" 137 | }, 138 | "destroy": { 139 | "version": "1.0.4", 140 | "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", 141 | "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" 142 | }, 143 | "ee-first": { 144 | "version": "1.1.1", 145 | "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", 146 | "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" 147 | }, 148 | "encodeurl": { 149 | "version": "1.0.2", 150 | "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", 151 | "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" 152 | }, 153 | "engine.io": { 154 | "version": "4.1.1", 155 | "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-4.1.1.tgz", 156 | "integrity": "sha512-t2E9wLlssQjGw0nluF6aYyfX8LwYU8Jj0xct+pAhfWfv/YrBn6TSNtEYsgxHIfaMqfrLx07czcMg9bMN6di+3w==", 157 | "requires": { 158 | "accepts": "~1.3.4", 159 | "base64id": "2.0.0", 160 | "cookie": "~0.4.1", 161 | "cors": "~2.8.5", 162 | "debug": "~4.3.1", 163 | "engine.io-parser": "~4.0.0", 164 | "ws": "~7.4.2" 165 | } 166 | }, 167 | "engine.io-parser": { 168 | "version": "4.0.2", 169 | "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-4.0.2.tgz", 170 | "integrity": "sha512-sHfEQv6nmtJrq6TKuIz5kyEKH/qSdK56H/A+7DnAuUPWosnIZAS2NHNcPLmyjtY3cGS/MqJdZbUjW97JU72iYg==", 171 | "requires": { 172 | "base64-arraybuffer": "0.1.4" 173 | } 174 | }, 175 | "escape-html": { 176 | "version": "1.0.3", 177 | "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", 178 | "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" 179 | }, 180 | "etag": { 181 | "version": "1.8.1", 182 | "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", 183 | "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" 184 | }, 185 | "express": { 186 | "version": "4.17.1", 187 | "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz", 188 | "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==", 189 | "requires": { 190 | "accepts": "~1.3.7", 191 | "array-flatten": "1.1.1", 192 | "body-parser": "1.19.0", 193 | "content-disposition": "0.5.3", 194 | "content-type": "~1.0.4", 195 | "cookie": "0.4.0", 196 | "cookie-signature": "1.0.6", 197 | "debug": "2.6.9", 198 | "depd": "~1.1.2", 199 | "encodeurl": "~1.0.2", 200 | "escape-html": "~1.0.3", 201 | "etag": "~1.8.1", 202 | "finalhandler": "~1.1.2", 203 | "fresh": "0.5.2", 204 | "merge-descriptors": "1.0.1", 205 | "methods": "~1.1.2", 206 | "on-finished": "~2.3.0", 207 | "parseurl": "~1.3.3", 208 | "path-to-regexp": "0.1.7", 209 | "proxy-addr": "~2.0.5", 210 | "qs": "6.7.0", 211 | "range-parser": "~1.2.1", 212 | "safe-buffer": "5.1.2", 213 | "send": "0.17.1", 214 | "serve-static": "1.14.1", 215 | "setprototypeof": "1.1.1", 216 | "statuses": "~1.5.0", 217 | "type-is": "~1.6.18", 218 | "utils-merge": "1.0.1", 219 | "vary": "~1.1.2" 220 | }, 221 | "dependencies": { 222 | "cookie": { 223 | "version": "0.4.0", 224 | "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz", 225 | "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==" 226 | }, 227 | "debug": { 228 | "version": "2.6.9", 229 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", 230 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", 231 | "requires": { 232 | "ms": "2.0.0" 233 | } 234 | }, 235 | "ms": { 236 | "version": "2.0.0", 237 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 238 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" 239 | } 240 | } 241 | }, 242 | "finalhandler": { 243 | "version": "1.1.2", 244 | "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz", 245 | "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==", 246 | "requires": { 247 | "debug": "2.6.9", 248 | "encodeurl": "~1.0.2", 249 | "escape-html": "~1.0.3", 250 | "on-finished": "~2.3.0", 251 | "parseurl": "~1.3.3", 252 | "statuses": "~1.5.0", 253 | "unpipe": "~1.0.0" 254 | }, 255 | "dependencies": { 256 | "debug": { 257 | "version": "2.6.9", 258 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", 259 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", 260 | "requires": { 261 | "ms": "2.0.0" 262 | } 263 | }, 264 | "ms": { 265 | "version": "2.0.0", 266 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 267 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" 268 | } 269 | } 270 | }, 271 | "forwarded": { 272 | "version": "0.1.2", 273 | "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", 274 | "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=" 275 | }, 276 | "fresh": { 277 | "version": "0.5.2", 278 | "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", 279 | "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" 280 | }, 281 | "http-errors": { 282 | "version": "1.7.2", 283 | "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz", 284 | "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==", 285 | "requires": { 286 | "depd": "~1.1.2", 287 | "inherits": "2.0.3", 288 | "setprototypeof": "1.1.1", 289 | "statuses": ">= 1.5.0 < 2", 290 | "toidentifier": "1.0.0" 291 | } 292 | }, 293 | "iconv-lite": { 294 | "version": "0.4.24", 295 | "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", 296 | "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", 297 | "requires": { 298 | "safer-buffer": ">= 2.1.2 < 3" 299 | } 300 | }, 301 | "inherits": { 302 | "version": "2.0.3", 303 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", 304 | "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" 305 | }, 306 | "ipaddr.js": { 307 | "version": "1.9.1", 308 | "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", 309 | "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==" 310 | }, 311 | "media-typer": { 312 | "version": "0.3.0", 313 | "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", 314 | "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" 315 | }, 316 | "merge-descriptors": { 317 | "version": "1.0.1", 318 | "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", 319 | "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=" 320 | }, 321 | "methods": { 322 | "version": "1.1.2", 323 | "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", 324 | "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=" 325 | }, 326 | "mime": { 327 | "version": "1.6.0", 328 | "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", 329 | "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==" 330 | }, 331 | "mime-db": { 332 | "version": "1.45.0", 333 | "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.45.0.tgz", 334 | "integrity": "sha512-CkqLUxUk15hofLoLyljJSrukZi8mAtgd+yE5uO4tqRZsdsAJKv0O+rFMhVDRJgozy+yG6md5KwuXhD4ocIoP+w==" 335 | }, 336 | "mime-types": { 337 | "version": "2.1.28", 338 | "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.28.tgz", 339 | "integrity": "sha512-0TO2yJ5YHYr7M2zzT7gDU1tbwHxEUWBCLt0lscSNpcdAfFyJOVEpRYNS7EXVcTLNj/25QO8gulHC5JtTzSE2UQ==", 340 | "requires": { 341 | "mime-db": "1.45.0" 342 | } 343 | }, 344 | "ms": { 345 | "version": "2.1.2", 346 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", 347 | "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" 348 | }, 349 | "negotiator": { 350 | "version": "0.6.2", 351 | "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz", 352 | "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==" 353 | }, 354 | "object-assign": { 355 | "version": "4.1.1", 356 | "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", 357 | "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" 358 | }, 359 | "on-finished": { 360 | "version": "2.3.0", 361 | "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", 362 | "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", 363 | "requires": { 364 | "ee-first": "1.1.1" 365 | } 366 | }, 367 | "parseurl": { 368 | "version": "1.3.3", 369 | "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", 370 | "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==" 371 | }, 372 | "path-to-regexp": { 373 | "version": "0.1.7", 374 | "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", 375 | "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" 376 | }, 377 | "proxy-addr": { 378 | "version": "2.0.6", 379 | "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz", 380 | "integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==", 381 | "requires": { 382 | "forwarded": "~0.1.2", 383 | "ipaddr.js": "1.9.1" 384 | } 385 | }, 386 | "qs": { 387 | "version": "6.7.0", 388 | "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz", 389 | "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==" 390 | }, 391 | "range-parser": { 392 | "version": "1.2.1", 393 | "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", 394 | "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==" 395 | }, 396 | "raw-body": { 397 | "version": "2.4.0", 398 | "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz", 399 | "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==", 400 | "requires": { 401 | "bytes": "3.1.0", 402 | "http-errors": "1.7.2", 403 | "iconv-lite": "0.4.24", 404 | "unpipe": "1.0.0" 405 | } 406 | }, 407 | "safe-buffer": { 408 | "version": "5.1.2", 409 | "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", 410 | "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" 411 | }, 412 | "safer-buffer": { 413 | "version": "2.1.2", 414 | "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", 415 | "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" 416 | }, 417 | "send": { 418 | "version": "0.17.1", 419 | "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz", 420 | "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==", 421 | "requires": { 422 | "debug": "2.6.9", 423 | "depd": "~1.1.2", 424 | "destroy": "~1.0.4", 425 | "encodeurl": "~1.0.2", 426 | "escape-html": "~1.0.3", 427 | "etag": "~1.8.1", 428 | "fresh": "0.5.2", 429 | "http-errors": "~1.7.2", 430 | "mime": "1.6.0", 431 | "ms": "2.1.1", 432 | "on-finished": "~2.3.0", 433 | "range-parser": "~1.2.1", 434 | "statuses": "~1.5.0" 435 | }, 436 | "dependencies": { 437 | "debug": { 438 | "version": "2.6.9", 439 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", 440 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", 441 | "requires": { 442 | "ms": "2.0.0" 443 | }, 444 | "dependencies": { 445 | "ms": { 446 | "version": "2.0.0", 447 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 448 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" 449 | } 450 | } 451 | }, 452 | "ms": { 453 | "version": "2.1.1", 454 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", 455 | "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==" 456 | } 457 | } 458 | }, 459 | "serve-static": { 460 | "version": "1.14.1", 461 | "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz", 462 | "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==", 463 | "requires": { 464 | "encodeurl": "~1.0.2", 465 | "escape-html": "~1.0.3", 466 | "parseurl": "~1.3.3", 467 | "send": "0.17.1" 468 | } 469 | }, 470 | "setprototypeof": { 471 | "version": "1.1.1", 472 | "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz", 473 | "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==" 474 | }, 475 | "socket.io": { 476 | "version": "3.1.1", 477 | "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-3.1.1.tgz", 478 | "integrity": "sha512-7cBWdsDC7bbyEF6WbBqffjizc/H4YF1wLdZoOzuYfo2uMNSFjJKuQ36t0H40o9B20DO6p+mSytEd92oP4S15bA==", 479 | "requires": { 480 | "@types/cookie": "^0.4.0", 481 | "@types/cors": "^2.8.8", 482 | "@types/node": "^14.14.10", 483 | "accepts": "~1.3.4", 484 | "base64id": "~2.0.0", 485 | "debug": "~4.3.1", 486 | "engine.io": "~4.1.0", 487 | "socket.io-adapter": "~2.1.0", 488 | "socket.io-parser": "~4.0.3" 489 | } 490 | }, 491 | "socket.io-adapter": { 492 | "version": "2.1.0", 493 | "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.1.0.tgz", 494 | "integrity": "sha512-+vDov/aTsLjViYTwS9fPy5pEtTkrbEKsw2M+oVSoFGw6OD1IpvlV1VPhUzNbofCQ8oyMbdYJqDtGdmHQK6TdPg==" 495 | }, 496 | "socket.io-parser": { 497 | "version": "4.0.4", 498 | "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.4.tgz", 499 | "integrity": "sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==", 500 | "requires": { 501 | "@types/component-emitter": "^1.2.10", 502 | "component-emitter": "~1.3.0", 503 | "debug": "~4.3.1" 504 | } 505 | }, 506 | "statuses": { 507 | "version": "1.5.0", 508 | "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", 509 | "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=" 510 | }, 511 | "toidentifier": { 512 | "version": "1.0.0", 513 | "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz", 514 | "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==" 515 | }, 516 | "type-is": { 517 | "version": "1.6.18", 518 | "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", 519 | "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", 520 | "requires": { 521 | "media-typer": "0.3.0", 522 | "mime-types": "~2.1.24" 523 | } 524 | }, 525 | "unpipe": { 526 | "version": "1.0.0", 527 | "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", 528 | "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" 529 | }, 530 | "utils-merge": { 531 | "version": "1.0.1", 532 | "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", 533 | "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" 534 | }, 535 | "vary": { 536 | "version": "1.1.2", 537 | "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", 538 | "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" 539 | }, 540 | "ws": { 541 | "version": "7.4.3", 542 | "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.3.tgz", 543 | "integrity": "sha512-hr6vCR76GsossIRsr8OLR9acVVm1jyfEWvhbNjtgPOrfvAlKzvyeg/P6r8RuDjRyrcQoPQT7K0DGEPc7Ae6jzA==" 544 | } 545 | } 546 | } 547 | -------------------------------------------------------------------------------- /server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "amongjs-server", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "express": "^4.17.1", 13 | "socket.io": "^3.1.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /shipmask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danba340/barely-amongjs/f5ee9172273145a5b4989e9c885a8c43bc3c788c/shipmask.png -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danba340/barely-amongjs/f5ee9172273145a5b4989e9c885a8c43bc3c788c/src/.DS_Store -------------------------------------------------------------------------------- /src/animation.js: -------------------------------------------------------------------------------- 1 | export const animateMovement = (keys, player) => { 2 | const runningKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']; 3 | if ( 4 | keys.some((key) => runningKeys.includes(key)) && 5 | !player.anims.isPlaying 6 | ) { 7 | player.play('running'); 8 | } else if ( 9 | !keys.some((key) => runningKeys.includes(key)) && 10 | player.anims.isPlaying 11 | ) { 12 | player.stop('running'); 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /src/assets/player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danba340/barely-amongjs/f5ee9172273145a5b4989e9c885a8c43bc3c788c/src/assets/player.png -------------------------------------------------------------------------------- /src/assets/ship.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danba340/barely-amongjs/f5ee9172273145a5b4989e9c885a8c43bc3c788c/src/assets/ship.png -------------------------------------------------------------------------------- /src/constants.js: -------------------------------------------------------------------------------- 1 | export const PLAYER_SPRITE_WIDTH = 84; 2 | export const PLAYER_SPRITE_HEIGHT = 128; 3 | export const PLAYER_HEIGHT = 50; 4 | export const PLAYER_WIDTH = 37; 5 | export const PLAYER_START_X = 330; 6 | export const PLAYER_START_Y = 100; 7 | export const PLAYER_SPEED = 2; 8 | export const SHIP_WIDTH = 2160; 9 | export const SHIP_HEIGHT = 1166; 10 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Phaser from 'phaser'; 2 | import { io } from 'socket.io-client'; 3 | 4 | import shipImg from './assets/ship.png'; 5 | import playerSprite from './assets/player.png'; 6 | import { 7 | PLAYER_SPRITE_HEIGHT, 8 | PLAYER_SPRITE_WIDTH, 9 | PLAYER_HEIGHT, 10 | PLAYER_WIDTH, 11 | PLAYER_START_X, 12 | PLAYER_START_Y, 13 | } from './constants'; 14 | import { movePlayer } from './movement'; 15 | import { animateMovement } from './animation'; 16 | 17 | const player = {}; 18 | const otherPlayer = {}; 19 | let socket; 20 | let pressedKeys = []; 21 | 22 | class MyGame extends Phaser.Scene { 23 | constructor() { 24 | super(); 25 | } 26 | 27 | preload() { 28 | socket = io('localhost:3000'); 29 | this.load.image('ship', shipImg); 30 | this.load.spritesheet('player', playerSprite, { 31 | frameWidth: PLAYER_SPRITE_WIDTH, 32 | frameHeight: PLAYER_SPRITE_HEIGHT, 33 | }); 34 | this.load.spritesheet('otherPlayer', playerSprite, { 35 | frameWidth: PLAYER_SPRITE_WIDTH, 36 | frameHeight: PLAYER_SPRITE_HEIGHT, 37 | }); 38 | } 39 | 40 | create() { 41 | const ship = this.add.image(0, 0, 'ship'); 42 | player.sprite = this.add.sprite(PLAYER_START_X, PLAYER_START_Y, 'player'); 43 | player.sprite.displayHeight = PLAYER_HEIGHT; 44 | player.sprite.displayWidth = PLAYER_WIDTH; 45 | otherPlayer.sprite = this.add.sprite( 46 | PLAYER_START_X, 47 | PLAYER_START_Y, 48 | 'otherPlayer', 49 | ); 50 | otherPlayer.sprite.displayHeight = PLAYER_HEIGHT; 51 | otherPlayer.sprite.displayWidth = PLAYER_WIDTH; 52 | 53 | this.anims.create({ 54 | key: 'running', 55 | frames: this.anims.generateFrameNumbers('player'), 56 | frameRate: 24, 57 | reapeat: -1, 58 | }); 59 | 60 | this.input.keyboard.on('keydown', (e) => { 61 | if (!pressedKeys.includes(e.code)) { 62 | pressedKeys.push(e.code); 63 | } 64 | }); 65 | this.input.keyboard.on('keyup', (e) => { 66 | pressedKeys = pressedKeys.filter((key) => key !== e.code); 67 | }); 68 | 69 | socket.on('move', ({ x, y }) => { 70 | console.log('revieved move'); 71 | if (otherPlayer.sprite.x > x) { 72 | otherPlayer.sprite.flipX = true; 73 | } else if (otherPlayer.sprite.x < x) { 74 | otherPlayer.sprite.flipX = false; 75 | } 76 | otherPlayer.sprite.x = x; 77 | otherPlayer.sprite.y = y; 78 | otherPlayer.moving = true; 79 | }); 80 | socket.on('moveEnd', () => { 81 | console.log('revieved moveend'); 82 | otherPlayer.moving = false; 83 | }); 84 | } 85 | 86 | update() { 87 | this.scene.scene.cameras.main.centerOn(player.sprite.x, player.sprite.y); 88 | const playerMoved = movePlayer(pressedKeys, player.sprite); 89 | if (playerMoved) { 90 | socket.emit('move', { x: player.sprite.x, y: player.sprite.y }); 91 | player.movedLastFrame = true; 92 | } else { 93 | if (player.movedLastFrame) { 94 | socket.emit('moveEnd'); 95 | } 96 | player.movedLastFrame = false; 97 | } 98 | animateMovement(pressedKeys, player.sprite); 99 | // Aninamte other player 100 | if (otherPlayer.moving && !otherPlayer.sprite.anims.isPlaying) { 101 | otherPlayer.sprite.play('running'); 102 | } else if (!otherPlayer.moving && otherPlayer.sprite.anims.isPlaying) { 103 | otherPlayer.sprite.stop('running'); 104 | } 105 | } 106 | } 107 | 108 | const config = { 109 | type: Phaser.AUTO, 110 | parent: 'phaser-example', 111 | width: 800, 112 | height: 450, 113 | scene: MyGame, 114 | }; 115 | 116 | const game = new Phaser.Game(config); 117 | -------------------------------------------------------------------------------- /src/movement.js: -------------------------------------------------------------------------------- 1 | import { PLAYER_SPEED, SHIP_HEIGHT, SHIP_WIDTH } from './constants'; 2 | import { mapBounds } from './mapBounds'; 3 | 4 | const isWithinMovementBoundaries = (x, y) => { 5 | return !mapBounds[y] ? true : !mapBounds[y].includes(x); 6 | }; 7 | 8 | export const movePlayer = (keys, player) => { 9 | let playerMoved = false; 10 | const absPlayerX = player.x + SHIP_WIDTH / 2; 11 | const absPlayerY = player.y + SHIP_HEIGHT / 2 + 20; 12 | if ( 13 | keys.includes('ArrowUp') && 14 | isWithinMovementBoundaries(absPlayerX, absPlayerY - PLAYER_SPEED) 15 | ) { 16 | playerMoved = true; 17 | player.y = player.y - PLAYER_SPEED; 18 | } 19 | if ( 20 | keys.includes('ArrowDown') && 21 | isWithinMovementBoundaries(absPlayerX, absPlayerY + PLAYER_SPEED) 22 | ) { 23 | playerMoved = true; 24 | player.y = player.y + PLAYER_SPEED; 25 | } 26 | if ( 27 | keys.includes('ArrowLeft') && 28 | isWithinMovementBoundaries(absPlayerX - PLAYER_SPEED, absPlayerY) 29 | ) { 30 | playerMoved = true; 31 | player.x = player.x - PLAYER_SPEED; 32 | player.flipX = true; 33 | } 34 | if ( 35 | keys.includes('ArrowRight') && 36 | isWithinMovementBoundaries(absPlayerX + PLAYER_SPEED, absPlayerY) 37 | ) { 38 | playerMoved = true; 39 | player.x = player.x + PLAYER_SPEED; 40 | player.flipX = false; 41 | } 42 | return playerMoved; 43 | }; 44 | -------------------------------------------------------------------------------- /webpack/base.js: -------------------------------------------------------------------------------- 1 | const webpack = require("webpack"); 2 | const path = require("path"); 3 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 4 | const { CleanWebpackPlugin } = require("clean-webpack-plugin"); 5 | 6 | module.exports = { 7 | mode: "development", 8 | devtool: "eval-source-map", 9 | module: { 10 | rules: [ 11 | { 12 | test: /\.js$/, 13 | exclude: /node_modules/, 14 | use: { 15 | loader: "babel-loader" 16 | } 17 | }, 18 | { 19 | test: [/\.vert$/, /\.frag$/], 20 | use: "raw-loader" 21 | }, 22 | { 23 | test: /\.(gif|png|jpe?g|svg|xml)$/i, 24 | use: "file-loader" 25 | } 26 | ] 27 | }, 28 | plugins: [ 29 | new CleanWebpackPlugin({ 30 | root: path.resolve(__dirname, "../") 31 | }), 32 | new webpack.DefinePlugin({ 33 | CANVAS_RENDERER: JSON.stringify(true), 34 | WEBGL_RENDERER: JSON.stringify(true) 35 | }), 36 | new HtmlWebpackPlugin({ 37 | template: "./index.html" 38 | }) 39 | ] 40 | }; 41 | -------------------------------------------------------------------------------- /webpack/prod.js: -------------------------------------------------------------------------------- 1 | const merge = require("webpack-merge"); 2 | const path = require("path"); 3 | const base = require("./base"); 4 | const TerserPlugin = require("terser-webpack-plugin"); 5 | 6 | module.exports = merge(base, { 7 | mode: "production", 8 | output: { 9 | filename: "bundle.min.js" 10 | }, 11 | devtool: false, 12 | performance: { 13 | maxEntrypointSize: 900000, 14 | maxAssetSize: 900000 15 | }, 16 | optimization: { 17 | minimizer: [ 18 | new TerserPlugin({ 19 | terserOptions: { 20 | output: { 21 | comments: false 22 | } 23 | } 24 | }) 25 | ] 26 | } 27 | }); 28 | --------------------------------------------------------------------------------