Responsive Canvas Design

[Straker]

I have been working for the past month to see if I could create a truly responsive HTML5 canvas game. The goal was to make the game respond to the viewport using only CSS and serve images based on device (larger images going to larger screens). I finally was able to get it working and thought that others would like to use the technique. My hope is that you can improve upon it and help make more responsive games.

 

http://blog.sklambert.com/responsive-html5-canvas-game/

[Chris]

Wow, thats quite a CSS hack...

 

Am I getting this right:

You are appending JSON data via CSS media queries to a pseudo element before your body tag that you read out with JS to alter some image tags' src attribute?

 

Why aren't you doing this directly in JS?

[rich]

Approaches like this scare the hell out of me! But hey full kudos for bothering to explain it clearly and write it all up

[Chris]

I understand the original approach of Les James, who says he wants to keep the decisions which images to load completely inside CSS.

But for a game, I see no reason to do the media queries via JavaScript directly, instead of making a huge turn-around via CSS...

[Straker]

I understand where you are coming from. How to do responsive images has always been an area with many solutions and no right answer. I used Les James technique only because it was the article that gave me the idea to do a responsive game design. Of course you can just as easily program a JavaScript resize function to do the same thing, it just depends on what you want to do I guess. 

 

I'm glad though that it's getting some discussion on how to change and/or improve upon the experiment. 

[Chris]

Some ideas: You could get the screen/canvas size directly via JS and decide which assets to load.

Heck, you could even check against media queries in JS:

 

var result = window.matchMedia('(min-width: 480px)');if(result.matches){    console.log('Your window is wider than 480px!');}

 

Propably the most interesting thing here is that you can add a event listener to the result that fires automatically when the result changes!
No more listening to window resize events!

 

result.addEventListener(function(e){ if(e.matches){   console.log('doesnt match anymore!'); } else {    console.log('matches again!'); }});

[Straker]

That's pretty cool. I didn't know about the window.matchMedia. I'll have to give that a try, thanks.

[jogutierrez]

Ohh is great window.matchMedia, I can get the screen size via JS and load resources..! pretty cool thanks