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

add SNES_WIDTH and SNES_HEIGHT constants

Browse Source
This commit is contained in:
Colin McMillen 2019-09-25 10:40:10 -04:00
parent 0ebdf6f47f
commit d06c5a49c4
2 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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.x = (SNES_WIDTH - 26) / 2;
this.y = (224 - 36) / 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) { if (this.x > SNES_WIDTH - 21) {
this.x = 256 - 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) { if (this.y > SNES_HEIGHT - 36) {
this.y = 224 - 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.width = '' + SNES_WIDTH * scale + 'px';
canvas.style.height = '' + snesHeight * scale + 'px'; canvas.style.height = '' + SNES_HEIGHT * scale + 'px';
debug('set scale to ' + scale + 'x');
canvas.style.display = ''; canvas.style.display = '';
debug('set scale to ' + scale + 'x');
} }
function setAutoCanvasScale() { function setAutoCanvasScale() {
const snesWidth = 256; const widthAspect = Math.floor(window.innerWidth / SNES_WIDTH);
const snesHeight = 224; const heightAspect = Math.floor(window.innerHeight / SNES_HEIGHT);
const widthAspect = Math.floor(window.innerWidth / snesWidth);
const heightAspect = Math.floor(window.innerHeight / snesHeight);
const scale = Math.min(widthAspect, heightAspect) const scale = Math.min(widthAspect, heightAspect)
setCanvasScale(scale); setCanvasScale(scale);
} }