2

I am really new to javascript, css, and html, but i want to learn. The problem is, its not clear the direction i should head in. I want to make a game site that can play a few games. Im trying to make a game board that will have a dynamic size based on the height and/or width of the browser while maintaining the aspect ratio of its original. It is going to have elements inside of it which must also decrease their size proportionately to its parent. I have tried using bootstrap 4, with its col, row, and container classes. I am struggling to make it work with the container class. I have recently come across the , which I saw someone use to achieve this. can anyone give me a better idea whats going on here?

one example is this website https://colonist.io/ just click play game, at the top, manipulate the browser height and width, you will see how it resizes, and all child elements. this is the exact effect i am looking for. thanks.

  • why not using this solution? https://stackoverflow.com/a/30220589/4062197 seems like it solves your problem – ymz Jan 05 '20 at 12:19
  • not sure this is exactly what i am looking for. do you have another post which is similar. im looking for 1 main "board" which will be resized based on window size, all elements inside will follow the same. the main element can then be positioned anywhere on the screen and everything else will follow. it is precisely what is being done on the colonist.io website. thanks! –  Jan 05 '20 at 19:41
  • ahaha I wrote all the frontend code for colonist.io glad you like my work. Did you solve the problem? – demiculus Mar 13 '20 at 09:11

1 Answers1

0

Well.. maybe this will suit your needs better

var scale = {}, isInitial = true;

window.onresize = function() {
    // make sure the ctx variable is global or visible in current scope in your code
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
    if (isInitial) {
       isInitial = false;
       scale.width = ctx.canvas.width;
       scale.height = ctx.canvas.height;
    } else {
       scale.x = window.innerWidth / scale.width, scale.y = window.innerHeight / scale.height;
       ctx.scale(scale.x, scale.y);

       // redraw your canvas graphics 
    }
}

Please ensure that:

  • Your canvas position id fixed
  • Canvas top and left properties set to 0
  • ctx variable is globally accessible
ymz
  • 6,602
  • 1
  • 20
  • 39