javascript - GameDevelopment Best Practise: Scaling distances of actions and objects -

i started develope web-based game on canvas element in addition create http://www.createjs.com/ , user has actions jump on obstacles , collect goddies , on.

i want publish on many devices smartphones, tablets, game-consoles , browsers-based.

now wonder best solution make responsive possible regarding different screen-resolutions.

my first intention define basic height 1000px , scale objects "your game character" , action-properties "jump-height" depending on screen-height.

i feel little overload calculate , scale lot "just" screen-optimizing.

what think now.. maybe set heights etc. , calculate in percent. don´t know if run in problems, maybe when going on colission-detection , on.

does know best practises on topic or can give me advice?

i'm perhaps little of mark here, writing lines.

twiddling canvas bit myself these days. read in question depends on code. loosely take approach this:

• detect available space.
• pre-animation:
  • calculate as possible , save pre-calculated values objects etc.
  • paint background, animation sprites , other objects off dom / memory canvas.
• during-animation:
  • use pre-calculated values position , animate.

by 1 outsource lot of calculations run on change in window size. if 1 not have in mind all time while writing code "what can pre-calculate" 1 in huge refactoring job.

i have fiddled pixel ratio , ppi, in directions like this. have found use of such functions createhidpicanvas() mess things rotating , positioning. 1 issue, various information have read on subject, people not factor in fact browsers has zoom factor. can ok when zoom @ 100% when 1 zoom up/down falls apart. again might find useful.

there various cases 1 have out 1 do. example:

if draw horizontal , vertical lines, align them x0 + 0.5 or y0 + 0.5 crisp lines.

ultimately comes down how final calculations during runtime. this slide might of interest example.