У меня есть небольшой проект Snake-game, написанный на JS.
ссылка на эту веб-страницу здесь https://ashuvssut.github.io/JS-Snake-game/
На реальных физических мобильных устройствах веб-страница имеет проблему
- он прокручивается, когда я смахиваю вверх или вниз. (Этого не ожидается)
- нет эффекта прокрутки, когда я пытаюсь открыть его в режиме просмотра мобильной веб-страницы Desktop.
- Мне нужно жесты смахивания для перемещения змейки на веб-странице (функция смахивания реализуется молотком. js)
Я уже пробовал реализовать атрибут overflow : hidden
для тела в CSS , bu t из-за этого атрибута CSS возникает другая проблема: жесты смахивания не работают .
Таким образом, я не хочу применять атрибут overflow : hidden
укажите альтернативу для решения этой проблемы
весь файл css приведен ниже:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: blueviolet;
}
#game-board{
height: 85vmin;
width: 85vmin;
background-color: cyan;
display: grid;
grid-template-rows: repeat(21,1fr);
grid-template-columns: repeat(21,1fr);
border: 5vmin solid grey;
}
.snake, .fruit{
border: 0.2vmin solid black;
}
.snake {
background-color: blue;
}
.fruit{
border-radius: 50%;
background-color: yellow;
}
#score-board{
height: 5vmin;
background-color: white;
width: 30%;
border-radius: 4px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
#score{
font-weight:bold;
}
ссылка на репозиторий github https://github.com/ashuvssut/JS-Snake-game