🌱🚕 Checkpoint

./data.js:9517054/4340
./script.js:9517054/36643

data.js

@@ -89,4 +89,10 @@ export default {
   camera: [0, 0],   // camera position
   size: [0, 0],     // window/canvas size
   anim: [0, 0, 1],  // checkpoint animation details
+  
+  // performance
+  cache: {
+    background: null,
+    dirty: true,
+  }
 };

script.js

@@ -24,6 +24,8 @@ function die() {
 }
 
 function draw() {
+  if (!game.cache.dirty) return;
+
   requestAnimationFrame(draw); // to continuously animate
 
   const offx = game.camera[0] - game.size[0] / 2;
@@ -35,24 +37,7 @@ function draw() {
   const rect = (x, y, w, h) => ctx.fillRect(...point(x, y), w, h);
 
   // draw background
-  color("background");
-  ctx.fillRect(0, 0, game.size[0], game.size[1]);
-  color("dots");
-  for (let i = 0; i < 40; i++) {
-    for (let j = 0; j < 30; j++) {
-      const spacing = 60;
-      const depth = 0.5;
-      ctx.beginPath();
-      ctx.arc(
-        i * spacing - (offx % (spacing / depth)) * depth,
-        j * spacing - (offy % (spacing / depth)) * depth,
-        5,
-        0,
-        2 * Math.PI
-      );
-      ctx.fill();
-    }
-  }
+  background(60, 0.5);
 
   // draw checkpoint animation (if there is one)
   if (game.anim[2] < 1) {
@@ -67,7 +52,6 @@ function draw() {
     );
     ctx.fill();
     ctx.globalAlpha = 1;
-    game.anim[2] += 0.04;
   }
 
   // draw platforms
@@ -83,6 +67,42 @@ function draw() {
   // draw player
   color("player");
   rect(game.player.x, game.player.y, game.player.size, game.player.size);
+
+  game.cache.dirty = true;
+
+  // draw and cache background
+  function background(spacing, depth) {
+    const tilesize = 15;
+
+    // always use cached background if it exists
+    if (game.cache.background) {
+      for (let i = -1; i < 3; i++) {
+        for (let j = -1; j < 3; j++) {
+          ctx.putImageData(
+            game.cache.background,
+            i * spacing * tilesize - (offx % (spacing / depth)) * depth,
+            j * spacing * tilesize - (offy % (spacing / depth)) * depth
+          );
+        }
+      }
+      return;
+    }
+
+    // draw the background first time
+    color("background");
+    ctx.fillRect(0, 0, game.size[0], game.size[1]);
+    color("dots");
+
+    for (let i = 0; i < tilesize + 1; i++) {
+      for (let j = 0; j < tilesize + 1; j++) {
+        ctx.beginPath();
+        ctx.arc(i * spacing, j * spacing, 5, 0, 2 * Math.PI);
+        ctx.fill();
+      }
+    }
+
+    game.cache.background = ctx.getImageData(0, 0, game.size[0], game.size[1]);
+  }
 }
 
 function update() {
@@ -98,9 +118,14 @@ function update() {
   if (i.right) p.velx += speed;
 
   // update x position
-  if (move("x", p.velx, p.velx < 0 ? -1 : 1)) {
-    p.velx = 0;
-  }
+    for (let i = 0; i < Math.abs(p.velx) - 1; i++) {
+      p.x += p.velx < 0 ? -1 : 1;
+      const c = collision();
+      if (c) {
+        p.x -= p.velx < 0 ? -1 : 1;
+        p.velx = 0;
+      }
+    }
 
   // reset jump if they're falling or already jumping (there's a small grace period though)
   if (Math.abs(p.vely) > 3) p.canJump = false;
@@ -154,8 +179,13 @@ function update() {
   p.vely = Math.min(30, p.vely + 0.8);
 
   // update camera
-  c[0] = (c[0] * 9 + p.x) / 10;
-  c[1] = (c[1] * 9 + p.y) / 10;
+  const camx = (c[0] * 9 + p.x) / 10;
+  const camy = (c[1] * 9 + p.y) / 10;
+  if (c[0] !== camx || c[1] !== camy) game.cache.dirty = true;
+  c[0] = camx;
+  c[1] = camy;
+
+  if (game.anim[2] < 1) game.anim[2] += 0.04;
 
   // move, and return the platform the player collided with if any
   function move(key, amt, speed) {