mcmillen
/
snej
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add SNES_WIDTH and SNES_HEIGHT constants

main
Colin McMillen 5 years ago
parent
0ebdf6f47f
commit
d06c5a49c4
2 changed files with 18 additions and 16 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      index.html
  2. 30
      main.js

4
index.html
View File

@ -21,7 +21,9 @@
</style> </style>
</head> </head>
<body> <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> <canvas id="canvas" width="256" height="224" style="display: none"></canvas>
<div id="fps"></div> <div id="fps"></div>
<div id="debug"></div> <div id="debug"></div>

30
main.js
View File

@ -1,3 +1,6 @@
const SNES_WIDTH = 256;
const SNES_HEIGHT = 224;
const Orientation = { const Orientation = {
UP: 'up', UP: 'up',
DOWN: 'down', DOWN: 'down',
@ -309,9 +312,10 @@ class Resources {
} }
class Player { class Player {
// TODO: stop hard-coding player bounding box.
constructor() { 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; this.orientation = Orientation.DOWN;
} }
@ -326,8 +330,8 @@ class Player {
moveRight() { moveRight() {
this.orientation = Orientation.RIGHT; this.orientation = Orientation.RIGHT;
this.x += 2; 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() { moveDown() {
this.orientation = Orientation.DOWN; this.orientation = Orientation.DOWN;
this.y += 2; 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) { function setCanvasScale(scale) {
const snesWidth = 256;
const snesHeight = 224;
const canvas = document.getElementById('canvas'); 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 = ''; canvas.style.display = '';
debug('set scale to ' + scale + 'x');
} }
function setAutoCanvasScale() { 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) const scale = Math.min(widthAspect, heightAspect)
setCanvasScale(scale); setCanvasScale(scale);
} }

Write Preview
Loading…
Cancel
Save