Как остановить элемент на границе сенсорного экрана? - PullRequest
Новая
       9

Как остановить элемент на границе сенсорного экрана?

0 голосов
/ 19 сентября 2018

Я новичок в JS и пытаюсь создать в нем простую игру.Я ищу способ остановить окно проигрывателя (20px x 20px), заставляющее экран прокручиваться, я ищу фиксированный экран, где игрок не может выходить за границы экрана.Пожалуйста, смотрите предыдущие попытки ниже.


HTML: 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="Style.css">
  </head>
  <body>
    <div id="player"></div>
  <script type="text/javascript" src="Script.js"></script>
  </body>
</html>

CSS: 

body{
  margin: 0;
  padding: 0;
  background-color: red;
}
#player{
  border-radius: 30%;
  padding: 0px;
  margin: 0px;
  background-color: white;
  width: 20px;
  height: 20px;
  position: absolute;
}

JavaScript: 

var player = document.getElementById("player")
var pros = {'top': 0, 'left': 0, 'speed': 10}
var ws = {'h': screen.height, 'w': screen.width}
document.addEventListener("keydown", function(event){
  var keyP = event.key;
  if(keyP === "ArrowDown"){
    pros.top = pros.top + pros.speed;
  }else if(keyP === "ArrowUp"){
    pros.top = pros.top - pros.speed;
  }else if(keyP === "ArrowLeft"){
    pros.left = pros.left - pros.speed;
  }else if(keyP === "ArrowRight"){
    pros.left = pros.left + pros.speed;
  }
  if(pros.top < 0){
    pros.top = 0;
  }else if(pros.top > ws.h){
    pros.top = ws.h;
  }else if(pros.left < 0){
    pros.left = 0;
  }else if(pros.left > ws.w){
    pros.left = ws.w;
  }
  player.style.top = `${pros.top}px`;
  player.style.left = `${pros.left}px`;
});

Сейчас, Я хочу, чтобы элемент никогда не выходил из заданной области экрана. Как вы можете видеть из кода, который я пытался использовать screen.height / screen.width , чтобы управлять им, но все же онпокидает область, и полосы прокрутки активируются даже в полноэкранном режиме.Это выглядит слишком грязно для игры.
Вот изображение того, как он покидает область:

В полноэкранном режиме: Full Screen Mode

Без полноэкранного режима: Without Full Screen

Ответы [ 3 ]

0 голосов
/ 19 сентября 2018

height и width вашего объекта PLAYER равны 20px, как указано из предоставленной вами таблицы стилей.

Если вы поместите свой элемент на 2D-плоскость, то его координаты будут точкойгде его верхний левый угол лежит.Фокус здесь.

Итак, ваш JavaScript должен измениться на следующее: 

  ...
  if(pros.top < 0){
    pros.top = 0;
  }else if(pros.top > ws.h-20){ // changed here
    pros.top = ws.h-20; // try playing with the value here
  }else if(pros.left < 0){ 
    pros.left = 0;
  }else if(pros.left > ws.w-20){ //changed here
    pros.left = ws.w-20; // try playing with the value here
  }
  ...

Это всегда поместит элемент #player на 20 пикселей внутрь по оси горизонта и 20 пикселей по вертикальной оси.Мне удалось ограничить появление горизонтальной полосы прокрутки, но вертикаль исчезла только для значения ws.h-40.

imageleft: ws.w-20 and top: ws.h-40">

Надеюсь, это поможет.

0 голосов
/ 19 сентября 2018

Наиболее точные измерения положения и размеров доступны с помощью функции getBoundingClientRect().

Таким образом, в верхней части вашего обратного вызова клавиш я бы добавил две строки: 

var screenRect = document.body.getBoundingClientRect();
var playerRect = player.getBoundingClientRect();

Этинужно рассчитывать на каждой итерации, чтобы убедиться, что «игра» адаптируется к каждому изменению экрана.Кроме того, любые приращения позиции лучше рассчитывать в процентах от размера экрана, а не от статических значений пикселей.

Вашу проверку края экрана следует переписать так: 

if(playerRect.top < 0){
    pros.top = 0;
} else if(playerRect.top + playerRect.height > screenRect.height){
    // make sure the bottom edge of the player doesn't go over the bottom edge of the screen
    pros.top = screenRect.height - playerRect.height;
}

if(playerRect.left < 0){
    pros.left = 0;
} else if(playerRect.left + playerRect.width + > screenRect.width){
    // make sure the right edge of the player doesn't go over the right edge of the screen
    pros.left = screenRect.width - playerRect.width;
}

На стороне CSS попробуйтеследующее: 

body{
  margin: 0;
  padding: 0;
  background-color: red;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
#player{
  border-radius: 30%;
  padding: 0px;
  margin: 0px;
  background-color: white;
  width: 20px;
  height: 20px;
  position: fixed;
}
0 голосов
/ 19 сентября 2018

Эй :) Может быть, это поможет вам: 

<style type="text/css">
body {
    overflow:hidden;
}
</style>

Установка overflow: hidden скроет полосу прокрутки.

...