Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.11.2017, 16:30
Новичок на форуме
Отправить личное сообщение для BOWTIE Посмотреть профиль Найти все сообщения от BOWTIE
 
Регистрация: 21.11.2017
Сообщений: 4

Пытаюсь написать приложение и возникли трудности со связкой JS/CSS
Достаточно давно, но не супер успешно пытаюсь написать приложение (для игры с друзьями) в вэбе. Задумка, кажется, проста - (гипотетически) есть колода карт, лежащих рубашкой вверх. Из это колоды мы по очереди достаем по карте, где каждая карта что-то значит (для игры и игроков). Процесс продолжается до тех пор, пока колода не иссякнет и затем процесс начинается заново.
В JS я не силен и поэтому возникли сложности. В моей голове это построилось следующим образом - есть массив с 36 элементами (картами), мы рандомом достаем из этого массива по одному элементу (карте) и, показывая его, удаляем. Затем снова рандомно достаем еще один и тоже удаляем. И так до тех пор, пока массив не закончится. Затем игра стартует заново.
Пару месяцев не самой активной вовлеченности и я родил следующий фрагмент когда:

function DoC() {
var arr = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", ];
while (arr.length > 0) {
var rand = Math.floor(Math.random() * arr.length);
var removed = arr.splice(rand, 1);
alert(removed);
}
}

У меня получился рабочий скелет и теперь я загорелся. А вот вопрос у меня такой, - Как реализовать вышеописанное визуально? У меня есть мысль, что нужно добавить кнопку для старта процесса, в файл CSS закинуть 36 изображений карт и дать им свойство TRANSPARENT, и, когда из массива будет выпадать рандомное значение, сравнивать его с таковым в файле CSS и при совпадении, меняя стиль конкретной карты, делать ее видимой.
Правильно ли я мыслю? Если в этом есть логика, то как это реализовать? Ковырял интернет не однажды и все равно не могу понять как должен JS общаться с файлом CSS, обращаться к нему, сравнивать значения и, при необходимости, менять их
Ответить с цитированием
  #2 (permalink)  
Старый 21.11.2017, 16:35
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Меняется не в файлах, меняется свойство стиля объекта.

А что мне как игроку мешает выбирать и показывать карту не ту, что скрипт предлагает, а ту что я хочу?
Ответить с цитированием
  #3 (permalink)  
Старый 21.11.2017, 17:11
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

BOWTIE,
Все игроки играют на одном компьютере? Где лежит колода?
Ответить с цитированием
  #4 (permalink)  
Старый 21.11.2017, 17:16
Новичок на форуме
Отправить личное сообщение для BOWTIE Посмотреть профиль Найти все сообщения от BOWTIE
 
Регистрация: 21.11.2017
Сообщений: 4

А как в JS поменять свойство стиля объекта? То есть ссылаясь на CSS-файл я могу поменять свойство стиля какого-нибудь объекта в нем?

В реальности у нас эта игра называлась "Общажная" и подразумевала игру именно следующим образом: с колоды, лежащей вверх рубашкой, снимается игроками по очереди по карте. К примеру, если кому-то выпала Дама, то этот игрок придумывает тему (например марки автомобилей), озвучивает ее и называет первый объект из этой темы -
Ауди, остальные продолжают по очереди до тех пор, пока кто-то не затупит. Кто затупил, пьет. Хочу реализовать ее именно таким образом.
Ответить с цитированием
  #5 (permalink)  
Старый 21.11.2017, 17:24
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

BOWTIE,
Нужен просто массив с картинками - показывать выпавшую
Ответить с цитированием
  #6 (permalink)  
Старый 21.11.2017, 17:28
Новичок на форуме
Отправить личное сообщение для BOWTIE Посмотреть профиль Найти все сообщения от BOWTIE
 
Регистрация: 21.11.2017
Сообщений: 4

Да, все играют на одном компьютере. Нужна просто визуализация колоды в случае, если реальной колоды карт под рукой нет.
В последствии, кстати, хочу реализовать такое приложения на МУ. Главное, понять логику того, как это должно работать.
Ответить с цитированием
  #7 (permalink)  
Старый 21.11.2017, 17:38
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от BOWTIE
Да, все играют на одном компьютере.
А пишите веб.

Выбранную карту можно показывать отдельно, можно сверху колоды. Реализация этого не сложная, "раскадровку" игры своей опишите, а из нее уже будет видна и верстка, и действия необходимые.
Ответить с цитированием
  #8 (permalink)  
Старый 21.11.2017, 18:08
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Как-то так...
<div id = "deck" style = "height:50px;width:50px;background-color:lightblue">Тащи!</div>
<div id = "game"></div>
<script>
var cards = ["http://javascript.ru/cat/list/dom.gif",
"http://javascript.ru/cat/list/event.gif",
"http://javascript.ru/cat/list/donkey.gif",
"http://javascript.ru/cat/list/mobile.jpg",
"http://javascript.ru/cat/list/js.gif",
"http://javascript.ru/cat/list/project.jpg"];
document.querySelector("#deck").onclick = function(){
  if (cards.length > 0) {
    var rand = Math.floor(Math.random() * (cards.length - 1));
    var card = document.createElement("img");
    card.src = cards[rand];
    document.querySelector("#game").appendChild(card);
    var removed = cards.splice(rand, 1);
}
else alert("Колода пуста!");
}
</script>
Ответить с цитированием
  #9 (permalink)  
Старый 21.11.2017, 18:18
Новичок на форуме
Отправить личное сообщение для BOWTIE Посмотреть профиль Найти все сообщения от BOWTIE
 
Регистрация: 21.11.2017
Сообщений: 4

1. На плоском фоне по центру экрана видно лишь одну карту лежащую рубашкой вверх (Под этой картой будто бы скрывается оставшаяся колода).
2. При нажатии клавиши, или, при клике мышкой по рубашке карты, показывается оборотная (лицевая) сторона этой карты с мастью и кратким описанием того, что нужно делать, если выпала эта карта.
3. При повторном нажатии клавиши, или, повторном клике по карте, она исчезает (пускай даже молниеносно, без анимации) и на ее месте снова видна рубашка (но уже как бы другой карты).
4. По истечении 36 карт, видим просто пустой фон. И если на данном этапе нажать на клавишу или кликнуть мышкой по фону, снова увидим рубашку карты по центру экрана.

P.S. В последствии хочу добавить: анимацию переворачивания карты с рубашки на лицо, анимацию растворения карты, чтобы на ее месте появилась следующая, таймер (или как он там называется) оставшихся в колоде карт.
Ответить с цитированием
  #10 (permalink)  
Старый 21.11.2017, 18:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

Dilettante_Pro,
а если так
<meta charset="utf-8">
<div id = "deck" style = "height:50px;width:50px;background-color:lightblue">Тащи!</div>
<div id = "game"></div>
<script>
var cards = ["http://javascript.ru/cat/list/dom.gif",
"http://javascript.ru/cat/list/event.gif",
"http://javascript.ru/cat/list/donkey.gif",
"http://javascript.ru/cat/list/mobile.jpg",
"http://javascript.ru/cat/list/js.gif",
"http://javascript.ru/cat/list/project.jpg"];
document.querySelector("#deck").onclick = function(){
  if (cards.length > 0) {
    var rand = Math.floor(Math.random() * cards.length);
    var card = document.createElement("img");
    card.src = cards.splice(rand, 1);
    document.querySelector("#game").appendChild(card);
}
else alert("Колода пуста!");
}
</script>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск