CODEWITHSUNDEEP
javascriptarrays
johnsmith1
johnsmith1

Reputation: 9

JavaScript Card Game

I am trying to make a card game. Player 1 and player 2 are given a random card and the person with the highest card wins. Below is a simple array for a suit of cards (spades). I have saved the image file for the cards in a folder called 'images' as seen below.

My question is: How do I get this array to display the cards, and to randomly assign a card to two players, and have the highest card win? I understand an if/else/else if statement may be needed to determine the winner, but how do I go about distributing my array of cards to two players? Would it be some sort of function? Below is the array I have created:

var cards = [];   //variable for cards 

cards [0] = 'images/aceofspades.jpg';
cards [1] = 'images/twoofspades.jpg';
cards [2] = 'images/threeofspades.jpg';
cards [3] = 'images/fourofspades.jpg';
cards [4] = 'images/fiveofspades.jpg';
cards [5] = 'images/sixofspades.jpg';
cards [6] = 'images/sevenofspades.jpg';
cards [7] = 'images/eightofspades.jpg';
cards [8] = 'images/nineofspades.jpg';
cards [9] = 'images/tenofspades.jpg';
cards [10] = 'images/jackofspades.jpg';
cards [11] = 'images/queenofspades.jpg';
cards [12] = 'images/kingofspades.jpg';

This bit of code below is my idea of what to do next, but I am not so sure if this is correct:

function choose (cards);
document.image [cards].src = cardsimage [cards];

Upvotes: 0

Views: 4105

Answers (3)

webta.st.ic
webta.st.ic

Reputation: 5179

    <style>
        .cards {
            width: 200px;
            height: 200px;
        }

        img {
            width: 100%;
            height: 100%;
        }

        #showWinner {
            width: 200px;
            height: 30px;   
        }
    </style>

    <script type="javascript/text">
        $(document).ready(function(){
            var cardPlayer1 = 0;
            var cardPlayer2 = 0;
            var cards = [];   //variable for cards 

            cards [0] = 'images/aceofspades.jpg';
            cards [1] = 'images/twoofspades.jpg';
            cards [2] = 'images/threeofspades.jpg';
            cards [3] = 'images/fourofspades.jpg';
            cards [4] = 'images/fiveofspades.jpg';
            cards [5] = 'images/sixofspades.jpg';
            cards [6] = 'images/sevenofspades.jpg';
            cards [7] = 'images/eightofspades.jpg';
            cards [8] = 'images/nineofspades.jpg';
            cards [9] = 'images/tenofspades.jpg';
            cards [10] = 'images/jackofspades.jpg';
            cards [11] = 'images/queenofspades.jpg';
            cards [12] = 'images/kingofspades.jpg';

            $("#startGame").on("click",function(){
                $("#cardPlayer1").attr("src", '');
                $("#cardPlayer2").attr("src", '');
                $("#showWinner").html("");
                getPlayerCards();
            }); 
        });

        function getRandom() {
            var randomNumber = Math.floor(Math.random() * 12) //Get random between 0 and 12
            return randomNumber;
        }

        function getPlayerCards() {
            this.cardPlayer1 = this.getRandom();
            this.cardPlayer2 = this.getRandom();                
        }

        function displayCards() {
            $("#cardPlayer1").attr("src", '"' + cards[this.cardPlayer1] + '"'); //PUT URL PLAYER 1 TO IMG
            $("#cardPlayer2").attr("src", '"' + cards[this.cardPlayer2] + '"'); //PUT URL PLAYER 2 TO IMG

            if(this.cardPlayer1 > this.cardPlayer2) {
                $("#showWinner").html("Player 1 wins!");
            } else if (this.cardPlayer1 < this.cardPlayer2) {
                $("#showWinner").html("Player 2 wins!");
            } else {
                $("#showWinner").html("Player 2 wins!");
            }
        }
    </script>
<head>

<body>
    <img id="cardPlayer1" class="cards">

    <img id="cardPlayer2" class="cards">

    <div id="showWinner"></div>

    <button id="startGame">Get new cards</button>
</body>

Maybe something like this works.. You can use this for try it (maybe there are some errors, I coded really fast and without check if it works :D)

Best Regards

Upvotes: 0

Justinas
Justinas

Reputation: 43557

Try this code. Read comments for explanation

// All cards:
var cards = [
  'https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Playing_card_club_A.svg/2000px-Playing_card_club_A.svg.png',
  'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Playing_card_spade_2.svg/819px-Playing_card_spade_2.svg.png',
  'http://www.clipartbest.com/cliparts/9T4/ezn/9T4eznrjc.png',
];

function play() {
  // get random position. Math.random returns float between 0 and 1
  var p1 = Math.floor(Math.random() * cards.length); // will get integet between 0 and cards.length - 1
  var p2 = Math.floor(Math.random() * cards.length);

  // create new image element
  var img1 = document.createElement('img');
  var img2 = document.createElement('img');

  // set image source to be same as selected card
  img1.src = cards[p1];
  img2.src = cards[p2];

  // select cards holding elements
  var holder1 = document.getElementById('card1');
  var holder2 = document.getElementById('card2');

  // clear images from previous game
  holder1.innerHTML = "";
  holder2.innerHTML = "";

  // add images to it's holders
  holder1.appendChild(img1);
  holder2.appendChild(img2);

  // game logic. Compare array key to see who wins
  if (p1 > p2) {
    alert('Player 1 is winner!');
  } else if (p1 < p2) {
    alert('Player 2 is winner!');
  } else {
    alert('No winner!');
  }
}
.p1,
.p2 {
  float: left;
  width: 200px;
  height: 250px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  text-align: center;
}
img {
  height: 200px;
  display: inline-block;
}
button {
  width: 400px;
  font-size: 16px;
  color: white;
  background-color: #0040ff;
  border: 1px solid #7878ff;
  cursor: pointer;
}
<div class="play">
  <button onClick="play()">PLAY</button>
</div>
<div class="p1">
  <div class="header">Player 1</div>
  <span class="card-holder" id="card1"></span>
</div>
<div class="p2">
  <div class="header">Player 2</div>
  <span class="card-holder" id="card2"></span>
</div>

Upvotes: 1

Steven Kaspar
Steven Kaspar

Reputation: 1187

You set the src using document.getElementById(id).src = cards[0];. https://jsfiddle.net/stevenkaspar/490zm66v/

function startRound() {
 var p1_card_index = Math.floor(Math.random() * 13);// random bt 0-13
 var p2_card_index = p1_card_index;
 // make sure same card isn't drawn again
 while (p2_card_index == p1_card_index) {
  p2_card_index = Math.floor(Math.random() * 13);
 }
 // set the src and the alt of the <img/>
 document.getElementById('c1').src = cards[p1_card_index];
 document.getElementById('c1').alt = cards[p1_card_index];
 document.getElementById('c2').src = cards[p2_card_index];
 document.getElementById('c2').alt = cards[p2_card_index];

 // determine who won and give them points
 if (p1_card_index > p2_card_index) {
  p1_wins++;
  document.getElementById('w1').innerHTML = p1_wins;
 } else {
  p2_wins++;
  document.getElementById('w2').innerHTML = p2_wins;
 }
}

Upvotes: 0

Related Questions