From 2a41dbf685f94222643f0525c3aa02e92162ceb1 Mon Sep 17 00:00:00 2001 From: David Janas Date: Mon, 8 May 2017 17:51:02 -0400 Subject: [PATCH] add extra instructions to start modal --- index.html | 3 ++- lib/bundle.js | 8 ++++---- lib/bundle.js.map | 2 +- lib/player.js | 2 +- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 7c2a9cb..b9ad48d 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + Cytosis @@ -17,6 +17,7 @@

Welcome to Cytosis!

diff --git a/lib/bundle.js b/lib/bundle.js index 90be6c1..0b3dc2a 100644 --- a/lib/bundle.js +++ b/lib/bundle.js @@ -130,7 +130,7 @@ class Game { circle.draw(ctx); }); ctx.font = "24pt Serif"; - ctx.fillStyle = "#49E5FE"; + ctx.fillStyle = "#000000"; if(!this.gameOver){ ctx.fillText("Score: "+this.score, 8, 25); } @@ -213,7 +213,7 @@ class Viewport { this.game.draw(this.ctx); this.lastTime = time; requestAnimationFrame(this.animate.bind(this)); - + } } @@ -365,7 +365,7 @@ class Player { constructor() { this.pos = [250, 250]; this.color = '#000000'; - this.radius = 15.0; + this.radius = 18.0; this.collidable = false; this.dead = false; this.image = new Image(); @@ -517,4 +517,4 @@ const registerEventListeners = () => { /***/ }) /******/ ]); -//# sourceMappingURL=bundle.js.map +//# sourceMappingURL=bundle.js.map \ No newline at end of file diff --git a/lib/bundle.js.map b/lib/bundle.js.map index 8e68f3f..393de4e 100644 --- a/lib/bundle.js.map +++ b/lib/bundle.js.map @@ -1 +1 @@ -{"version":3,"sources":["webpack:///webpack/bootstrap 09dc761653dfc086088c","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;AACA;AACA;AACA,KAAK;;AAEL;;AAEA;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;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;;;;;;;;;AC3GA;;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;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;;;;;;;AClBD;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 09dc761653dfc086088c","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\", () => {\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 }\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 generateCircles() {\n for(let i = 0; i < 30; 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 // ctx.fillStyle = \"#f7f6f2\";\n // ctx.fillRect(0, 0, 1000, 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 = \"#000000\";\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\n\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 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 = 15.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 2cc093a5c1febf0e2e6b","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;AACA;AACA;AACA,KAAK;;AAEL;;AAEA;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;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;;;;;;;;;AC3GA;;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;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;;;;;;;AClBD;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 2cc093a5c1febf0e2e6b","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\", () => {\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 }\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 generateCircles() {\n for(let i = 0; i < 30; 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 // ctx.fillStyle = \"#f7f6f2\";\n // ctx.fillRect(0, 0, 1000, 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 = \"#000000\";\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\n\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 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/player.js b/lib/player.js index df0bbf1..60824a7 100644 --- a/lib/player.js +++ b/lib/player.js @@ -2,7 +2,7 @@ class Player { constructor() { this.pos = [250, 250]; this.color = '#000000'; - this.radius = 15.0; + this.radius = 18.0; this.collidable = false; this.dead = false; this.image = new Image();