Блог

Главная - Вопросы по программированию - Игра с точками для мини-настройки границ

Игра с точками для мини-настройки границ

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь разработать мини-игру, в которой вы нажимаете на точку, и позиция будет генерироваться случайным образом, а размер точки будет уменьшаться по мере того, как вы нажимаете на нее. Граница также может быть масштабируемой в зависимости от ее устройства.

Любые предложения / идеи о том, как я могу масштабировать точку внутри границ, не выходя за линию?

Вот мой простой код:

 .Box{  
 position: relative; 
 box-sizing: border-box;  
 border: 1px solid black ;
 height: 700px;
 width: auto; 
 margin: 2%;
 padding: 0px; 
}


.Dot{
    position: absolute;
    background-color:red;
    border-radius: 50%;
    width: 20px;
    height: 50px;
    left: 5px;
    top: 96%;
}  
 <html>
<body>
    <div class="Box">
             <div class="Dot"></div>
            </div>
            
        
</body>
    </html>

Ответ №1:

Если ваша точка имеет высоту и ширину 50 пикселей, вы можете поместить отступ в половину размера вокруг основного поля, в этом случае это будет 25 пикселей отступа.

Затем вы можете добавить еще один div внутри поля, который будет составлять 100% от высоты и ширины поля, установить его положение как относительное и переместить точку внутри внутреннего контейнера.

До тех пор, пока вы сохраняете постоянный размер точки и заполняете поле половиной размера точки, точка никогда не будет выходить за пределы своих родительских контейнеров.

 *, *::before, *::after {
  box-sizing: border-box;
}

.Box{
  border: 1px solid black;
  height: 700px;
  width: auto;
  margin: 2%;
  padding: 25px;
}

.Inner{
  position: relative;
  height: 100%;
  width: 100%;
}

.Dot{
  position: absolute;
  background-color:red;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  left: 5px;
  top: 96%;
}  
 <html>
  <body>
<div class="Box">
  <div class="Inner">
    <div class="Dot"></div>
  </div>
</div>
  </body>
</html>

Комментарии:

1. Спасибо. Это должно сработать. Если вы не возражаете, я спрашиваю. *, *::before, *::after { box-sizing: border-box; } Для чего?

2. * означает подстановочный знак, когда вы пишете правила css внутри этого блока, они будут применены ко всем элементам html. Таким образом, вышесказанное будет применяться box-sizing: border-box ко всем элементам и их before / after псевдоэлементам