Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Как сделать наезжающие друг на друга блоки (https://javascript.ru/forum/xhtml-html-css/70230-kak-sdelat-naezzhayushhie-drug-na-druga-bloki.html)

void() 21.08.2017 16:12
Как сделать наезжающие друг на друга блоки
 
Всем привет.
Я новичок, пытаюсь написать карточную игру на js. Игра почти готова, но что-то я сильно туплю на, казалось бы, самом простом.

Мой вопрос: как сделать так, чтобы карты в "магазине" у бота или юзера динамически наезжали друг на друга.

Сейчас у меня карты отображаются просто одна за другой в ряд (это просто картинки img, которые динамически создаются js). И если игрок много "взял", то они не помещаются и переносятся на другую строку. Что вполне естественно, но как этого можно избежать? Чтобы наглядно показать чего я пытаюсь добиться, прикреплю картинку.



Представьте, сначала раздали 7 карт. Затем, по мере игры, если карт у юзера становится больше, они наезжают друг на друга как на картинке. Как это можно сделать?

ksa 21.08.2017 16:42
Цитата:
Сообщение от void()
если игрок много "взял", то они не помещаются и переносятся на другую строку. Что вполне естественно, но как этого можно избежать?
Если карты размещать в ДИВе с position отличным от static, можно применять абсолютное позиционирование
pisition: absolute;

рони 21.08.2017 17:32
:-?
margin-right???
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .hot{
         border: 1px dashed Gray; padding: 5px; height: 200px; width: 100px;
         border-radius: 8px;
         margin-right: -75px;
         background-color: #FFFFFF;
    }
    .hot:before{
       content: "♠";
        color: #FF0000;
    }

    .slider{
       display: flex;
       width: 500px;

    }

  </style>



</head>

<body>
<div class="slider">
 <div class="hot"></div>
  <div class="hot"></div>
  <div class="hot"></div>
  <div class="hot"></div>
  <div class="hot"></div>
  <div class="hot"></div>
  <div class="hot"></div>
  <div class="hot"></div>
  <div class="hot"></div>
  <div class="hot"></div>
  <div class="hot"></div>
 </div>
</body>
</html>

void() 21.08.2017 23:59
Спасибо! Все прояснилось)
Изначально зациклился, что есть какой-то нативный способ. Чтобы блоки сами наезжали друг на друга равномерно, когда они не помещаются в строку полностью. А на самом деле решение в том, чтобы задавать дискретные изменения вручную.

Допустим, сделать 3 точки перехода:

1. Если блоков > 12;
2. Если блоков > 20;
3. Если блоков > 30

А дальше или по методу ksa. Можно обходить блоки циклом как массив и позиционировать.
Или по методу рони задавать отрицательный маржин (-30, -50, -70).

рони 22.08.2017 01:00
void(),
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }

    .hot{
         border: 1px dashed Gray; height: 200px; width: 100px;
         border-radius: 8px;
         background-color: #FFFFFF;
         flex-shrink: 0;
    }
    .hot:before{
       content: "♠";
       color: #FF0000;
    }

    .slider{
       display: flex;
       width: 98%;
       justify-content: flex-start;

    }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
var n = 1+ Math.random()*36|0;
var m = 100 - ($('.slider').width()-175)/(n-1);
m < 0 && (m = -5);
m > 100 && (m = 95);
for (var i=0; i<n; i++)  {
$('<div class="hot">'+i+'</div>').appendTo('.slider').css({'margin-right': -m +"px"})}


});
  </script>

  </script>
</head>

<body>
<div class="slider">
</div>
</body>
</html>

void() 22.08.2017 12:48
wow! Ваше решение самое гениальное в своей простоте и эффективности. Спасибо большое!

Nexus 22.08.2017 12:53
Цитата:
Сообщение от рони
m < 0 && (m = -5);
m > 100 && (m = 95);
Это же тоже самое, что и это:
if(m<0) m=-5;
if(m>100) m=95;

Или я чего-то не знаю?

ksa 22.08.2017 13:16
Цитата:
Сообщение от Nexus
Это же тоже самое
Да. :yes:
Это джедай стайл... :D

Nexus 22.08.2017 13:49
Цитата:
Сообщение от ksa
Это джедай стайл...
Интересный, конечно, способ стайл, но ну его нафиг.
Не сразу можно понять какого фига условие посреди строки и вне оператора if)

ksa 22.08.2017 14:01
Цитата:
Сообщение от Nexus
Не сразу можно понять
Во многих языках программирования встречаются, не понятные сразу, но стандартные в последствии приемы...

Например в JS помимо этого используется еще такой прием для присваивания значения
function test(Prm){
	Prm = Prm || 0;
	alert(Prm);
}
test();


И если в конторе приняты такие стайлы, новички об этом узнают и потом используют дальше. Т.е. это становится некой нормой. ;)


Часовой пояс GMT +3, время: 13:49.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице