Objetos em JS

Front-end JavaScript
#1

Preciso criar um objeto com os possíveis naipes e números (faces). Esse objeto tem que ter setters e getters, além de um método shuffle que determina naipe e face (como se tirassem carta aleatória do baralho). O código abaixo está dando o erro “naipe is not defined”. Podem me ajudar?

<!DOCTYPE html>
<html> 
<head>
	<title>Testes</title>

<script>
/*Write a constructor function for a Card object with properties of suit (diamonds, hearts, spades, or clubs) and face (ace, 2, 3 ...king). Add methods to set the values of suit and face. Can you include a shuffle method to set the suit and face properties to represent a random card from the deck? (Hint: Use the Math.random() method*/
function Card(){
	this.naipe = ['paus', 'ouros', 'copas', 'espadas'];
	this.face = ['A', 'K', 'Q', 'J', '10', '9', '8', '7', '6', '5', '4', '3', '2'];

	this.setNaipe = function(){
		this.naipe = naipe;
	}

	this.setFace = function(){
		this.face = face;
	}	

	this.shuffle = function(){
		this.naipe = naipe[Math.floor(Math.random() * naipe.length)];
		this.face = face[Math.floor(Math.random() * naipe.length)];
	}

}

var carta = new Card();
carta.shuffle();
alert('Naipe ' + carta.naipe);
alert('Face ' + carta.face);

</script>		

</head>
<body> 


</body> 
</html>
#2

O problema é que na funçao shuffle, você está referenciando naipe, sem usar o “this.” antes. Se colocar o “this.” antes seu código vai funcionar a primeira vez.

Na segunda vez que tentar usar a funçao shuffle, os array com todos naipes e faces foram transformados no valor do primeiro shuffle.

2 curtidas
#3

Realmente foi a falta do this que ocasionou o problema alterei o seu código para teste. Segue código modificado.

<!DOCTYPE html>
<html> 
<head>
	<title>Testes</title>

<script>
function Card(){
	this.naipe = ['paus', 'ouros', 'copas', 'espadas'];
	this.face = ['A', 'K', 'Q', 'J', '10', '9', '8', '7', '6', '5', '4', '3', '2'];

	this.setNaipe = function(){
		this.naipe = naipe;
	}

	this.setFace = function(){
		this.face = face;
	}	

	this.shuffle = function(){
		var rando = Math.random();
		var n = Math.floor(rando * this.naipe.length);
		var f = Math.floor(Math.random() * this.naipe.length);
		

		this.naipe = this.naipe[n];
		this.face = this.face[f];
	}

}



function viraCarta(){
	var carta = new Card();
	carta.shuffle();
	alert('Naipe ' + carta.naipe);
	alert('Face ' + carta.face);
}

</head>
<body> 
<button onclick="viraCarta();">CLICK</button>

</body> 
</html>
1 curtida
#4

Seu código ainda tem bug… se precisar usar shuffle novamente, o array não existe mais e foi isso que o @AbelBueno tentou explicar…

Você precisa ter as listas “vivas” no código o tempo todo…

function Card(){
    this.naipes = ['paus', 'ouros', 'copas', 'espadas'];
    this.faces = ['A', 'K', 'Q', 'J', '10', '9', '8', '7', '6', '5', '4', '3', '2'];
    this.naipe = null;
    this.face = null; //sim, js aceita nulo!!!

    this.setNaipe = function(naipe){ //faltou passar o param...
        this.naipe = naipe;
    }

    this.setFace = function(face){ //faltou passar o param...
        this.face = face;
    }

    this.shuffle = function(){
        this.naipe = this.naipes[Math.floor(Math.random() * this.naipes.length)];
        this.face = this.faces[Math.floor(Math.random() * this.faces.length)]; //estava naipe antes, errado!!!
    }
}

Assim você pode usar shuffle quantas vezes quiser…

var carta = new Card();

carta.setNaipe('ouros');
carta.setFace('10');
carta.shuffle();

alert('Naipe ' + carta.naipe);
alert('Face ' + carta.face);

carta.shuffle();

alert('Naipe ' + carta.naipe);
alert('Face ' + carta.face);
2 curtidas