Блог

Я работаю над игрой с препятствиями, похожей на игру Chrome dinosaur или geometry dash, и у меня возникли некоторые проблемы с CSS.

Моя первая проблема: я пытаюсь центрировать холст по центру экрана, как по горизонтали, так и по вертикали. Вот мой код, который работает только для полноэкранных страниц:

 html, body {
  
  margin: 0;
  padding: 0;
  align-items: center;
  display: flex;
  
}
canvas {
  
  position: absolute;
  top: 25%;
  left: 10%;
  display: block;
  border: 15px solid #edce00;   
  border-radius: 30px;
  align-items: center;
  display: flex;
  
}
 

Вот что он показывает для полноэкранных страниц и измененных размеров страниц:

Как вы можете видеть, игра не полностью видна на странице, где скорректированы размеры. это приводит меня ко второй проблеме.

Моя вторая проблема: я также пытаюсь установить минимальный размер страницы. Таким образом, будет показан весь игровой экран, независимо от того, насколько большим или маленьким (до некоторой степени) является экран. Есть ли какой-либо способ изменить размер холста в соответствии с размером страницы и убедиться, что он не меньше значения «x»? Будет ли это сделано на Javascript или CSS?

Если бы вы могли помочь мне с любой проблемой, это очень помогло бы. Спасибо!

Редактировать: вот ссылка на эскиз p5, если это поможет. https://editor.p5js.org/ThisBubblyBoi/sketches/CbxWQSrjF

К сожалению, если вы попытаетесь использовать CSS для изменения размера элемента canvas, при рисовании на нем он станет размытым.

Таким образом, вы должны использовать Js для установки атрибутов width и height холста. Помните, что из-за этого вам, вероятно, придется изменить способ рисования на холсте.

 let canvas = document.querySelector("#myCanvas");
canvas.width = Math.max(400, canvas.clientWidth);
canvas.height = canvas.clientHeight; 

 body {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  height: 100vh;
  width: 100vw;
  min-width: 400px;
  padding: 60px;

}

canvas {
  border: 2px solid yellow;
  width: 100%;
  height: 100px;
} 

 <canvas id="myCanvas" width="50" height="50"/> 

Обратите внимание, что если рисовать на холсте, а затем изменять его размер, это решение будет выглядеть размытым, вам просто нужно обновить страницу с правильным разрешением, чтобы исправить это.