En el motor de Construct 2, hay una escala de buzón automática para el lienzo del juego. Intenté hacer esto en mi juego Javascript, pero no pude obtener el mismo resultado. El lienzo se ajusta verticalmente, pero a veces el ancho es lo suficientemente alto como para desbordar la pantalla. ¿Cómo puedo hacer que el lienzo se ajuste a la pantalla sin desbordarse manteniendo la relación de aspecto como en Construct 2?
<!DOCTYPE html> <html> <head> <style> body { margin: 0; height: 100vh; display: flex; justify-content: center; background-color: black } </style> <script src="main.js"></script> <meta charset="UTF-8"> <title>My Game</title> </head> <body id="body"> <canvas id="canvas"></canvas> </body> </html>Intentaría configurar el elemento <canvas> max-width: 100% o max-width: 100vw .
Después de esforzarme tanto, finalmente obtuve una respuesta para mi pregunta. Creé un contenedor flexible con elementos de alineación como estiramiento (para que el lienzo dentro de él se pueda cambiar de tamaño automáticamente), y javascript maneja el ancho y la altura de este contenedor, por lo que cuando se activa un evento de cambio de tamaño, el contenedor cambia automáticamente de tamaño a encajar en la relación de aspecto de mantenimiento de pantalla.
<!DOCTYPE html> <html> <head> <style> * { margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background-color: black; } #container { display: flex; justify-content: center; align-items: stretch; } </style> <script src="main.js"></script> <meta charset="UTF-8"> <title>Game</title> </head> <body> <div id="container"> <canvas id="canvas"></canvas> </div> </body> </html> window.onload = function() { var container = document.getElementById("container") var canvas = document.getElementById("canvas") var ctx = canvas.getContext("2d") canvas.width = 640 canvas.height = 1200 } window.addEventListener("resize", function() { let width_scale = window.innerWidth / canvas.width let height_scale = window.innerHeight / canvas.height let scale = Math.min(width_scale, height_scale) container.style.width = `${canvas.width * scale}px` container.style.height = `${canvas.height * scale}px` })