add SNES_WIDTH and SNES_HEIGHT constants

5 years ago · d06c5a49c4
2 changed files with 18 additions and 16 deletions
--- a/index.html
+++ b/index.html
@ -21,7 +21,9 @@
    </style>
  </head>
  <body>
-    <!-- SNES resolution: 256x224. 4x scaled: 1024 x 896. -->
+    <!-- The canvas drawing resolution is the SNES resolution: 256x224.
+    JavaScript upscales the canvas (hopefully in a way that the browser
+    doesn't antialias it.) -->
    <canvas id="canvas" width="256" height="224" style="display: none"></canvas>
    <div id="fps"></div>
    <div id="debug"></div>
--- a/main.js
+++ b/main.js
@ -1,3 +1,6 @@
+const SNES_WIDTH = 256;
+const SNES_HEIGHT = 224;
+
 const Orientation = {
  UP: 'up',
  DOWN: 'down',
@ -309,9 +312,10 @@ class Resources {
 }

 class Player {
+  // TODO: stop hard-coding player bounding box.
  constructor() {
-    this.x = (256 - 26) / 2;
-    this.y = (224 - 36) / 2;
+    this.x = (SNES_WIDTH - 26) / 2;
+    this.y = (SNES_HEIGHT - 36) / 2;
    this.orientation = Orientation.DOWN;
  }

@ -326,8 +330,8 @@ class Player {
  moveRight() {
    this.orientation = Orientation.RIGHT;
    this.x += 2;
-    if (this.x > 256 - 21) {
-      this.x = 256 - 21;
+    if (this.x > SNES_WIDTH - 21) {
+      this.x = SNES_WIDTH - 21;
    }
  }

@ -342,8 +346,8 @@ class Player {
  moveDown() {
    this.orientation = Orientation.DOWN;
    this.y += 2;
-    if (this.y > 224 - 36) {
-      this.y = 224 - 36;
+    if (this.y > SNES_HEIGHT - 36) {
+      this.y = SNES_HEIGHT - 36;
    }
  }
 }
@ -479,20 +483,16 @@ function loop(world, gfx) {
 }

 function setCanvasScale(scale) {
-  const snesWidth = 256;
-  const snesHeight = 224;
  const canvas = document.getElementById('canvas');
-  canvas.style.width = '' + snesWidth * scale + 'px';
-  canvas.style.height = '' + snesHeight * scale + 'px';
-  debug('set scale to ' + scale + 'x');
+  canvas.style.width = '' + SNES_WIDTH * scale + 'px';
+  canvas.style.height = '' + SNES_HEIGHT * scale + 'px';
  canvas.style.display = '';
+  debug('set scale to ' + scale + 'x');
 }

 function setAutoCanvasScale() {
-  const snesWidth = 256;
-  const snesHeight = 224;
-  const widthAspect = Math.floor(window.innerWidth / snesWidth);
-  const heightAspect = Math.floor(window.innerHeight / snesHeight);
+  const widthAspect = Math.floor(window.innerWidth / SNES_WIDTH);
+  const heightAspect = Math.floor(window.innerHeight / SNES_HEIGHT);
  const scale = Math.min(widthAspect, heightAspect)
  setCanvasScale(scale);
 }