https://satelnews.net/circle-puzzle-html5-game/js/main.js

1////////////////////////////////////////////////////////////
2// MAIN
3////////////////////////////////////////////////////////////
4var stageW=1280;
5var stageH=768;
6var contentW = 1024;
7var contentH = 576;
8
9var viewport = {isLandscape:true};
10var landscapeSize = {w:stageW, h:stageH, cW:contentW, cH:contentH};
11var portraitSize = {w:768, h:1024, cW:576, cH:900};
12
13/*!
14 * 
15 * START BUILD GAME - This is the function that runs build game
16 * 
17 */
18function initMain(){
19	if(!$.browser.mobile || !isTablet){
20		$('#canvasHolder').show();	
21	}
22	
23	initGameCanvas(stageW,stageH);
24	buildGameCanvas();
25	buildGameButton();
26	if ( typeof buildScoreBoardCanvas == 'function' ) { 
27		buildScoreBoardCanvas();
28	}
29	
30	if($.editor.enable){
31		loadEditPage();
32		goPage('game');
33	}else{
34		goPage('main');
35	}
36	
37	checkMobileOrientation();
38	resizeCanvas();
39}
40
41var windowW=windowH=0;
42var scalePercent=0;
43var offset = {x:0, y:0, left:0, top:0};
44
45/*!
46 * 
47 * GAME RESIZE - This is the function that runs to resize and centralize the game
48 * 
49 */
50function resizeGameFunc(){
51	setTimeout(function() {
52		$('.mobileRotate').css('left', checkContentWidth($('.mobileRotate')));
53		$('.mobileRotate').css('top', checkContentHeight($('.mobileRotate')));
54		
55		windowW = window.innerWidth;
56		windowH = window.innerHeight;
57		
58		scalePercent = windowW/contentW;
59		if((contentH*scalePercent)>windowH){
60			scalePercent = windowH/contentH;
61		}
62		
63		scalePercent = scalePercent > 1 ? 1 : scalePercent;
64		
65		if(windowW > stageW && windowH > stageH){
66			if(windowW > stageW){
67				scalePercent = windowW/stageW;
68				if((stageH*scalePercent)>windowH){
69					scalePercent = windowH/stageH;
70				}	
71			}
72		}
73		
74		var newCanvasW = ((stageW)*scalePercent);
75		var newCanvasH = ((stageH)*scalePercent);
76		
77		offset.left = 0;
78		offset.top = 0;
79		
80		if(newCanvasW > windowW){
81			offset.left = -((newCanvasW) - windowW);
82		}else{
83			offset.left = windowW - (newCanvasW);
84		}
85		
86		if(newCanvasH > windowH){
87			offset.top = -((newCanvasH) - windowH);
88		}else{
89			offset.top = windowH - (newCanvasH);	
90		}
91		
92		offset.x = 0;
93		offset.y = 0;
94		
95		if(offset.left < 0){
96			offset.x = Math.abs((offset.left/scalePercent)/2);
97		}
98		if(offset.top < 0){
99			offset.y = Math.abs((offset.top/scalePercent)/2);
100		}
101		
102		$('canvas').css('width', newCanvasW);
103		$('canvas').css('height', newCanvasH);
104		
105		$('canvas').css('left', (offset.left/2));
106		$('canvas').css('top', (offset.top/2));
107		
108		$(window).scrollTop(0);
109		
110		resizeCanvas();
111		if ( typeof resizeScore == 'function' ) { 
112			resizeScore();
113		}
114	}, 100);	
115}