🦄⛑ Checkpoint

./script.js:9517054/16273

renderer.js

@@ -1,38 +0,0 @@
-export default class {
-  constructor(canvas) {
-    this.canvas = canvas;
-    this.ctx = canvas.getContext("2d");
-    this.size = [0, 0];
-    this.camera = [0, 0];
-    this.zoom = 1;
-  }
-
-  clear() {
-    this.ctx.clearRect(0, 0, this.size[0], this.size[1]);
-  }
-
-  resize(w, h) {
-    const { canvas, ctx } = this;
-    canvas.width = w;
-    canvas.height = h;
-    ctx.width = w;
-    ctx.height = h;
-    this.size = [w, h];
-  }
-
-  rect(x, y, w, h) {
-    const { size, camera, zoom } = this;
-    const offx = camera[0] - size[0] / 2;
-    const offy = camera[1] - size[1] / 2;
-    if (x - offx > size[0]) return;
-    if (y - offy > size[1]) return;
-    if (x - offx + w < 0) return;
-    if (y - offy + h < 0) return;
-    this.ctx.fillRect(x - offx, y - offy, w, h);
-  }
-
-  color(c) {
-    if (!c) this.ctx.fillStyle;
-    this.ctx.fillStyle = c;
-  }
-}

script.js

@@ -1,51 +1,54 @@
 import game from "/data.js";
-import Renderer from "/renderer.js";
 
-const renderer = new Renderer(document.getElementById("canvas"));
+// import elements from html
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+
+const render = {
+  camera: [0, 0],
+  size: [0, 0],
+};
 
 function resize() {
-  renderer.resize(window.innerWidth, window.innerHeight);
+  const w = window.innerWidth;
+  const h = window.innerHeight;
+  canvas.width = w;
+  canvas.height = h;
+  ctx.width = w;
+  ctx.height = h;
+  render.size = [w, h];
 }
 
 function draw() {
-  const offx = renderer.camera[0] - renderer.size[0] / 2;
-  const offy = renderer.camera[1] - renderer.size[1] / 2;
+  const offx = render.camera[0] - render.size[0] / 2;
+  const offy = render.camera[1] - render.size[1] / 2;
   const c = game.color;
-  const ctx = renderer.ctx;
 
-  
   const point = (x, y) => [x - offx, y - offy];
-  const color = which => ctx.fillStyle = game.color[which];
-  const rect => (x, y, w, h) {
-    ctx.fillRect(...point(x, y), w, h);
-  }
-  
+  const color = (which) => (ctx.fillStyle = game.color[which]);
+  const rect = (x, y, w, h) => ctx.fillRect(...point(x, y), w, h);
+
   // draw background
   color("background");
-  renderer.clear();
+  ctx.fillRect(0, 0, render.size[0], render.size[1]);
   dots();
 
   // draw platforms
   for (let part of game.parts) {
     color("shadow");
     for (let i = 6; i > 0; i--) {
-      renderer.rect(part[0] + i, part[1] + i, part[2], part[3]);
+      rect(part[0] + i, part[1] + i, part[2], part[3]);
     }
     color(part[4] || "platforms");
-    renderer.rect(part[0], part[1], part[2], part[3]);
+    rect(part[0], part[1], part[2], part[3]);
   }
 
   // draw player
   color("player");
-  renderer.rect(
-    game.player.x,
-    game.player.y,
-    game.player.size,
-    game.player.size
-  );
+  rect(game.player.x, game.player.y, game.player.size, game.player.size);
 
   function dots() {
-    renderer.color(c.dots);
+    color("dots");
 
     for (let i = 0; i < 40; i++) {
       for (let j = 0; j < 30; j++) {
@@ -63,23 +66,11 @@ function draw() {
       }
     }
   }
-
-  function point(x, y) {
-    return [x - offx, y - offy];
-  }
-
-  function color(which) {
-    ctx.fillStyle = game.color[which];
-  }
-  
-  function rect(x, y, w, h) {
-    ctx.fillRect(...point(x, y), w, h);
-  }
 }
 
 function update() {
   const p = game.player;
-  const c = renderer.camera;
+  const c = render.camera;
 
   // handle input
   const i = game.input;
@@ -105,7 +96,6 @@ function update() {
     game.player.y = 0;
     game.player.velx = 0;
     game.player.vely = 0;
-    // todo: wraparound?
   }
 
   // update velocity