Hi. I have a problem with the code that I do not know how to fix.
It consists of a game players draw cards, each of their deck, and the first to draw three equal, wins.
But I can not start the game. After naming the players, I get an error: winner is not defined.
If you can tell me how I can fix, I’ll show you the code.
Thank you
//I create the variable types of the numbers, the clubs and the deck
var cards = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var suits = ["diamonds", "hearts", "spades", "clubs"];
var deck = new Array();
var player = new Array();
function getDeck() {
var deck = new Array();
//load the deck of cards
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 deal() {
// take the last card out of the deck
var card = deck[deck.length - 1];
deck.splice(deck.length - 1, 1);
return card;
}
function shuffle() {
// change two random cards of position 1000 times
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;
}
}
function renderDeck(deck, number) {
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" + number).appendChild(card);
}
}
function game(deck) {
var cont = new array();
for (var i = 1; i < 10; i++) {
//I create an accountant for each of the numbers in the deck
cont[i] = 0;
}
//score counter
var score = 0;
//I create a new deck to contain the cards that I am taking out
var newDeck = "";
//while none of the counters reaches 3, the game continues
while (cont[1] < 3 || cont[2] < 3 || cont[3] < 3 || cont[4] < 3 || cont[5] < 3 || cont[6] < 3 || cont[7] < 3 || cont[8] < 3 || cont[9] < 3 || cont[10] < 3) {
//I take out the last card in the deck
newDeck[score] = deck.pop();
//I look for what value corresponds to the letter and raise the account of your corresponding counter
if (newDeck[score].value = 1) {
cont[1]++;
}
else if (newDeck[score].value = 2) {
cont[2]++;
}
else if (newDeck[score].value = 3) {
cont[3]++;
}
else if (newDeck[score].value = 4) {
cont[4]++;
}
else if (newDeck[score].value = 5) {
cont[5]++;
}
else if (newDeck[score].value = 6) {
cont[6]++;
}
else if (newDeck[score].value = 7) {
cont[7]++;
}
else if (newDeck[score].value = 8) {
cont[8]++;
}
else if (newDeck[score].value = 9) {
cont[9]++;
}
else {
cont[10]++;
}
//increase the score counter
score++;
}
//I return the score and the deck with the resulting cards
return score, new Deck;
}
function players() {
//I wonder how many players will be
var number = prompt("¿Cuántas personas van a jugar?", "2");
// depending on how many they are, I create the same number of prompts to ask their names
// and store them in localStorage
for (var i = 0; i < number; i++) {
player[i] = prompt("¿Cómo se llama el jugador número " + i + "?");
}
//since localStorage only allows me to save Strings, I use stringify to pass the array
localStorage.setItem('nickName', JSON.stringify(player));
//I return the array of players
return player;
}
function myFunction() {
players();
for (var i = 0; i < player.lenght; i++) {
//create a div to put the information of each player
var playerTitle = document.createElement("div");
var playerName = document.createTextNode(player[i]);
playerTitle.appendChild(playerName);
playerTitle.classname = "playerTitle";
document.getElementById("results").appendChild(playerTitle);
var deckShow = document.createElement("div");
deckShow.id = "deck" + i;
document.getElementById("results").appendChild(deckShow);
}
//I make the game for each player
for (var i = 0; i < player.lenght; i++) {
//initialize the decks
deck[i] = getDeck();
shuffle();
//create the game
game(deck[i]);
console.log(game);
//show the deck
renderDeck(newDeck, i);
//save the score in an array to pass it to localStorage
var finalScore = "";
finalScore[i] = score;
//show the result
document.getElementById("playerTitle" + i).innerHTML = player[i] + " ha conseguido su objetivo en " + score + "turnos.";
//I generate a tuple to check the winner
const winner = (player[i], score)
//I pass the array to localStorage
localStorage.setItem('score', JSON.stringify(finalScore));
//I determine the winner
console.log(players);
console.log(deck);
}
var which = Math.min(...winner.score);
for (var i = 0; i < player.lenght; i++) {
if (which == winner[i].score) {
document.getElementById("finalScore").innerHTML = "El ganador es " + winner[i].player;
}
else { }
}
// HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Lobster|Righteous" rel="stylesheet">
<title>Cartas - Ejercicio 1 - Alba Jato PEC</title>
<link rel="stylesheet" href="cartas.css">
</head>
<body>
<h1 id="title">¡Consigue 3 iguales!</h1>
<p>Dale al botón e inicia el juego</p>
<p><button onclick="myFunction()">¡Inicia el juego!</button></p>
<div id="results"></div>
<div id="finalScore"></div>
<script src="cartas.js"></script>
</body>
</html>
// css code
#title {
font-family: 'Lobster', cursive;
font-size: 75px;
padding-left: 25px;
margin:0;
}
body{
color: #80727B;
font-family: 'Righteous', cursive;
font-size: 25px;
}
#finalScore {
margin: 25px;
background-color: #80727B;
color: white;
width: 650px;
}
.card
{
border: solid 1px #aaa;
border-radius: 9px;
width: 95px;
height: 150px;
float:left;
background-color: white;
padding: 3px 3px 3px 3px;
}
.card .value{
font-size:15pt;
font-family: sans-serif;
}
.card .suit
{
background-image: url('http://www.thatsoftwaredude.com/images/post/0f631eeb-6c4a-4bfd-9f86-e0a08ae8584b.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;
}