JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karte</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="game">
<div id="deck"></div>
<div id="hand"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
#deck {
display: flex;
justify-content: space-around;
position: relative;
}
.card {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
border: 1px solid black;
}
#deck .card:last-child {
transition: transform 0.3s ease;
}
#deck .card:last-child:hover {
transform: translateY(-20px);
}
JavaScript
// grab elements
let game = document.getElementById('game');
let deckEl = document.getElementById('deck');
let hand = document.getElementById('hand');
// global variables
let arr = [{
card: 1,
text: "Attack"
}, {
card: 2,
text: "Attack"
}, {
card: 3,
text: "Attack"
}, {
card: 4,
text: "Shield"
}, {
card: 5,
text: "Shield"
}, {
card: 6,
text: "Shield"
}, {
card: 7,
text: "Parry"
}, {
card: 8,
text: "Parry"
}, {
card: 9,
text: "Parry"
}];
let cardsInHand = [];
// shuffling the deck with selected deck as argument
function shuffleDeck(array) {
let i = array.length;
while (i--) {
const i2 = Math.floor(Math.random() * i);
[array[i], array[i2]] = [array[i2], array[i]];
}
}
// drawing cards with card number as argument
function drawCards(cardAmount) {
for (cardAmount; cardAmount > 0; cardAmount--) {
cardsInHand.push(arr[arr.length - 1]);
arr.pop();
}
}
// generate deck element
function generateDeck() {
let cardOutline = 200;
arr.forEach(card => {
let cardEl = document.createElement('div');
cardEl.classList.add('card');
cardOutline -= 3;
cardEl.style.top = cardOutline + "px";
console.log(cardEl.style.top);
deckEl.appendChild(cardEl);
})
}
generateDeck();
shuffleDeck(arr);
drawCards(3);