Форум

void() · #1 (**permalink**) 21.08.2017, 16:12

Всем привет.
Я новичок, пытаюсь написать карточную игру на js. Игра почти готова, но что-то я сильно туплю на, казалось бы, самом простом.

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

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

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

ksa · #2 (**permalink**) 21.08.2017, 16:42

Сообщение от void()

если игрок много "взял", то они не помещаются и переносятся на другую строку. Что вполне естественно, но как этого можно избежать?

Если карты размещать в ДИВе с position отличным от static, можно применять абсолютное позиционирование

pisition: absolute;

рони · #3 (**permalink**) 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() · #4 (**permalink**) 21.08.2017, 23:59

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

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

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

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

рони · #5 (**permalink**) 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() · #6 (**permalink**) 22.08.2017, 12:48

wow! Ваше решение самое гениальное в своей простоте и эффективности. Спасибо большое!

Nexus · #7 (**permalink**) 22.08.2017, 12:53

Сообщение от рони

m < 0 && (m = -5);
m > 100 && (m = 95);

Это же тоже самое, что и это:

if(m<0) m=-5;
if(m>100) m=95;

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

ksa · #8 (**permalink**) 22.08.2017, 13:16

Сообщение от Nexus

Это же тоже самое

Да.

Это джедай стайл...

Nexus · #9 (**permalink**) 22.08.2017, 13:49

Сообщение от ksa

Это джедай стайл...

Интересный, конечно, ~~способ~~ стайл, но ну его нафиг.
Не сразу можно понять какого фига условие посреди строки и вне оператора if)

ksa · #10 (**permalink**) 22.08.2017, 14:01

Сообщение от Nexus

Не сразу можно понять

Во многих языках программирования встречаются, не понятные сразу, но стандартные в последствии приемы...

Например в JS помимо этого используется еще такой прием для присваивания значения

function test(Prm){
	Prm = Prm || 0;
	alert(Prm);
}
test();

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

Форум

Справочник

Discord чат

Курсы javascript