JavaScript Game Learn how to apply JavaScript to make a Battle Card Game no Libraries DOM code array
JavaScript Battle Cards Game using Array methods
Get the course https://www.udemy.com/course/javascri...
Using JavaScript to create an interactive game, this exercise will demonstrate how to build a deck of cards. How to track players and create the output for the game play. Applying logic to determine which player wins and how many cards are left for each.
By using various array methods this will enable the application to track player status, and provide output for the game.
Objective of the game is to draw the highest card in the round, the player that draws the highest card from their deck wins. The winner of the round collects all the cards that were played in that round. Ties will happen, this results in a run off between the winners for the pot of cards in play. The players who tied, will go additional rounds drawing the next card in their deck until one player wins the round. That player will win and collect all the cards played in the round including the tie game cards.
The game will be dynamic, where the number of players will be set in the game values, and the game will work the same regardless of how many players are in the game. You can use the HTML and CSS as starting code, or customize the CSS and page styling as desired. The CSS will enhance the appearance of the game, and not designed to change the actual game play. JavaScript will be used to create page elements, and add the various classes to those elements. Within the HTML we only have the one container element with a class of game.
In this coding example we will be adding array values into other arrays, and selecting the highest value from an array of numbers. Using the 3 dots or spread operator will give us a way to pass the array into the argument and have the results be treated as the array was a set of values not contained in an array. When three dots (…) is used it expands an array into a list. This allows a function to accept an indefinite number of arguments as an array providing a way to use an array like a set of values. The example below will outline the different outputs in function a and function b for the arguments with and without the 3 dots.
const arr = [1,2,4,5];
function a(...vals){
console.log(vals);
};
a(...arr);
function b(vals){
console.log(vals);
};
b(...arr);
The code will use many array methods and several Math methods. Math.max() function will return the largest of the numbers given as input parameters, or NaN if the parameter isn't a number and cannot be converted into a number.
Exercise :
Create a function that can be used to make page elements with parameters of element tag, parent element, content of element, and class of element. This can now be used to create elements quickly within the code.
Setup the game board, with elements for the game area, a button for the game play and a message area for player communication from the game.
Create a global game object that will hold the number of players, the card decks for each player, and the elements in an array that the player will need for visuals in the game play. (card view and score action feedback)
Create a data array with card details, all of the suits and the values to be used in the main deck of cards. If you use the suits HTML character values, these can then be reused when outputting the visuals in the application. (♠ ♥ ♦ ♣)
Create a main deck array that will be populated with the card deck. Create a function to build the deck of cards. buildDeck()
In the buildDeck() function, loop through all the card data, loop through the suits as well as the values of the cards in order to construct a typical deck of 52 cards. Create a card object with data that can then be used to output visuals for the card and make the calculations of the card values.
Shuffle the deck once it's built, you can use the array sort method.
Add the players to the game. Create a function to add players. addPlayers()
In the addPlayers() function, calculate the number of cards each player will get from the main deck.
Using a for loop, loop through each player to add them to the page, and add the player data to them including the deck of cards for that player. Add the page elements, player info, card display area, score and feedback on the round. Add these elements into arrays contained within the game object. The arrays can then be selected for each player as by using the index value of the player. The index values will be inline with the array starting at 0 for the first player index.
Using slice select from the main deck the start and end position for that player's cards. This can be calculated using the last end position, setting that as start. Use that start and add the number of cards for each player to get the end value for the slice.
Check out my Website for more details at https://basescripts.com/
Subscribe - / @laurencesvek. .
In questa pagina del sito puoi guardare il video online JavaScript Game Learn how to apply JavaScript to make a Battle Card Game no Libraries DOM code array della durata di ore minuti seconda in buona qualità , che l'utente ha caricato Laurence Svekis 30 gennaio 2022, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 1,370 volte e gli è piaciuto 15 spettatori. Buona visione!
