├── .gitignore ├── index.html ├── src ├── styles.css └── index.js ├── scripts ├── zip-file.js └── check-file-size.js ├── README.md ├── package.json └── LICENSE /.gitignore: -------------------------------------------------------------------------------- 1 | .cache 2 | node_modules 3 | dist -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | background-color: #333; 5 | } 6 | 7 | body { 8 | display: flex; 9 | flex-direction: column; 10 | } 11 | 12 | #game { 13 | background-color: #999; 14 | margin: auto; 15 | display: block; 16 | } -------------------------------------------------------------------------------- /scripts/zip-file.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const archiver = require('archiver'); 3 | 4 | const distDir = process.cwd() + '/dist'; 5 | const output = fs.createWriteStream(distDir + '/zipped/game.zip'); 6 | const archive = archiver('zip', { zlib: { level: 9 } }); 7 | 8 | archive.pipe(output); 9 | archive.file(distDir + '/inlined/index.html', { name: 'index.html' }); 10 | 11 | archive.finalize(); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # js13kgames-parcel-starter 2 | This repo uses [Parcel](https://parceljs.org/) to build and zip games created for [js13kgames](http://js13kgames.com/). 3 | 4 | ## Requirements 5 | 6 | The commands assume [Yarn](https://yarnpkg.com/en/docs/install) is installed. 7 | 8 | ## Commands 9 | 10 | ### `yarn start` 11 | 12 | Start the Parcel build server at `http://localhost:1234`. 13 | 14 | ### `yarn build` 15 | 16 | Build, minify, and inline the game to `./dist/inlined/index.html`. 17 | 18 | ### `yarn party` 19 | 20 | Build, minify, inline, and zip the game to `./dist/zipped/game.zip`. This command finishes with a log message that says if the zip file is under 13k. 21 | -------------------------------------------------------------------------------- /scripts/check-file-size.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const chalk = require('chalk'); 3 | 4 | const MAX_BYTES = 13312; 5 | const filename = './dist/zipped/game.zip'; 6 | 7 | function getFilesizeInBytes(filename) { 8 | return fs.statSync(filename).size; 9 | } 10 | 11 | function fileIsUnderMaxSize(fileSize) { 12 | return fileSize <= MAX_BYTES; 13 | } 14 | 15 | fileSize = getFilesizeInBytes(filename); 16 | fileSizeDifference = Math.abs(MAX_BYTES - fileSize); 17 | 18 | if (fileIsUnderMaxSize(fileSize)) { 19 | console.log(chalk.green(`Hooray! The file is ${fileSize} bytes (${fileSizeDifference} bytes under the limit).`)); 20 | process.exit(0); 21 | } else { 22 | console.log(chalk.red(`Nuts! The file is ${fileSize} bytes (${fileSizeDifference} bytes over the limit).`)); 23 | process.exit(1); 24 | } 25 | 26 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | const width = 320; 2 | const height = 240; 3 | const canvas = document.getElementById("game"); 4 | const ctx = canvas.getContext("2d"); 5 | let size = { width: 50, height: 50 }; 6 | let position = { x: 0, y: 0 }; 7 | let velocity = { x: 1, y: 1 }; 8 | 9 | canvas.width = width; 10 | canvas.height = height; 11 | 12 | function draw() { 13 | requestAnimationFrame(draw); 14 | ctx.clearRect(0, 0, width, height); 15 | 16 | position.x += velocity.x; 17 | position.y += velocity.y; 18 | 19 | if (position.x + size.width > width || position.x < 0) { 20 | velocity.x = -velocity.x; 21 | } 22 | 23 | if (position.y + size.height > height || position.y < 0) { 24 | velocity.y = -velocity.y; 25 | } 26 | 27 | ctx.fillStyle = "rgb(200, 0, 0)"; 28 | ctx.fillRect(position.x, position.y, size.width, size.height); 29 | 30 | ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; 31 | ctx.fillRect(30, 30, 50, 50); 32 | } 33 | 34 | draw(); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "js13kgames-parcel-starter", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "dependencies": {}, 7 | "scripts": { 8 | "start": "yarn serve", 9 | "serve": "yarn parcel index.html", 10 | "check-file-size": "yarn node ./scripts/check-file-size.js", 11 | "delete-dist": "yarn rimraf ./dist", 12 | "create-dist": "yarn mkdirp ./dist/inlined ./dist/zipped", 13 | "parcel-build": "yarn parcel build index.html -d ./dist/bundled --no-source-maps", 14 | "inline-build": "html-inline -i ./dist/bundled/index.html -o ./dist/inlined/index.html", 15 | "build": "yarn run delete-dist && yarn run create-dist && yarn run parcel-build && yarn run inline-build", 16 | "build-zipped": "yarn run build && yarn node ./scripts/zip-file.js", 17 | "party": "yarn run build-zipped && yarn run check-file-size" 18 | }, 19 | "devDependencies": { 20 | "archiver": "^2.1.1", 21 | "chalk": "^2.4.1", 22 | "cssnano": "^4.0.3", 23 | "html-inline": "^1.2.0", 24 | "mkdirp": "^0.5.1", 25 | "parcel-bundler": "^1.9.7", 26 | "rimraf": "^2.6.2" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Matt McKenna 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 | --------------------------------------------------------------------------------