diff --git a/index.html b/index.html index 5c639d8..73435f0 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,6 @@ - Cytosis @@ -20,6 +19,7 @@

Welcome to Cytosis!

  • Flashing bacteria (including you!) are invulnerable
  • Avoid bacteria larger than your own
  • Eat smaller bacteria to increase your size
    • +
  • Press enter to pause/unpause
  • Press space to restart at any time
    • diff --git a/lib/bundle.js b/lib/bundle.js index 0ac3a51..0e572ec 100644 --- a/lib/bundle.js +++ b/lib/bundle.js @@ -80,11 +80,12 @@ class Game { this.circles = []; this.player = new __WEBPACK_IMPORTED_MODULE_1__player__["a" /* default */](); this.playing = false; - this.generateCircles(); + this.paused = false; this.sizeModifier = 1.0; this.maxRadius = 40; this.score = 0; this.gameOver = false; + this.generateCircles(); this.modal = document.getElementById("end-modal"); this.restartBtn = document.getElementById("restart"); this.restartBtn.addEventListener("click", () => this.restart()); @@ -95,11 +96,25 @@ class Game { }); } + unpause(){ + this.paused = false; + this.interval = setInterval(() => { + this.circles.push(new __WEBPACK_IMPORTED_MODULE_0__circle__["a" /* default */](false, (this.player.radius*this.sizeModifier))); + }, 1500); + } + + pause(){ + this.paused = true; + clearInterval(this.interval); + } + start(){ this.playing = true; this.player = new __WEBPACK_IMPORTED_MODULE_1__player__["a" /* default */](); this.interval = - setInterval(() => this.circles.push(new __WEBPACK_IMPORTED_MODULE_0__circle__["a" /* default */](false, (this.player.radius*this.sizeModifier))), 1500); + setInterval(() => { + this.circles.push(new __WEBPACK_IMPORTED_MODULE_0__circle__["a" /* default */](false, (this.player.radius*this.sizeModifier))); + }, 1500); } restart() { @@ -202,6 +217,7 @@ class Viewport { this.game = game; this.ctx = ctx; this.start(); + this.paused = false; } start() { @@ -212,14 +228,13 @@ class Viewport { } animate(time) { - const dt = time - this.lastTime; - + if(!this.paused){ this.game.moveCircles(); this.game.draw(this.ctx); this.lastTime = time; - requestAnimationFrame(this.animate.bind(this)); - + } + requestAnimationFrame(this.animate.bind(this)); } } @@ -278,7 +293,7 @@ class MovingObject { } generateRandomRadius() { - return Math.floor(Math.random() * ((this.playerRadius*5) - this.playerRadius/4)) + this.playerRadius/4; + return Math.floor(Math.random() * ((this.playerRadius*5) - this.playerRadius/3)) + this.playerRadius/3; } generateRandomVelocity() { @@ -350,7 +365,7 @@ document.addEventListener("DOMContentLoaded", () => { canvas.height = 700; const ctx = canvas.getContext("2d"); const game = new __WEBPACK_IMPORTED_MODULE_0__game__["a" /* default */](); - new __WEBPACK_IMPORTED_MODULE_1__viewport__["a" /* default */](game, ctx); + const viewPort = new __WEBPACK_IMPORTED_MODULE_1__viewport__["a" /* default */](game, ctx); const btn = document.getElementById("start"); const modal = document.getElementById("modal"); @@ -358,7 +373,9 @@ document.addEventListener("DOMContentLoaded", () => { if(e.keyCode === 32 && !game.playing){ modal.style.display = "none"; game.start(); - e.source.removeEventListener('keydown', arguments.callee); + } else if(e.keyCode === 13){ + viewPort.paused = !viewPort.paused; + game.paused ? game.unpause() : game.pause(); } }); diff --git a/lib/bundle.js.map b/lib/bundle.js.map index 532156c..f2e909b 100644 --- a/lib/bundle.js.map +++ b/lib/bundle.js.map @@ -1 +1 @@ -{"version":3,"sources":["webpack:///webpack/bootstrap 556bee91b008703afb14","webpack:///./lib/game.js","webpack:///./lib/viewport.js","webpack:///./lib/circle.js","webpack:///./lib/cytosis.js","webpack:///./lib/player.js","webpack:///./util/dist.js","webpack:///./util/input.js"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA,mDAA2C,cAAc;;AAEzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA;;;;;;;;;;AChEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,kBAAkB,QAAQ;AAC1B;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,oCAAoC,oCAAoC;AACxE;;AAEA;AACA;AACA;AACA;AACA;;AAEA,6DAA6D,WAAW;AACxE;AACA,+CAA+C,WAAW;;AAE1D;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA,KAAK;AACL;AACA;;;AAGA;;;;;;;;;ACjHA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;;;;;;;;;AC7BA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;;AAEL;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA,KAAK;AACL;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;;;;;;;;;;;ACjGA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;;AAEH;AACA;AACA;AACA;AACA,CAAC;;;;;;;;ACzBD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA,KAAK;AACL;AACA;AACA,KAAK;AACL;AACA;AACA,KAAK;AACL;AACA,KAAK;AACL;AACA,KAAK;AACL;AACA,KAAK;AACL;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA,KAAK;AACL;AACA,KAAK;AACL;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;;;;;ACxFA;AACA;AACA;AACA;AACA;;AAEA;;;;;;;;ACNA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA,GAAG;AACH;AACA;AACA,GAAG;AACH;AACA;AACA,GAAG;AACH;AACA,sBAAsB;AACtB;AACA;;AAEA","file":"./lib/bundle.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// identity function for calling harmony imports with the correct context\n \t__webpack_require__.i = function(value) { return value; };\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 3);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 556bee91b008703afb14","import Circle from './circle';\nimport Player from './player';\nclass Game {\n constructor(){\n this.circles = [];\n this.player = new Player();\n this.playing = false;\n this.generateCircles();\n this.sizeModifier = 1.0;\n this.maxRadius = 40;\n this.score = 0;\n this.gameOver = false;\n this.modal = document.getElementById(\"end-modal\");\n this.restartBtn = document.getElementById(\"restart\");\n this.restartBtn.addEventListener(\"click\", () => this.restart());\n window.addEventListener('keydown', (e) => {\n if(e.keyCode === 32){\n this.restart();\n }\n });\n }\n\n start(){\n this.playing = true;\n this.player = new Player();\n this.interval =\n setInterval(() => this.circles.push(new Circle(false, (this.player.radius*this.sizeModifier))), 1500);\n }\n\n restart() {\n clearInterval(this.interval);\n this.circles = [];\n this.modal.style.display = \"none\";\n this.player = new Player();\n this.generateCircles();\n this.sizeModifier = 1.0;\n this.maxRadius = 40;\n this.score = 0;\n this.gameOver = false;\n this.start();\n }\n\n generateCircles() {\n for(let i = 0; i < 27; i++){\n let circle = new Circle(true, this.player.radius);\n this.circles.push(circle);\n }\n }\n\n draw(ctx) {\n\n if(this.player.radius > this.maxRadius){\n this.sizeModifier *= 0.75;\n this.maxRadius *= 1.3;\n this.shrink();\n }\n ctx.clearRect(0, 0, 1400, 700);\n this.player.draw(ctx);\n ctx.beginPath();\n this.circles.forEach(circle => {\n circle.draw(ctx);\n });\n ctx.font = \"24pt Serif\";\n ctx.fillStyle = \"#49E5FE\";\n if(!this.gameOver){\n ctx.fillText(\"Score: \"+this.score, 8, 25);\n }\n this.moveCircles();\n }\n\n shrink() {\n this.player.radius *= this.sizeModifier;\n this.circles.forEach(circle => {circle.radius *= this.sizeModifier;});\n }\n\n setGameOver() {\n clearInterval(this.interval);\n this.circles = [];\n this.gameOver = true;\n this.modal.style.display = \"block\";\n\n const score = document.createTextNode(`Your score was: ${this.score}`);\n const scoreText = document.getElementById(\"score\");\n scoreText.textContent = `Your score was: ${this.score}`;\n\n }\n\n moveCircles() {\n this.player.handleInput();\n this.circles.forEach(circle => {\n circle.move();\n });\n if(this.playing){\n this.checkCollisions();\n }\n }\n\n checkCollisions() {\n this.circles.forEach(circle => {\n if(circle.collidesWith(this.player) && circle.collidable){\n let circleRadius = circle.radius;\n this.player.handleCollision(circle);\n if (this.player.dead){\n this.setGameOver();\n } else if(this.player.collidable) {\n this.score += Math.round((circleRadius / this.sizeModifier));\n }\n }\n });\n }\n}\n\n\nexport default Game;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./lib/game.js\n// module id = 0\n// module chunks = 0","import registerEventListeners from '../util/input';\n\nclass Viewport {\n constructor(game, ctx){\n this.game = game;\n this.ctx = ctx;\n this.start();\n }\n\n start() {\n registerEventListeners();\n this.lastTime = 0;\n\n requestAnimationFrame(this.animate.bind(this));\n }\n\n animate(time) {\n\n const dt = time - this.lastTime;\n\n this.game.moveCircles();\n this.game.draw(this.ctx);\n this.lastTime = time;\n requestAnimationFrame(this.animate.bind(this));\n \n }\n\n}\n\nexport default Viewport;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./lib/viewport.js\n// module id = 1\n// module chunks = 0","import dist from '../util/dist';\n\n\nclass MovingObject {\n constructor(start, playerRadius) {\n this.img1 = new Image();\n this.img1.src = \"./assets/brown.png\";\n this.img2 = new Image();\n this.img2.src = \"./assets/black.png\";\n this.img3 = new Image();\n this.img3.src = \"./assets/yellow.png\";\n this.IMAGES = [\n this.img1,\n this.img2,\n this.img3\n ];\n this.playerRadius = playerRadius;\n this.pos = this.generateRandomPosition();\n this.vel = this.generateRandomVelocity();\n this.radius = this.generateRandomRadius(playerRadius);\n this.image = this.IMAGES[Math.floor(Math.random()*this.IMAGES.length)];\n this.shouldDraw = true;\n this.collidable = false;\n if(!start){\n this.blinking();\n }\n setTimeout(() => {\n this.collidable = true;\n }, 2000);\n\n }\n\n blinking() {\n let startTime = new Date().getTime();\n let interval = setInterval(() => {\n if(new Date().getTime() - startTime > 2000){\n this.shouldDraw = true;\n clearInterval(interval);\n return;\n }\n this.shouldDraw = !this.shouldDraw;\n }, 250);\n }\n\n generateRandomRadius() {\n return Math.floor(Math.random() * ((this.playerRadius*5) - this.playerRadius/4)) + this.playerRadius/4;\n }\n\n generateRandomVelocity() {\n let randX = Math.floor(Math.random() * (2.4 - 0)) + 0;\n let randY = Math.floor(Math.random() * (2.4 - 0)) + 0;\n return [randX, randY];\n }\n\n generateRandomPosition() {\n let randX = Math.floor(Math.random() * (1400 - 0)) + 0;\n let randY = Math.floor(Math.random() * (1400 - 0)) + 0;\n return [randX, randY];\n }\n\n collidesWith(player) {\n const centerDist = dist(this.pos, player.pos);\n return centerDist < (this.radius + player.radius);\n }\n\n draw(ctx) {\n if(this.shouldDraw){\n ctx.drawImage(this.image, this.pos[0]-this.radius, this.pos[1]-this.radius, this.radius*2, this.radius*2);\n }\n }\n\n outOfBounds(pos){\n return (pos[0] < 0 || pos[0] > 1400 ||\n pos[1] < 0 || pos[1] > 700);\n }\n\n move() {\n this.pos = [this.pos[0] + this.vel[0], this.pos[1] + this.vel[1]];\n\n if(this.outOfBounds(this.pos)){\n this.wrap();\n }\n }\n\n wrap(){\n if(this.pos[0] < -30){\n this.pos[0] = 1430;\n } else if(this.pos[0] > 1430) {\n this.pos[0] = -30;\n } else if(this.pos[1] < -30){\n this.pos[1] = 730;\n } else if(this.pos[1] > 730){\n this.pos[1] = -30;\n }\n }\n}\n\nexport default MovingObject;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./lib/circle.js\n// module id = 2\n// module chunks = 0","import Game from './game';\nimport Viewport from './viewport';\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n const canvas = document.getElementById(\"viewport\");\n canvas.width = 1400;\n canvas.height = 700;\n const ctx = canvas.getContext(\"2d\");\n const game = new Game();\n new Viewport(game, ctx);\n const btn = document.getElementById(\"start\");\n const modal = document.getElementById(\"modal\");\n\n document.addEventListener('keydown', (e) => {\n if(e.keyCode === 32 && !game.playing){\n modal.style.display = \"none\";\n game.start();\n e.source.removeEventListener('keydown', arguments.callee);\n }\n });\n\n btn.onclick = function() {\n modal.style.display = \"none\";\n game.start();\n };\n});\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./lib/cytosis.js\n// module id = 3\n// module chunks = 0","class Player {\n constructor() {\n this.pos = [250, 250];\n this.color = '#000000';\n this.radius = 18.0;\n this.collidable = false;\n this.dead = false;\n this.image = new Image();\n this.image.src = \"./assets/green.png\";\n this.shouldDraw = true;\n\n\n this.blinking();\n setTimeout(() => {\n this.collidable = true;\n this.color = '#000000';\n }, 2000);\n }\n\n blinking() {\n let startTime = new Date().getTime();\n let interval = setInterval(() => {\n if(new Date().getTime() - startTime > 2000){\n this.shouldDraw = true;\n clearInterval(interval);\n return;\n }\n this.shouldDraw = !this.shouldDraw;\n }, 250);\n }\n\n handleInput() {\n if(window.input.isDown('DOWN') && window.input.isDown('RIGHT')){\n this.pos[0] += 1.7;\n this.pos[1] += 1.7;\n } else if(window.input.isDown('DOWN') && window.input.isDown('LEFT')){\n this.pos[1] += 1.7;\n this.pos[0] -= 1.7;\n } else if(window.input.isDown('UP') && window.input.isDown('LEFT')){\n this.pos[1] -= 1.7;\n this.pos[0] -= 1.7;\n } else if(window.input.isDown('UP') && window.input.isDown('RIGHT')){\n this.pos[1] -= 1.7;\n this.pos[0] += 1.7;\n } else if(window.input.isDown('DOWN')){\n this.pos[1] += 1.7;\n } else if(window.input.isDown('UP')){\n this.pos[1] -= 1.7;\n } else if(window.input.isDown('LEFT')){\n this.pos[0] -= 1.7;\n } else if(window.input.isDown('RIGHT')){\n this.pos[0] += 1.7;\n }\n\n this.wrap();\n }\n\n wrap(){\n if(this.pos[0] < -30){\n this.pos[0] = 1430;\n } else if(this.pos[0] > 1430) {\n this.pos[0] = -30;\n } else if(this.pos[1] < -30){\n this.pos[1] = 730;\n } else if(this.pos[1] > 730){\n this.pos[1] = -30;\n }\n }\n\n handleCollision(circle){\n if(this.collidable){\n if(this.radius >= circle.radius){\n this.radius += (circle.radius * .20);\n circle.radius = 0;\n } else {\n this.radius = 0;\n this.dead = true;\n }\n }\n }\n\n draw(ctx) {\n if(this.shouldDraw){\n ctx.drawImage(this.image, this.pos[0]-this.radius, this.pos[1]-this.radius, this.radius*2, this.radius*2);\n }\n }\n}\n\nexport default Player;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./lib/player.js\n// module id = 4\n// module chunks = 0","const dist = (pos1, pos2) => {\n return Math.sqrt(\n Math.pow(pos1[0] - pos2[0], 2) + Math.pow(pos1[1] - pos2[1], 2)\n );\n};\n\nexport default dist;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./util/dist.js\n// module id = 5\n// module chunks = 0","const registerEventListeners = () => {\n let pressedKeys = {};\n\n const setKey = (event, status) => {\n let code = event.keyCode;\n let key;\n\n switch(code){\n case 65, 37:\n key = 'LEFT';\n break;\n case 87, 38:\n key = 'UP';\n break;\n case 68, 39:\n key = 'RIGHT';\n break;\n case 83, 40:\n key = 'DOWN';\n break;\n default:\n break;\n }\n\n pressedKeys[key] = status;\n };\n\n document.addEventListener('keydown', (e) => {\n setKey(e, true);\n });\n document.addEventListener('keyup', (e) => {\n setKey(e, false);\n });\n window.addEventListener('blur', () => {\n pressedKeys = {};\n });\n window.input = {\n isDown: (key) => { return pressedKeys[key];}\n };\n};\n\nexport default registerEventListeners;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./util/input.js\n// module id = 6\n// module chunks = 0"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["webpack:///webpack/bootstrap 74dad7ac6509ab9a0a7e","webpack:///./lib/game.js","webpack:///./lib/viewport.js","webpack:///./lib/circle.js","webpack:///./lib/cytosis.js","webpack:///./lib/player.js","webpack:///./util/dist.js","webpack:///./util/input.js"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA,mDAA2C,cAAc;;AAEzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA;;;;;;;;;;AChEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,kBAAkB,QAAQ;AAC1B;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,oCAAoC,oCAAoC;AACxE;;AAEA;AACA;AACA;AACA;AACA;;AAEA,6DAA6D,WAAW;AACxE;AACA,+CAA+C,WAAW;;AAE1D;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA,KAAK;AACL;AACA;;;AAGA;;;;;;;;;AChIA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;;;;;;;;AC7BA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;;AAEL;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA,KAAK;AACL;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;;;;;;;;;;;ACjGA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,GAAG;;AAEH;AACA;AACA;AACA;AACA,CAAC;;;;;;;;AC3BD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA,KAAK;AACL;AACA;AACA,KAAK;AACL;AACA;AACA,KAAK;AACL;AACA,KAAK;AACL;AACA,KAAK;AACL;AACA,KAAK;AACL;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA,KAAK;AACL;AACA,KAAK;AACL;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;;;;;ACxFA;AACA;AACA;AACA;AACA;;AAEA;;;;;;;;ACNA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA,GAAG;AACH;AACA;AACA,GAAG;AACH;AACA;AACA,GAAG;AACH;AACA,sBAAsB;AACtB;AACA;;AAEA","file":"./lib/bundle.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// identity function for calling harmony imports with the correct context\n \t__webpack_require__.i = function(value) { return value; };\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 3);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 74dad7ac6509ab9a0a7e","import Circle from './circle';\nimport Player from './player';\nclass Game {\n constructor(){\n this.circles = [];\n this.player = new Player();\n this.playing = false;\n this.paused = false;\n this.sizeModifier = 1.0;\n this.maxRadius = 40;\n this.score = 0;\n this.gameOver = false;\n this.generateCircles();\n this.modal = document.getElementById(\"end-modal\");\n this.restartBtn = document.getElementById(\"restart\");\n this.restartBtn.addEventListener(\"click\", () => this.restart());\n window.addEventListener('keydown', (e) => {\n if(e.keyCode === 32){\n this.restart();\n }\n });\n }\n\n unpause(){\n this.paused = false;\n this.interval = setInterval(() => {\n this.circles.push(new Circle(false, (this.player.radius*this.sizeModifier)));\n }, 1500);\n }\n\n pause(){\n this.paused = true;\n clearInterval(this.interval);\n }\n\n start(){\n this.playing = true;\n this.player = new Player();\n this.interval =\n setInterval(() => {\n this.circles.push(new Circle(false, (this.player.radius*this.sizeModifier)));\n }, 1500);\n }\n\n restart() {\n clearInterval(this.interval);\n this.circles = [];\n this.modal.style.display = \"none\";\n this.player = new Player();\n this.generateCircles();\n this.sizeModifier = 1.0;\n this.maxRadius = 40;\n this.score = 0;\n this.gameOver = false;\n this.start();\n }\n\n generateCircles() {\n for(let i = 0; i < 27; i++){\n let circle = new Circle(true, this.player.radius);\n this.circles.push(circle);\n }\n }\n\n draw(ctx) {\n\n if(this.player.radius > this.maxRadius){\n this.sizeModifier *= 0.75;\n this.maxRadius *= 1.3;\n this.shrink();\n }\n ctx.clearRect(0, 0, 1400, 700);\n this.player.draw(ctx);\n ctx.beginPath();\n this.circles.forEach(circle => {\n circle.draw(ctx);\n });\n ctx.font = \"24pt Serif\";\n ctx.fillStyle = \"#49E5FE\";\n if(!this.gameOver){\n ctx.fillText(\"Score: \"+this.score, 8, 25);\n }\n this.moveCircles();\n }\n\n shrink() {\n this.player.radius *= this.sizeModifier;\n this.circles.forEach(circle => {circle.radius *= this.sizeModifier;});\n }\n\n setGameOver() {\n clearInterval(this.interval);\n this.circles = [];\n this.gameOver = true;\n this.modal.style.display = \"block\";\n\n const score = document.createTextNode(`Your score was: ${this.score}`);\n const scoreText = document.getElementById(\"score\");\n scoreText.textContent = `Your score was: ${this.score}`;\n\n }\n\n moveCircles() {\n this.player.handleInput();\n this.circles.forEach(circle => {\n circle.move();\n });\n if(this.playing){\n this.checkCollisions();\n }\n }\n\n checkCollisions() {\n this.circles.forEach(circle => {\n if(circle.collidesWith(this.player) && circle.collidable){\n let circleRadius = circle.radius;\n this.player.handleCollision(circle);\n if (this.player.dead){\n this.setGameOver();\n } else if(this.player.collidable) {\n this.score += Math.round((circleRadius / this.sizeModifier));\n }\n }\n });\n }\n}\n\n\nexport default Game;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./lib/game.js\n// module id = 0\n// module chunks = 0","import registerEventListeners from '../util/input';\n\nclass Viewport {\n constructor(game, ctx){\n this.game = game;\n this.ctx = ctx;\n this.start();\n this.paused = false;\n }\n\n start() {\n registerEventListeners();\n this.lastTime = 0;\n\n requestAnimationFrame(this.animate.bind(this));\n }\n\n animate(time) {\n const dt = time - this.lastTime;\n if(!this.paused){\n this.game.moveCircles();\n this.game.draw(this.ctx);\n this.lastTime = time;\n }\n requestAnimationFrame(this.animate.bind(this));\n }\n\n}\n\nexport default Viewport;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./lib/viewport.js\n// module id = 1\n// module chunks = 0","import dist from '../util/dist';\n\n\nclass MovingObject {\n constructor(start, playerRadius) {\n this.img1 = new Image();\n this.img1.src = \"./assets/brown.png\";\n this.img2 = new Image();\n this.img2.src = \"./assets/black.png\";\n this.img3 = new Image();\n this.img3.src = \"./assets/yellow.png\";\n this.IMAGES = [\n this.img1,\n this.img2,\n this.img3\n ];\n this.playerRadius = playerRadius;\n this.pos = this.generateRandomPosition();\n this.vel = this.generateRandomVelocity();\n this.radius = this.generateRandomRadius(playerRadius);\n this.image = this.IMAGES[Math.floor(Math.random()*this.IMAGES.length)];\n this.shouldDraw = true;\n this.collidable = false;\n if(!start){\n this.blinking();\n }\n setTimeout(() => {\n this.collidable = true;\n }, 2000);\n\n }\n\n blinking() {\n let startTime = new Date().getTime();\n let interval = setInterval(() => {\n if(new Date().getTime() - startTime > 2000){\n this.shouldDraw = true;\n clearInterval(interval);\n return;\n }\n this.shouldDraw = !this.shouldDraw;\n }, 250);\n }\n\n generateRandomRadius() {\n return Math.floor(Math.random() * ((this.playerRadius*5) - this.playerRadius/3)) + this.playerRadius/3;\n }\n\n generateRandomVelocity() {\n let randX = Math.floor(Math.random() * (2.4 - 0)) + 0;\n let randY = Math.floor(Math.random() * (2.4 - 0)) + 0;\n return [randX, randY];\n }\n\n generateRandomPosition() {\n let randX = Math.floor(Math.random() * (1400 - 0)) + 0;\n let randY = Math.floor(Math.random() * (1400 - 0)) + 0;\n return [randX, randY];\n }\n\n collidesWith(player) {\n const centerDist = dist(this.pos, player.pos);\n return centerDist < (this.radius + player.radius);\n }\n\n draw(ctx) {\n if(this.shouldDraw){\n ctx.drawImage(this.image, this.pos[0]-this.radius, this.pos[1]-this.radius, this.radius*2, this.radius*2);\n }\n }\n\n outOfBounds(pos){\n return (pos[0] < 0 || pos[0] > 1400 ||\n pos[1] < 0 || pos[1] > 700);\n }\n\n move() {\n this.pos = [this.pos[0] + this.vel[0], this.pos[1] + this.vel[1]];\n\n if(this.outOfBounds(this.pos)){\n this.wrap();\n }\n }\n\n wrap(){\n if(this.pos[0] < -30){\n this.pos[0] = 1430;\n } else if(this.pos[0] > 1430) {\n this.pos[0] = -30;\n } else if(this.pos[1] < -30){\n this.pos[1] = 730;\n } else if(this.pos[1] > 730){\n this.pos[1] = -30;\n }\n }\n}\n\nexport default MovingObject;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./lib/circle.js\n// module id = 2\n// module chunks = 0","import Game from './game';\nimport Viewport from './viewport';\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n const canvas = document.getElementById(\"viewport\");\n canvas.width = 1400;\n canvas.height = 700;\n const ctx = canvas.getContext(\"2d\");\n const game = new Game();\n const viewPort = new Viewport(game, ctx);\n const btn = document.getElementById(\"start\");\n const modal = document.getElementById(\"modal\");\n\n document.addEventListener('keydown', (e) => {\n if(e.keyCode === 32 && !game.playing){\n modal.style.display = \"none\";\n game.start();\n } else if(e.keyCode === 13){\n viewPort.paused = !viewPort.paused;\n game.paused ? game.unpause() : game.pause();\n }\n });\n\n btn.onclick = function() {\n modal.style.display = \"none\";\n game.start();\n };\n});\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./lib/cytosis.js\n// module id = 3\n// module chunks = 0","class Player {\n constructor() {\n this.pos = [250, 250];\n this.color = '#000000';\n this.radius = 18.0;\n this.collidable = false;\n this.dead = false;\n this.image = new Image();\n this.image.src = \"./assets/green.png\";\n this.shouldDraw = true;\n\n\n this.blinking();\n setTimeout(() => {\n this.collidable = true;\n this.color = '#000000';\n }, 2000);\n }\n\n blinking() {\n let startTime = new Date().getTime();\n let interval = setInterval(() => {\n if(new Date().getTime() - startTime > 2000){\n this.shouldDraw = true;\n clearInterval(interval);\n return;\n }\n this.shouldDraw = !this.shouldDraw;\n }, 250);\n }\n\n handleInput() {\n if(window.input.isDown('DOWN') && window.input.isDown('RIGHT')){\n this.pos[0] += 1.7;\n this.pos[1] += 1.7;\n } else if(window.input.isDown('DOWN') && window.input.isDown('LEFT')){\n this.pos[1] += 1.7;\n this.pos[0] -= 1.7;\n } else if(window.input.isDown('UP') && window.input.isDown('LEFT')){\n this.pos[1] -= 1.7;\n this.pos[0] -= 1.7;\n } else if(window.input.isDown('UP') && window.input.isDown('RIGHT')){\n this.pos[1] -= 1.7;\n this.pos[0] += 1.7;\n } else if(window.input.isDown('DOWN')){\n this.pos[1] += 1.7;\n } else if(window.input.isDown('UP')){\n this.pos[1] -= 1.7;\n } else if(window.input.isDown('LEFT')){\n this.pos[0] -= 1.7;\n } else if(window.input.isDown('RIGHT')){\n this.pos[0] += 1.7;\n }\n\n this.wrap();\n }\n\n wrap(){\n if(this.pos[0] < -30){\n this.pos[0] = 1430;\n } else if(this.pos[0] > 1430) {\n this.pos[0] = -30;\n } else if(this.pos[1] < -30){\n this.pos[1] = 730;\n } else if(this.pos[1] > 730){\n this.pos[1] = -30;\n }\n }\n\n handleCollision(circle){\n if(this.collidable){\n if(this.radius >= circle.radius){\n this.radius += (circle.radius * .20);\n circle.radius = 0;\n } else {\n this.radius = 0;\n this.dead = true;\n }\n }\n }\n\n draw(ctx) {\n if(this.shouldDraw){\n ctx.drawImage(this.image, this.pos[0]-this.radius, this.pos[1]-this.radius, this.radius*2, this.radius*2);\n }\n }\n}\n\nexport default Player;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./lib/player.js\n// module id = 4\n// module chunks = 0","const dist = (pos1, pos2) => {\n return Math.sqrt(\n Math.pow(pos1[0] - pos2[0], 2) + Math.pow(pos1[1] - pos2[1], 2)\n );\n};\n\nexport default dist;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./util/dist.js\n// module id = 5\n// module chunks = 0","const registerEventListeners = () => {\n let pressedKeys = {};\n\n const setKey = (event, status) => {\n let code = event.keyCode;\n let key;\n\n switch(code){\n case 65, 37:\n key = 'LEFT';\n break;\n case 87, 38:\n key = 'UP';\n break;\n case 68, 39:\n key = 'RIGHT';\n break;\n case 83, 40:\n key = 'DOWN';\n break;\n default:\n break;\n }\n\n pressedKeys[key] = status;\n };\n\n document.addEventListener('keydown', (e) => {\n setKey(e, true);\n });\n document.addEventListener('keyup', (e) => {\n setKey(e, false);\n });\n window.addEventListener('blur', () => {\n pressedKeys = {};\n });\n window.input = {\n isDown: (key) => { return pressedKeys[key];}\n };\n};\n\nexport default registerEventListeners;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./util/input.js\n// module id = 6\n// module chunks = 0"],"sourceRoot":""} \ No newline at end of file diff --git a/lib/cytosis.js b/lib/cytosis.js index de83bb9..671dec5 100644 --- a/lib/cytosis.js +++ b/lib/cytosis.js @@ -7,7 +7,7 @@ document.addEventListener("DOMContentLoaded", () => { canvas.height = 700; const ctx = canvas.getContext("2d"); const game = new Game(); - new Viewport(game, ctx); + const viewPort = new Viewport(game, ctx); const btn = document.getElementById("start"); const modal = document.getElementById("modal"); @@ -15,7 +15,9 @@ document.addEventListener("DOMContentLoaded", () => { if(e.keyCode === 32 && !game.playing){ modal.style.display = "none"; game.start(); - e.source.removeEventListener('keydown', arguments.callee); + } else if(e.keyCode === 13){ + viewPort.paused = !viewPort.paused; + game.paused ? game.unpause() : game.pause(); } }); diff --git a/lib/game.js b/lib/game.js index e22ea1f..a478bcf 100644 --- a/lib/game.js +++ b/lib/game.js @@ -5,11 +5,12 @@ class Game { this.circles = []; this.player = new Player(); this.playing = false; - this.generateCircles(); + this.paused = false; this.sizeModifier = 1.0; this.maxRadius = 40; this.score = 0; this.gameOver = false; + this.generateCircles(); this.modal = document.getElementById("end-modal"); this.restartBtn = document.getElementById("restart"); this.restartBtn.addEventListener("click", () => this.restart()); @@ -20,11 +21,25 @@ class Game { }); } + unpause(){ + this.paused = false; + this.interval = setInterval(() => { + this.circles.push(new Circle(false, (this.player.radius*this.sizeModifier))); + }, 1500); + } + + pause(){ + this.paused = true; + clearInterval(this.interval); + } + start(){ this.playing = true; this.player = new Player(); this.interval = - setInterval(() => this.circles.push(new Circle(false, (this.player.radius*this.sizeModifier))), 1500); + setInterval(() => { + this.circles.push(new Circle(false, (this.player.radius*this.sizeModifier))); + }, 1500); } restart() { diff --git a/lib/viewport.js b/lib/viewport.js index e28093e..a32750a 100644 --- a/lib/viewport.js +++ b/lib/viewport.js @@ -5,6 +5,7 @@ class Viewport { this.game = game; this.ctx = ctx; this.start(); + this.paused = false; } start() { @@ -15,14 +16,13 @@ class Viewport { } animate(time) { - const dt = time - this.lastTime; - + if(!this.paused){ this.game.moveCircles(); this.game.draw(this.ctx); this.lastTime = time; - requestAnimationFrame(this.animate.bind(this)); - + } + requestAnimationFrame(this.animate.bind(this)); } }