How to Split 52 card Into 26 card in javascript-CodePudding

I Creating A Card game in JavaScript for 2 players. Facing some issue that i unable to split the cards for 2 players, right now all the 52 cards displaying for full page. I want to split 52 cards into 26 cards like playing 2 Players. Need to spilt the 52 card for 2 players. I tried all the way but not working for me. I hereby attached HTML, CSS and JS.

Kindly help regarding the same.

var cards = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
var suits = ["diamonds", "hearts", "spades", "clubs"];
var deck = new Array();

function getDeck()
{
    var deck = new Array();
    
    for(var i = 0; i < suits.length; i  )
    {
        for(var x = 0; x < cards.length; x  )
        {
            var card = {Value: cards[x], Suit: suits[i]};
            deck.push(card);
        }
    }
    return deck;
}

function shuffle()
{
    // for 1000 turns
    // switch the values of two random cards
    for (var i = 0; i < 1000; i  )
    {
        var location1 = Math.floor((Math.random() * deck.length));
        var location2 = Math.floor((Math.random() * deck.length));
        var tmp = deck[location1];

        deck[location1] = deck[location2];
        deck[location2] = tmp;
    }

    renderDeck();
}

function renderDeck()
{
    document.getElementById('deck').innerHTML = '';
    for(var i = 0; i < deck.length; i  )
    {
        var card = document.createElement("div");
        var value = document.createElement("div");
        var suit = document.createElement("div");
        card.className = "card";
        value.className = "value";
        suit.className = "suit "   deck[i].Suit;

        value.innerHTML = deck[i].Value;
        card.appendChild(value);
        card.appendChild(suit);

        document.getElementById("deck").appendChild(card);
    }
}

function load()
{
    deck = getDeck();
    shuffle();
    renderDeck();
}

window.onload = load;
function split()
{
const list = cards()
const half = Math.ceil(list.length / 2);    
const firstHalf = list.slice(0, half)
const secondHalf = list.slice(-half)
}

.deck
{
    width:50%;
    margin: 20px auto;
    background:dodgerblue;
    border:solid 10px black;
    padding: 10px;
    border-radius:10px;
    text-align: center;
    color:white;
}

.card
{
    padding: 10px;
    border: solid 1px #808080;
    background-color: white;
    display: inline-block;
    border-radius: 10px;
    font-size: 14pt;
    text-align: center;
    color:black;
    margin: 3px;
}

.btn
{
    background:white;
    padding: 10px 20px;
    border-radius:30px;
    margin: 10px;
    display:inline-block;
}

.card .value{
    font-size:15pt;
    font-family: sans-serif;
}

.card .suit
{
    background-image: url('card.png');
    height: 100px;
    width: 90px;
}

.card .diamonds
{
    background-position-y: 100px;
}

.card .hearts
{
    background-position-x: 90px;
}

.card .clubs
{
    background-position-x:90px;
    background-position-y:100px;
}

<html>
<head>
    <link rel="stylesheet" href="main.css">
    <script type="text/javascript" src="main.js"></script>
   

</head>

<body>
    <div >
        <h1>A Deck of Cards</h1>

        <a href="javascript:void(0)"  onclick="shuffle()">Shuffle</a>
        <div id="deck"></div>
    </div>
</body>
</html>

CodePudding user response：

You can try it :

const cards = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"]
const suits = ["diamonds", "hearts", "spades", "clubs"]
let player1 = player2 = []
let deck = cards.reduce((res, card) => [...res, ...suits.map(suit => ({Value: card, Suit: suit}))], [])
const deckEle = document.getElementById('deck')
const deckplayer1 = document.getElementById('player1')
const deckplayer2 = document.getElementById('player2')
const shuffle = () => {
  let currentIndex = deck.length,  randomIndex
  while (currentIndex != 0) {
    randomIndex = Math.floor(Math.random() * currentIndex)
    currentIndex--
    [deck[currentIndex], deck[randomIndex]] = [deck[randomIndex], deck[currentIndex]]
  }
  deckplayer1.innerHTML = ''
  deckplayer2.innerHTML = ''
  renderDeck(deckEle, deck)
}

const renderDeck = (div, arr) => {
    div.innerHTML = ''
    for(let i = 0; i < arr.length; i  )
    {
        let card = document.createElement("div")
        let value = document.createElement("div")
        let suit = document.createElement("div")
        card.className = "card"
        value.className = "value"
        suit.className = "suit "   arr[i].Suit

        value.innerHTML = arr[i].Value
        card.appendChild(value)
        card.appendChild(suit)

        div.appendChild(card)
    }
}
renderDeck(deckEle, deck)
const split = () => {  
  deckEle.innerHTML = ''
  player1 = deck.slice(0, deck.length/2)
  renderDeck(deckplayer1, player1)
  player2 = deck.slice(-deck.length/2)
  renderDeck(deckplayer2, player2)
}

.deck
{
    width:50%;
    margin: 20px auto;
    background:dodgerblue;
    border:solid 10px black;
    padding: 10px;
    border-radius:10px;
    text-align: center;
    color:white;
}

.player {
  width : 50%;
  display: table-cell;
}

.card
{
    padding: 10px;
    border: solid 1px #808080;
    background-color: white;
    display: inline-block;
    border-radius: 10px;
    font-size: 14pt;
    text-align: center;
    color:black;
    margin: 3px;
}

.btn
{
    background:white;
    padding: 10px 20px;
    border-radius:30px;
    margin: 10px;
    display:inline-block;
}

.card .value{
    font-size:15pt;
    font-family: sans-serif;
}

.card .suit
{
    background-image: url('card.png');
    height: 100px;
    width: 90px;
}

.card .diamonds
{
    background-position-y: 100px;
    background-color: green;
    opacity: 0.2;
}

.card .hearts
{
    background-color: red;
    opacity: 0.2;
    background-position-x: 90px;
}

.card .clubs
{
    background-color: yellow;
    opacity: 0.2;
    background-position-x:90px;
    background-position-y:100px;
}

<html>
<head>
    <link rel="stylesheet" href="main.css">
    <script type="text/javascript" src="main.js"></script>
   

</head>

<body>
    <div >
        <h1>A Deck of Cards</h1>

        <a href="javascript:void(0)"  onclick="shuffle()">Shuffle</a>
        <a href="javascript:void(0)"  onclick="split()">split</a>
        <div id="deck"></div>
        <div >
          <p>Player1</p>
          <div id="player1"></div>
        </div>
        <div >
          <p>Player2</p>
          <div id="player2"></div>
        </div>
    </div>
</body>
</html>

CodePudding user response：

There are a few problems in your code, but for the specific problem you are asking, this line is the problem:

const list = cards()

Your cards variable is not a callable function, it's an array. You cannot call it by cards().

You want this:

const list = cards

But cards is not a list of 52 cards, but a list from Ace to K. Your deck is deck, so you really just want:

const list = deck

var cards = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
var suits = ["diamonds", "hearts", "spades", "clubs"];
var deck = new Array();

function getDeck()
{
    var deck = new Array();
    
    for(var i = 0; i < suits.length; i  )
    {
        for(var x = 0; x < cards.length; x  )
        {
            var card = {Value: cards[x], Suit: suits[i]};
            deck.push(card);
        }
    }
    return deck;
}

function shuffle()
{
    // for 1000 turns
    // switch the values of two random cards
    for (var i = 0; i < 1000; i  )
    {
        var location1 = Math.floor((Math.random() * deck.length));
        var location2 = Math.floor((Math.random() * deck.length));
        var tmp = deck[location1];

        deck[location1] = deck[location2];
        deck[location2] = tmp;
    }

    renderDeck();
}

function renderDeck()
{
    document.getElementById('deck').innerHTML = '';
    for(var i = 0; i < deck.length; i  )
    {
        var card = document.createElement("div");
        var value = document.createElement("div");
        var suit = document.createElement("div");
        card.className = "card";
        value.className = "value";
        suit.className = "suit "   deck[i].Suit;

        value.innerHTML = deck[i].Value;
        card.appendChild(value);
        card.appendChild(suit);

        document.getElementById("deck").appendChild(card);
    }
}

function load()
{
    deck = getDeck();
    shuffle();
    renderDeck();
}

window.onload = load;
function split()
{
const list = deck;
const half = Math.ceil(list.length / 2);    
const firstHalf = list.slice(0, half)
const secondHalf = list.slice(-half)

console.log(list.length);
console.log(firstHalf.length);
console.log(secondHalf.length);
}

.deck
{
    width:50%;
    margin: 20px auto;
    background:dodgerblue;
    border:solid 10px black;
    padding: 10px;
    border-radius:10px;
    text-align: center;
    color:white;
}

.card
{
    padding: 10px;
    border: solid 1px #808080;
    background-color: white;
    display: inline-block;
    border-radius: 10px;
    font-size: 14pt;
    text-align: center;
    color:black;
    margin: 3px;
}

.btn
{
    background:white;
    padding: 10px 20px;
    border-radius:30px;
    margin: 10px;
    display:inline-block;
}

.card .value{
    font-size:15pt;
    font-family: sans-serif;
}

.card .suit
{
    background-image: url('card.png');
    height: 100px;
    width: 90px;
}

.card .diamonds
{
    background-position-y: 100px;
}

.card .hearts
{
    background-position-x: 90px;
}

.card .clubs
{
    background-position-x:90px;
    background-position-y:100px;
}

<html>
<head>
    <link rel="stylesheet" href="main.css">
    <script type="text/javascript" src="main.js"></script>
   

</head>

<body>
    <div >
        <h1>A Deck of Cards</h1>

        <a href="javascript:void(0)"  onclick="shuffle()">Shuffle</a>
        <a href="javascript:void(0)"  onclick="split()">Split</a>
        <div id="deck"></div>
    </div>
</body>
</html>