Photo by Karim MANJRA on Unsplash
How to create a JavaScript Chrome Extension Card Game
A poker card game
Table of contents
No headings in the article.
Playing games is one of the most popular activities in this generation. Lots of people play to have a good time, and some play to make money.
I built my own game using pure Javascript. a card game played by two players who can personalize the game to their liking. Just like any other poker or blackjack game, there are rules to the game, and I use Javascript to bring these rules to life in the game. Using If statements, JavaScript functions, loops, string literals, and arrays. This is a great project for someone who is learning JavaScript to practice the core fundamentals of JavaScript.
Generating random numbers.
Let's get to the game setup. for the game to be fair and for the players not to cheat on each other. When the player presses the start game button, a random number is generated. I use the Javascript method Math.random(). Math.random() returns random numbers from 0 to less than 1. The maximum number in a card game is 15, so I multiplied Math.random() by 15 and then floored the line of JavaScript with another Javascript method called Math.floor() to generate random whole numbers. Adding 1 returns the 15 value; otherwise, the counting stops at 14. I would not advise someone to use the Math.random() method as it relies on a weak random number generator and can be of great risk when used in code for highly security-critical applications; the process can be easily hacked or the preceding random numbers can be easily guessed and put the entire system at risk.
Check out the piece of code below
function generateRandomCard() {
let randomCard = Math.floor(Math.random() * 15) + 1
if(randomCard === 1){
return 15 && 1
} if (randomCard > 10 ){
return 10
} else{
return randomCard
}
}
Displaying the player message.
In the function to display the message or the output of the game, I used the for and if statements to write out the argument and the condition of the game to pop out the right message when the player is playing. The conditions are very simple;
A player must have at least two random cards in his/her hands, the sum of these two cards must be 21 for the player to win.
If the sum of the two cards is above 21, then the player has lost the game.
If the sum of the two cards is less than 21, the player is eligible to pick another random card and the sum of the three cards must be 21 for the player to win.
If the sum of the three cards is more than 21, the player has lost the game, in case the sum of the three cards is still less than 21, the player can pick another random fourth card.
The same condition is applied to player 2 of the game.
function message(){ for(let i = 0; i < add.length; i++){ sum1 = add[i] + spade } let Name = document.getElementById("input-button").value if(add === 21){ sentence = `${Name} has won the Game` hasWon = true } else if (add < 21){ sentence = `${Name} Do you want to draw another card` } else { sentence = `${Name} You are out of the game` hasNotWon = false } messages.textContent = sentence }
Conditions for the game
When the player is starting a game, a set of conditions has to be met. The game has to be in play or not yet won/lost.
The first two cards are added.
The card game is a two-player game and both must play together.
The first player to drop out losses and the player who is still in play wins, even though the sum of the cards is not 21.
Once the start game button is clicked it is disabled. The same condition is applied to player 2.
The last button is to reload the page when the game is done and the players want to start a new game.
startGameOne.addEventListener("click", function startOne(){
hasNotWon = true
let cardOne = generateRandomCard()
let cardDrawn1 = generateRandomCard()
spade = [cardOne, cardDrawn1]
add = cardOne + cardDrawn1
card1.textContent += `${cardOne} ${cardDrawn1}`
startGameOne.disabled = true
})
Uploading the file to the chrome extension
When uploading the file to the Chrome extension, there should be a launch.json file to provide configuration details to run and debug the code in Visual Studio (since I am using VS Code).
.JSON file provides configuration details to run and debug the code in Visual Studio, especially in instances where the codebase uses custom build tools that Visual Studio does not recognize. Launch.JSON specifies command-line arguments for debugging, accessed via the solution explorer. .JSON has keys that are wrapped in quotes using the JavaScript notation (way of writing). Before uploading the file, turn your Chrome extension into developer mode. Go to the extension logo on Chrome, click Manage Extensions, turn on the Developer Mode option, choose Load unpack, and you will be redirected to where you save the file.
The browser action contains what the browser should display.
default-popup name is the name of the site that's displayed on the browser.
default icon contains the image of the page.
The default launch.Json version for the Chrome extension is 2 and above.
{
"launch_version": 2,
"version": "1.0",
"name": "Steven Card Game",
"browser_action": {
"default_popup": "cardplayer.html",
"default_icon": "card.png"
}
}
Resources