diff --git a/css/game.css b/css/game.css index 7dced92..a53e89b 100644 --- a/css/game.css +++ b/css/game.css @@ -2,13 +2,19 @@ html, body, ul, li { margin: 0; border: 0; padding: 0; + background-color: black; } canvas { display: block; - width: 762; + width: calc(100vh * 1.0666666666666667); + height: 100vh; margin: 0 auto; background-color: blue; + image-rendering: -moz-crisp-edges; + image-rendering: -webkit-crisp-edges; + image-rendering: pixelated; + image-rendering: crisp-edges; } p { @@ -26,6 +32,8 @@ html { } .info { + font-family: monospace; + color: white; position: absolute; top: 0; left: 0; diff --git a/index.html b/index.html index c1b06bf..b02ef50 100644 --- a/index.html +++ b/index.html @@ -1,44 +1,54 @@  - - - - Super Mario Bros - - + Super Mario Bros + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Move: Arrow Keys, Jump: X, Run: Z

+ Garrett Johnson +
My Links +
+ Portfolio + LinkedIn + github + mario.js +
+
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Move: Arrow Keys, Jump: X, Run: Z

-
My Links
Portfolio LinkedIn github
-
- - + \ No newline at end of file diff --git a/js/game.js b/js/game.js index 2ad523a..df43782 100644 --- a/js/game.js +++ b/js/game.js @@ -21,9 +21,9 @@ var player = new Mario.Player([0,0]); //Cool! //TODO: Automatically scale the game to work and look good on widescreen. //TODO: fiddling with scaled sprites looks BETTER, but not perfect. Hmm. -canvas.width = 762; -canvas.height = 720; -ctx.scale(3,3); +canvas.width = 256; +canvas.height = 240; +ctx.scale(1,1); document.body.appendChild(canvas); //viewport @@ -90,6 +90,8 @@ function main() { } function update(dt) { + music.overworld.play(); + gameTime += dt; handleInput(dt);