started working on canvas related improvements

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.x < -box.w) return true;
-		if(box.y<-box.h) return true;
+		if(box.y < -box.h) return true;
-		if(box.x>BG_WIDTH) return true;
+		if(box.x > BG_WIDTH) return true;
-		if(box.y>BG_HEIGHT) 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);
+		const speedMultiplier = 60;
-		box.y += box.velY * delta/(1/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)){
+		if(self.isBoxOutOfSight(box)) self.resetBox(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;
+		for(const box of self.boxes) self.drawBox(box, ctx);
-		self.boxes.forEach(function(box){
-			self.drawBox(box, ctx);
-		});
 		ctx.globalAlpha = 1;
 
 	};
 
+	for(var i=0; i<40; i++){
+		var box = {};
+		self.resetBox(box, true);
+		self.boxes.push(box);
+	}
+
 }

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();
+	const now = Date.now();
-	var DELTA = (NOW - LAST_TIME)/1000;
+	const delta = (now - last_frame) / 1000;
-	DELTA = Math.min(DELTA, 1/20); // no slower than 20fps
+	last_frame = now;
-	LAST_TIME = 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<Game.timeoutCallbacks.length; i++){
+		Game.timeoutCallbacks.forEach(tc => {
-			var tc = Game.timeoutCallbacks[i];
+			tc.timeLeft -= 1000 * delta;
-			tc.timeLeft -= 1000*DELTA;
+			if(tc.timeLeft <= 0) tc.callback();
-			if(tc.timeLeft<=0){
+		});
-				tc.callback();
+		Game.timeoutCallbacks = Game.timeoutCallbacks.filter(tc => tc.timeLeft > 0);
-				Game.timeoutCallbacks.splice(i,1); // delete that one
-				i -= 1; // set index back one
-			}
-		}
 
 		// 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(){
+	const wordsObserver = new TickableObserver(() => {
-		var offset = 80
+		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(() => Game.FORCE_TEXT_Y);
-	wordsObserver.watch(function(){ return Game.WORDS_HEIGHT_BOTTOM });
+	wordsObserver.watch(() => Game.WORDS_HEIGHT_BOTTOM);
-	wordsObserver.watch(function(){ return Game.wordsDOM.children.length });
+	wordsObserver.watch(() => Game.wordsDOM.children.length);
-	Game.updateText = function() { wordsObserver.tick() };
+	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);
+	for(const child of Game.scene.children) child.draw(ctx, delta);
-	});
+
-	Game.scene.children.forEach(function(child){
-		child.draw(ctx, DELTA);
-	});
 
 	// Restore
 	ctx.scale(0.5, 0.5);

styles/game.css

@@ -56,7 +56,7 @@ MAIN GAME
 
 ******************************************************************************************************/
 
-.clear_transition {
+.clear_transition, .clear_transition * {
 	transition: none !important;
 }