Пытаюсь написать приложение и возникли трудности со связкой JS/CSS

[BOWTIE]

Достаточно давно, но не супер успешно пытаюсь написать приложение (для игры с друзьями) в вэбе. Задумка, кажется, проста - (гипотетически) есть колода карт, лежащих рубашкой вверх. Из это колоды мы по очереди достаем по карте, где каждая карта что-то значит (для игры и игроков). Процесс продолжается до тех пор, пока колода не иссякнет и затем процесс начинается заново.
В 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, обращаться к нему, сравнивать значения и, при необходимости, менять их

[laimas]

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

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

[Dilettante_Pro]

BOWTIE,
Все игроки играют на одном компьютере? Где лежит колода?

[BOWTIE]

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

В реальности у нас эта игра называлась "Общажная" и подразумевала игру именно следующим образом: с колоды, лежащей вверх рубашкой, снимается игроками по очереди по карте. К примеру, если кому-то выпала Дама, то этот игрок придумывает тему (например марки автомобилей), озвучивает ее и называет первый объект из этой темы -
Ауди, остальные продолжают по очереди до тех пор, пока кто-то не затупит. Кто затупил, пьет. Хочу реализовать ее именно таким образом.

[Dilettante_Pro]

BOWTIE,
Нужен просто массив с картинками - показывать выпавшую

[BOWTIE]

Да, все играют на одном компьютере. Нужна просто визуализация колоды в случае, если реальной колоды карт под рукой нет.
В последствии, кстати, хочу реализовать такое приложения на МУ. Главное, понять логику того, как это должно работать.

[laimas]

Да, все играют на одном компьютере.

А пишите веб.

Выбранную карту можно показывать отдельно, можно сверху колоды. Реализация этого не сложная, "раскадровку" игры своей опишите, а из нее уже будет видна и верстка, и действия необходимые.

[Dilettante_Pro]

Как-то так...

<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>

[BOWTIE]

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

P.S. В последствии хочу добавить: анимацию переворачивания карты с рубашки на лицо, анимацию растворения карты, чтобы на ее месте появилась следующая, таймер (или как он там называется) оставшихся в колоде карт.

[рони]

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>