Адаптивная верстка веб-игры для телефонов

Рейтинг: 0Ответов: 1Опубликовано: 24.08.2023

У меня есть веб-игра змейка на JavaScript и у меня возникли некоторые проблемы со стилями и адаптацией на телефон. Картинка на компьютере выглядит так:Картинка на компьютере

Но на телефоне игра выглядит следующим образом:

Картинка на телефоне

Само поле игры я уже исправил, но не могу исправить кнопки. Мне нужно, чтоб при уменьшении экрана они сужались в размерах и прижимались к друг другу не вплотную (чтоб было расстояние как на компьютере), а также не меняли позицию (типо чтоб они не двигались по оси Y).

HTML и CSS:

@import url('https://fonts.cdnfonts.com/css/ds-marker-felt');


#gameContainer {
    text-align: center;
}


#gameBoard {
    border: 5px solid;
    border-color: rgb(0, 0, 0);
    background-color: #0fb100;
    margin: 10 auto;
}

@media (max-width: 767px) {
    #gameBoard {
        border: 5px solid;
        border-color: rgb(0, 0, 0);
        background-color: #0fb100;
        margin: 0 auto;
        box-sizing: border-box;
        width: 100%;
        display: block;
    }
}





#score {
    font-size: 50px;
    font-family: 'DS Marker Felt', sans-serif;
    width: 150px;
    height: 100px;
    border: 4px solid;
    border-radius: 15px;
    cursor: pointer;
    position: fixed; 
    top: 64%; 
    left: 42%; 
    transform: translate(-50%, -50%); 
    margin-left: auto;
    margin-right: auto;
    
}

#pause {
    font-size: 50px;
    font-family: 'DS Marker Felt', sans-serif;
    width: 150px;
    height: 100px;
    border: 4px solid;
    border-radius: 15px;
    cursor: pointer;
    position: fixed; 
    top: 64%; 
    left: 58%; 
    transform: translate(-50%, -50%); 
    margin-left: auto;
    margin-right: auto;
}

#up {
    font-size: 50px;
    font-family: 'DS Marker Felt', sans-serif;
    width: 150px;
    height: 100px;
    border: 4px solid;
    border-radius: 15px;
    cursor: pointer;
    position: fixed; 
    top: 64%;
    left: 50%; 
    transform: translate(-50%, -50%); 
    margin-left: auto;
    margin-right: auto;
}
#right {
    font-size: 50px;
    font-family: 'DS Marker Felt', sans-serif;
    width: 150px;
    height: 100px;
    border: 4px solid;
    border-radius: 15px;
    cursor: pointer;
    position: fixed; 
    top: 75%; 
    left: 58%; 
    transform: translate(-50%, -50%); 
    margin-left: auto;
    margin-right: auto;
}
#left {
    font-size: 50px;
    font-family: 'DS Marker Felt', sans-serif;
    width: 150px;
    height: 100px;
    border: 4px solid;
    border-radius: 15px;
    cursor: pointer;
    position: fixed;  
    top: 75%; 
    left: 42%; 
    transform: translate(-50%, -50%); 
    margin-left: auto;
    margin-right: auto;
}
#down {
    font-size: 50px;
    font-family: 'DS Marker Felt', sans-serif;
    width: 150px;
    height: 100px;
    border: 4px solid;
    border-radius: 15px;
    cursor: pointer;
    position: fixed; 
    top: 75%;
    left: 50%; 
    transform: translate(-50%, -50%); 
    margin-left: auto;
    margin-right: auto;
}


@media (max-width: 1080px) {
    .button {
        font-size: 8vw;
        width: 30%; /* Увеличиваем ширину кнопки для мобильных устройств */
        height: 15%; /* Уменьшаем высоту кнопки для мобильных устройств */
    }
}
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Snake</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="gameContainer">
    <canvas id="gameBoard" height="500", width="500"></canvas>
    <button id="score" class="button">0</button>
    <button id="pause" class="button">┃┃</button>
    <button id="up" class="button">↑</button>
    <button id="right" class="button">→</button>
    <button id="left" class="button">←</button>
    <button id="down" class="button">↓</button>
</div>
<script src="main.js"></script>
</body>
</html>

разработка-игр css html html5 css3
Источник: Stack Overflow на русском

Ответы

▲ 0
Вот пример

     <div id="myCanvas"></div>
    <div class="control">
      <button class="control-unit">Stop</button>
      <button class="control-unit">Up</button>
      <button class="control-unit">Start</button>
      <button class="control-unit">Left</button>
      <button class="control-unit">Down</button>
      <button class="control-unit">Right</button>
    </div>
    #myCanvas {
   width: 100%;
   max-width: 500px;
   aspect-ratio: 1/1;
   height: auto;
   border: 1px solid #000;
   margin: 20px auto;
 }
 .control {
   margin: 16px auto;
   max-width: 500px;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 5px;
}
.control-unit {
   width: 30%;
   aspect-ratio: 1/1;
   font-size: calc(10px + 1.5vw);
   border-radius: 8px;
   cursor: pointer;
   border: 0;
   background-color: gray;
}

    const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
    
    
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;