diff --git a/scripts/game/BG_Anxiety.js b/scripts/game/BG_Anxiety.js index e88f310..161098c 100644 --- a/scripts/game/BG_Anxiety.js +++ b/scripts/game/BG_Anxiety.js @@ -62,61 +62,56 @@ function BG_Anxiety(whiteMode){ } }; + self.isBoxOutOfSight = function(box){ - if(box.x<-box.w) return true; - if(box.y<-box.h) return true; - if(box.x>BG_WIDTH) return true; - if(box.y>BG_HEIGHT) return true; + if(box.x < -box.w) return true; + if(box.y < -box.h) return true; + if(box.x > BG_WIDTH) return true; + if(box.y > BG_HEIGHT) return true; return false; }; + self.updateBox = function(box, delta){ - // Move it - box.x += box.velX * delta/(1/60); - box.y += box.velY * delta/(1/60); + const speedMultiplier = 60; + box.x += box.velX * delta * speedMultiplier; + box.y += box.velY * delta * speedMultiplier; // If it's out of sight, reset it - if(self.isBoxOutOfSight(box)){ - self.resetBox(box); - } - + if(self.isBoxOutOfSight(box)) self.resetBox(box); }; + + var boxLayerAlpha = 1; + self.updateAlpha = function(alpha){ + boxLayerAlpha = alpha; + }; + + self.update = function(delta){ + for(const box of self.boxes) self.updateBox(box, delta); + }; + self.drawBox = function(box, ctx){ - ctx.fillStyle = self.whiteMode ? "rgba(255,255,255,0.1)" : "rgba(255,255,255,0.03)"; + ctx.globalAlpha = boxLayerAlpha * self.whiteMode ? 0.1 : 0.03; + ctx.fillStyle = "#fff"; ctx.fillRect(box.x, box.y, box.w, box.h); }; - for(var i=0; i<40; i++){ - var box = {}; - self.resetBox(box, true); - self.boxes.push(box); - } - var allBoxAlpha = 1; - self.updateAlpha = function(alpha){ - allBoxAlpha = alpha; - }; - self.update = function(delta){ - self.boxes.forEach(function(box){ - self.updateBox(box, delta); - }); - }; self.draw = function(ctx){ // A big ol' black box ctx.fillStyle = self.whiteMode ? "#dddddd" : "#111111"; ctx.fillRect(0,0, BG_WIDTH, BG_HEIGHT); - // All-box alpha - // allBoxAlpha += 1/30; - // if(allBoxAlpha>1) allBoxAlpha=1; - // Moving white boxes - ctx.globalAlpha = allBoxAlpha; - self.boxes.forEach(function(box){ - self.drawBox(box, ctx); - }); + for(const box of self.boxes) self.drawBox(box, ctx); ctx.globalAlpha = 1; }; + for(var i=0; i<40; i++){ + var box = {}; + self.resetBox(box, true); + self.boxes.push(box); + } + } \ No newline at end of file diff --git a/scripts/game/Game.js b/scripts/game/Game.js index b093d14..91a7a41 100644 --- a/scripts/game/Game.js +++ b/scripts/game/Game.js @@ -96,35 +96,33 @@ Game.start = function(){ window._ = {}; // global var, reset }; -var LAST_TIME = (new Date()).getTime(); +var last_frame = Date.now(); Game.update = function(){ // TIME - var NOW = (new Date()).getTime(); - var DELTA = (NOW - LAST_TIME)/1000; - DELTA = Math.min(DELTA, 1/20); // no slower than 20fps - LAST_TIME = NOW; + const now = Date.now(); + const delta = (now - last_frame) / 1000; + last_frame = now; + + // Removing this till I can see why it's needed... + // Reshaping the passing of time will come back to haunt you! [Spacie] + // DELTA = Math.min(DELTA, 1/20); // no slower than 20fps if(!Game.paused){ // Timeout callbacks... - for(var i=0; i { + tc.timeLeft -= 1000 * delta; + if(tc.timeLeft <= 0) tc.callback(); + }); + Game.timeoutCallbacks = Game.timeoutCallbacks.filter(tc => tc.timeLeft > 0); // The interface Game.updateText(); - Game.updateCanvas(DELTA); + Game.updateCanvas(delta); // Ayyy publish("update"); - } // Options update @@ -310,8 +308,8 @@ Game.immediatePromise = function(){ Game.FORCE_TEXT_Y = -1; Game.WORDS_HEIGHT_BOTTOM = -1; (function(){ - var wordsObserver = new TickableObserver(function(){ - var offset = 80 + const wordsObserver = new TickableObserver(() => { + const offset = 80 if(Game.WORDS_HEIGHT_BOTTOM < 0) Game.WORDS_HEIGHT_BOTTOM = 250; let advanceTextPosition = 0 @@ -337,10 +335,11 @@ Game.WORDS_HEIGHT_BOTTOM = -1; }); // The words UI depends on these things: - wordsObserver.watch(function(){ return Game.FORCE_TEXT_Y }); - wordsObserver.watch(function(){ return Game.WORDS_HEIGHT_BOTTOM }); - wordsObserver.watch(function(){ return Game.wordsDOM.children.length }); - Game.updateText = function() { wordsObserver.tick() }; + wordsObserver.watch(() => Game.FORCE_TEXT_Y); + wordsObserver.watch(() => Game.WORDS_HEIGHT_BOTTOM); + wordsObserver.watch(() => Game.wordsDOM.children.length); + Game.updateText = () => wordsObserver.tick(); + })() // CLEAR TEXT @@ -1055,7 +1054,16 @@ Game.resetScene = function(){ Game.resetScene(); // Update & draw all the kids! -Game.updateCanvas = function(DELTA){ +Game.updateCanvas = function(delta){ + + // UPDATING: + // ------------------------------------------------------------- + for(const child of Game.scene.children) { + if(child.update) child.update(delta); + } + + // RENDERING: + // ------------------------------------------------------------- // For retina var ctx = Game.context; @@ -1063,12 +1071,9 @@ Game.updateCanvas = function(DELTA){ ctx.scale(2, 2); // Update/Draw all kids - Game.scene.children.forEach(function(child){ - if(child.update) child.update(DELTA); - }); - Game.scene.children.forEach(function(child){ - child.draw(ctx, DELTA); - }); + + for(const child of Game.scene.children) child.draw(ctx, delta); + // Restore ctx.scale(0.5, 0.5); diff --git a/styles/game.css b/styles/game.css index ce544e4..5307dd7 100644 --- a/styles/game.css +++ b/styles/game.css @@ -56,7 +56,7 @@ MAIN GAME ******************************************************************************************************/ -.clear_transition { +.clear_transition, .clear_transition * { transition: none !important; }