Making A JavaScript Card Game with Object Oriented Programming
4 min readJan 2, 2021
You will need to make a folder called “game” with an index.html file, a main.js file, and a suit.png image.
You will need to write the code for these files in your favorite text editor(preferably VSCode).
This is what you put in the index.html file:
<!DOCTYPE html>
<html lang=”en”><head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial- scale=1.0"> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Card Game</title></head><body> <canvas id=”mycanvas” width=”700" height=”500"style=”border:2px solid Black”></canvas> <script src=”main.js”></script><div style=”display:none;”>
<img id=”source” src=”suit.png” width=”150" height=”115"> </div><script>
var counter = 0;
var score = 0;
const image = document.getElementById(‘source’);
image.onload = drawCard; function drawScore()
{
ctx.font = “20px Arial”;
ctx.fillStyle = “Red”;
ctx.fillText(“Score: “ + score, 310, 20);
} function drawCard()
{
let myColor = “black”;
let myX = 0;
let myY = 700;
ctx.fillStyle = “black”;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = “white”;
myCard.fillRect(170, 360, 150, 120);//Make card for Player 1if(myGame.players[0].currentCards[counter].getName() == "Clubs" )
myX = 700;if(myGame.players[0].currentCards[counter].getName() == "Hearts" )
{
myX = 700;
myY = 0;
}if(myGame.players[0].currentCards[counter].getName() == "Spades" )
myY = 0;ctx.drawImage(image, myX,myY, 500,600,210, 400, 75, 55);
ctx.font = "20px Arial";
ctx.fillStyle = myGame.players[0].currentCards[counter].getColor();
ctx.fillText(myGame.players[0].currentCards[counter].getNumber() , 180, 390);//Computerctx.fillStyle = "white";
myCard.fillRect(170, 60, 150, 120);myX = 0;
myY = 700;if(myGame.players[1].currentCards[counter].getName() == "Clubs" )
myX = 700;if(myGame.players[1].currentCards[counter].getName() == "Hearts" )
{
myX = 700;
myY = 0;
}if(myGame.players[1].currentCards[counter].getName() == "Spades" )
myY = 0;ctx.drawImage(image, myX,myY, 500,600,210, 100, 75, 55);
ctx.font = "20px Arial";ctx.fillStyle = myGame.players[1].currentCards[counter].getColor();
ctx.fillText(myGame.players[1].currentCards[counter].getNumber() , 180, 90);if(myGame.players[0].currentCards[counter].getValue() > myGame.players[1].currentCards[counter].getValue() )++score;drawScore();
counter++;
} var canvas = document.getElementById(“mycanvas”);
var ctx = canvas.getContext(“2d”);
var myCard = canvas.getContext(“2d”);
ctx.fillStyle = “black”;
ctx.fillRect(0, 0, canvas.width, canvas.height);
drawScore();</script><br>
<button onclick=”drawCard()”>Draw</button></body></html>
Here is the suit.png-
This is what you put in the main.js file:
class baseCard
{
constructor()
{
} getColor()
{
return 0;
} getName()
{
return 0;
} getNumber()
{
return 0;
} getValue()
{
return 0;
}}class Hearts extends baseCard
{
constructor(cardNumber, cardValue)
{
super();
this.num = cardNumber
this.value = cardValue
} getColor()
{
return “red”;
} getName()
{
return “Hearts”;
} getNumber()
{
return this.num;
} getValue()
{
return this.value;
}}class Diamonds extends baseCard
{
constructor(cardNumber, cardValue)
{
super();
this.num = cardNumber
this.value = cardValue
}
getColor()
{
return “red”;
} getName()
{
return “Diamonds”;
} getNumber()
{
return this.num;
} getValue()
{
return this.value;
}}class Clubs extends baseCard
{
constructor(cardNumber, cardValue)
{
super();
this.num = cardNumber;
this.value = cardValue; } getColor()
{
return “black”;
} getName()
{
return “Clubs”;
} getNumber()
{
return this.num;
} getValue()
{
return this.value;
}}class Spades extends baseCard
{
constructor(cardNumber, cardValue)
{
super();
this.num = cardNumber;
this.value = cardValue;
} getColor()
{
return “black”;
} getName()
{
return “Spades”;
} getNumber()
{
return this.num;
} getValue()
{
return this.value;
}}class playGame
{
constructor()
{
this.players = [];
} makeDeck()
{
this.cardArray = [];
let rank = [‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’, ‘10’,‘jack’, ‘queen’, ‘king’, ‘ace’]; let value = [2,3,4,5,6,7,8,9,10,11,12,13,14]; for(let i = 0; i < 13; i++)
{
this.cardArray.push(new Hearts(rank[i], value[i]));
this.cardArray.push(new Spades(rank[i], value[i]));
this.cardArray.push(new Diamonds(rank[i], value[i]));
this.cardArray.push(new Clubs(rank[i], value[i]));
}//Fisher Yates Shufflevar currentIndex = this.cardArray.length;while (0 !== currentIndex)
{
let randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
let temporaryValue = this.cardArray[currentIndex];
this.cardArray[currentIndex] = this.cardArray[randomIndex];
this.cardArray[randomIndex] = temporaryValue;
} return this.cardArray ;
}start()
{
let randoArray = this.makeDeck();
this.players.push(new Player());
this.players.push(new Player());
this.players[0].currentCards = randoArray.slice(0, 26);
this.players[1].currentCards = randoArray.slice(26, 52);
}}class Player
{ constructor()
{
this.currentCards = [];
}}let myGame = new playGame();
myGame.start();