如何縮放遊戲視窗？

-5

我使用HTML5/CSS/JS製作遊戲。現在我有一個問題，我無法解決。 如何將遊戲縮放到任何屏幕分辨率？也許這很簡單，但不適合我。如何縮放遊戲視窗？

解決

var RATIO = 480/800; // Original ratio. 
function resize() { 
    var DEVICE_WIDTH = window.innerWidth, 
     DEVICE_HEIGHT = window.innerHeight, 
     ratio = DEVICE_WIDTH/DEVICE_HEIGHT, 
     scale = 1; 
    // If window changes by height we calculate scale parameter fo width 
    if (ratio > RATIO) { 
     scale = DEVICE_HEIGHT/800; // Devide by original viewport height 
    } else { // If window changes by width we calculate scale parameter for height 
     scale = DEVICE_WIDTH/480; // Devide by original viewport width 
    } 
} 

// So, now you can continue make your game, but in draw method you have to multiply 
// everything by this scale parameter (x and y coords, width and height)

希望它會幫助你這樣的人我:)

來源

2016-09-26 Reaget

請仔細閱讀[如何創建一個最小的，完整的，並且可驗證的示例]（http://stackoverflow.com/help/mcve） – choz

比方說，你叫你的畫布，canvas。改變其大小而不伸展它的代碼如下：

function setSize(width, height) 
{ 
    canvas.width = width; 
    canvas.style.width = width + "px"; 
    canvas.height = height; 
    canvas.style.height = height + "px"; 
} 

//And then to use that, 
setSize(350, 200);

來源

2016-09-26 04:27:21 Howzieky

我不使用此遊戲的畫布，僅限CSS。如何將一切縮小到適當的分辨率謝謝你的回答:) – Reaget

哦，天哪，縮小HTML遊戲？我想我不會給任何固定的寬度。改爲給它一個百分比。如果這不起作用，您可能需要使用javascript – Howzieky

您可以按照您想要爲其動態設置它，例如。如果你的容器有一定的ID或類，你可以

var container = document.getElementById(idName); 

var resize = function(element) { 
    return function (width, height) { 
      element.style.width = width; 
      element.style.height = height; 
    } 
} 

var sizeListener = resize(container)(document.documentElement.clientWidth,document.documentElement.clientHeight);

來源

2016-09-26 04:37:13

來做到這一點，但如何縮放容器的對象，場景對象？ – Reaget

如何縮放遊戲視窗？

回答

相關問題