For-Loop using function from a Constructor - javascript

I'm going through Codecademy's lesson on building a Blackjack game with Javascript.
I'm having trouble coming up with code to put in the for-loop. I'm supposed to write a "score" method in the Hand constructor. It should loop over all of the cards in the Hand, summing up the result of the "getValue" call to each and return that sum.
Can someone help me out please? Thank You.
Here's my attempt, the relevant code is inside the for-loop at the bottom:
// Card Constructor
function Card(s, n) {
var suit = s;
var number = n;
this.getSuit = function() {
return suit;
};
this.getNumber = function() {
return number;
};
this.getValue = function() {
if (number >= 10) {
return 10;
} else if (number === 1) {
return 11;
} else {
return number;
}
};
};
//deal function
var deal = function() {
var randNum = Math.floor(Math.random() * 13) + 1;
var randSuit = Math.floor(Math.random() * 4) + 1;
console.log(randNum, randSuit);
return new Card(randSuit, randNum);
};
function Hand() {
var handArray = [];
handArray[0] = deal();
handArray[1] = deal();
this.getHand = function() {
return handArray;
};
this.score = function() {
var sum;
for (var i = 0; i < handArray; i++) {
sum += handArray[i].getValue;
return sum;
}
};
};

Well something like this should work :
this.score = function() {
return handArray.reduce( function( memo, val){
return memo + val.getValue();
});
};

I think you need to return the score, outside of the loop, like so:
this.score = function() {
var sum;
for (var i = 0; i < handArray; i++) {
sum += handArray[i].getValue();
}
return sum;
};

This fixed it. Thanks for your help!
this.score = function(){
var sum =0;
for(var i =0; i<handArray.length; i++){
sum += handArray[i].getValue();
};
return sum;
};

Related

how can i return the count from a function

hi iam new to javascript, i am trying to return a count from the function my code is like below
my code
function moredbCount(contentMoreArray2, ArrHeading) {
var sampleArr = [];
for (var a = 0; a < contentMoreArray2.length; a++) {
if (ArrHeading !== 'More') {
var fullHeading = ArrHeading + '-' + contentMoreArray2[a].name;
} else {
fullHeading = contentMoreArray2[a].name;
}
sampleArr.push(fullHeading);
}
var sampleCount = sampleHeadingCount(sampleArr);
return sampleCount.then(function (resultantCount) {
return resultantCount; //Here iam getting some count like 10 and returning it to the function;
});
}
var contentCount;
var totalCount = moredbCount(contentMoreArray2, ArrHeading);
totalCount.then(function (resultantTotalCount) {
return contentCount = resultantTotalCount
});
// Here i want to use contentCount 10, But iam getting undefined
Thanks In advance
return contentCount = resultantTotalCount won't return the count, but rather the response of assignment. In contentCount = resultantTotalCount, you are basically assigning the value of resultantTotalCount to contentCount.
You should use
function moredbCount(contentMoreArray2, ArrHeading) {
var sampleArr = [];
for (var a = 0; a < contentMoreArray2.length; a++) {
if (ArrHeading !== 'More') {
var fullHeading = ArrHeading + '-' + contentMoreArray2[a].name;
} else {
fullHeading = contentMoreArray2[a].name;
}
sampleArr.push(fullHeading);
}
var sampleCount = sampleHeadingCount(sampleArr);
return sampleCount.then(function (resultantCount) {
return resultantCount; //Here iam getting some count like 10 and returning it to the function;
});
}
var contentCount;
var totalCount = moredbCount(contentMoreArray2, ArrHeading);
totalCount.then(function (resultantTotalCount) {
return resultantTotalCount
});

How to Write JavaScript Object like that

How to write an Object for using this object like below
var cal = new calculator;
cal.add(10).add(20).miniz(2).div(2);
console.log(cal.result()); // result 14
Here you go, this is one way to do it:
My Example
var calculator = function() {
this.curr = 0;
this.add = function(n) {
this.curr += n;
return this; // returning this at the end of each method is the key to chaining
};
this.miniz = function(n) {
this.curr -= n;
return this;
};
this.div = function(n) {
this.curr = this.curr / n;
return this;
};
this.result = function() {
return this.curr;
};
};
You need to change the instantiation to this:
var cal = new calculator();
Just to get you started:
function Calculator() {
var value = 0;
this.add = function (v) {
value += v;
return this;
};
this.result = function () {
return value;
};
}
var cal = new Calculator;
console.log(cal.add(10).result()); // result 10
may be this is will help some what..
var Calc = function(){
this.value = 0;
};
Calc.prototype.add = function(val){
this.value += val;
return this;
};
then you can use like new Calc().add(100).add(100)
but before make sure understood how prototyping is working,
for ref : a sample
function calculator(){
this.val = 0;
this.add = function(num){
this.val += num;
return this;
};
this.miniz = function(num){
this.val -= num;
return this;
};
this.div = function(num){
this.val /= num;
return this;
};
this.result = function(){
return this.val;
};
}

Javascript: scope effect despite order of execution

Please note: This is not a question about scope, per se. I understand that in order to make the code work, I should make a deep copy of the variable board rather than assigning var tboard = board. However, I am not clear why making a shallow copy has the effect I describe below.
I am experiencing something I find baffling. Basically, a global variable (board) gets altered and I have no clue how. board is initialized in the function NewGame() (which is called from select()) as an empty array. After it is initialized, nothing else is called until the user clicks a square on the board (assuming the user has selected Xs for simplicity). When that happens, the function playerMove() is called. The baffling thing is that console.log(board) at the top of playerMove() prints out an array that has an x is the clicked position and os everywhere else (ie not empty). This is bizarre because the board is empty at the end of select() (which called NewGame()) and nothing else should happen in between. To demonstrate this, I print out the function name at the top of each function and I print out the board variable in the select() function and playerMove() function to show that it changes despite nothing else being called. Please note that to get this behavior, refresh the page (otherwise the board variable starts out full of os). I think this must be somewhat an issue of scope (because I am not making a deep copy of board) but it's strange because I have no clue what is being called that is changing the variable before it gets printed out at the top of playerMove().
Here is the link to my pen and the code: http://codepen.io/joshlevy89/pen/MKjxop?editors=101
$(document).ready(function() {
var pSym; // player's symbol
var cSym; // computer's symbol
var board;
var whosMove; // can be "player" or "computer" or "neither"
var gameOver;
setup();
$("#newgame").on('click', '#X', select);
$("#newgame").on('click', '#O', select);
$("#restart").on('click', setup);
$("table").on('click', 'td', playerMove);
function playerMove()
{
console.log('playerMove');
console.log(board);
if (whosMove === "player")
{
var val = $(this).data('value');
$('#g' + val).text(pSym);
var arr = PositionToCoords(val);
board[arr[0]][arr[1]] = pSym;
var tboard = board;
var gc = gameCheck(tboard);
if (gc>=0)
{
endGame(gc);
setTimeout(function(){setup();}, 1000);
return;
}
whosMove = "computer";
computerMove();
}
}
function computerMove() {
console.log('computerMove');
//var p1 = Math.floor(Math.random() * 3);
//var p2 = Math.floor(Math.random() * 3);
var tboard = board;
var pos = chooseMove(tboard);
var arr = PositionToCoords(pos);
board[arr[0]][arr[1]] = cSym;
DrawPosition(arr[0], arr[1], cSym);
var tboard = board;
var gc = gameCheck(tboard);
if (gc>=0) {
endGame(gc);
setTimeout(function(){setup();}, 1000);
return;
}
whosMove = "player";
}
function chooseMove(inboard) {
console.log('chooseMove');
// get the possible moves
var moves=[];
var scores = [];
for (var i=1;i<10;i++) {
var arr = PositionToCoords(i);
if (inboard[arr[0]][arr[1]] === undefined) {
moves.push(i);
var tboard = inboard;
tboard[arr[0]][arr[1]] = cSym;
var gc = gameCheck(tboard);
scores.push(gc);
}
}
//console.log(moves);
//console.log(scores);
return moves[0]; // TEMPORARY
}
function endGame(gc) {
console.log('endGame');
var str;
if (gc===1) { // somebody won
if (whosMove==="player"){
str = "You Won!"
}
else {
str = "You Lost :(";
}
}
else if (gc === 0){//draw
str = "It's a draw."
}
html = '<div id="closer">' + str + '</div>';
$('#endgame').html(html);
}
function gameCheck(tboard) {
console.log('gameCheck');
// get symbol to check for
var sym;
if (whosMove === "player") {
sym = pSym;
} else {
sym = cSym;
}
// check if in a row
var hrow;
var vrow;
// check for horizonal row
for (var i = 0; i < 3; i++) {
hrow = true;
vrow = true;
for (var j = 0; j < 3; j++) {
if (tboard[i][j] !== sym) {
hrow = false;
}
if (tboard[j][i] !== sym) {
vrow = false;
}
}
if ((hrow) || (vrow)) {
return 1;
}
}
var fdrow = true;
var bdrow = true;
for (var i = 0; i < 3; i++) {
if (tboard[i][i] !== sym) {
fdrow = false;
}
if (tboard[i][2 - i] !== sym) {
bdrow = false;
}
}
if ((fdrow) || (bdrow)) {
return 1;
}
// otherwise, check if board is full
var full = true;
for (var i = 1; i < 10; i++) {
var arr = PositionToCoords(i);
if (tboard[arr[0]][arr[1]] === undefined) {
full = false;
break;
}
}
if (full === true) {
return 0;
}
// if neither 0 (tie) or win (1), return -1 (game not over)
return -1;
}
function select() {
console.log('select');
pSym = $(this).data('value');
$('#newgame').html('');
NewGame();
console.log(board);
}
function setup() {
console.log('select');
$('#endgame').html('');
html = '<div id="opener">Xs or Os? <div id="buttons">';
html += '<div id="X" data-value="X" class="btn btn-default">Xs</div>';
html += '<div id="O" data-value="O" class="btn btn-default">Os</div>';
html += '</div></div>';
$('#newgame').html(html);
}
function NewGame() {
console.log('NewGame');
$('td').empty();
board = new Array(3);
for (i = 0; i < 3; i++) {
board[i] = new Array(3)
};
if (pSym === "X") {
cSym = "O";
whosMove = "player";
} else {
cSym = "X";
whosMove = "computer";
computerMove();
}
}
function DrawPosition(p1, p2, sym) {
console.log('DrawPosition');
var pos = p1 * 3 + (p2 + 1);
$("#g" + pos).text(sym)
}
function PositionToCoords(pos) {
console.log('PositionToCoords');
var p1 = Math.ceil(pos / 3) - 1;
var p2 = ((pos - 1) % 3);
var arr = [p1, p2];
return arr;
}
});
Thanks in advance.
Simply add the break in the for loop fixes the problem. Am I missing anything?
function chooseMove(inboard) {
console.log('chooseMove');
// get the possible moves
var moves = [];
var scores = [];
for (var i = 1; i < 10; i++) {
var arr = PositionToCoords(i);
if (inboard[arr[0]][arr[1]] === undefined) {
moves.push(i);
var tboard = inboard;
tboard[arr[0]][arr[1]] = cSym;
var gc = gameCheck(tboard);
scores.push(gc);
break; // <<<<<<<<<<<< This break guarantees that the computer only makes one move
}
}
//console.log(moves);
//console.log(scores);
return moves[0]; // TEMPORARY
}

How to access variables within another function

I'm writing code for a blackjack game and have run into some problems. I have written two functions: one for the initial deal and one for each consecutive hit. this is the deal function:
var deck = [1,2,3,4,5,6,7,8,9,10,"Jack","Queen","King","Ace"];
function deal() {
var card1_val = Math.floor(Math.random() * deck.length);
var card2_val = Math.floor(Math.random() * deck.length);
var card1 = deck[card1_val];
var card2 = deck[card2_val];
var hand = card1 + ", " + card2;
{//card1 Conditionals
if (card1 == "Jack") {
card1_val = 10;
}
else if (card1 == "Queen") {
card1_val = 10;
}
else if (card1 == "King") {
card1_val = 10;
}
else if (card1 == "Ace") {
card1_val = 11;
}
}
{//card2 Conditionals
if (card2 == "Jack") {
card2_val = 10;
}
else if (card2 == "Queen") {
card2_val = 10;
}
else if (card2 == "King") {
card2_val = 10;
}
else if (card2 == "Ace") {
card2_val = 11;
}
}
var res = card1_val + card2_val;
document.getElementById("result").innerHTML = hand;
//document.getElementById("test").innerHTML = card1_val + ", " + card2_val;
if (res > 21) {
alert("Blackjack!");
}
}
This is the hit function:
function hit() {
var card_val = Math.floor(Math.random() * deck.length);
var nhand = deck[card_val];
bucket = hand + nhand
}
If you look at hit() I am using the var hand from deal(). I can't make it global because I need the value to be a fresh random each time. How do I access this same variable without rewriting lines of code? Any help would be appreciated.
You can either
Declare hand outside of the function scope with just var hand; and use hand in the deal function without redeclaring it as a var;
Or use window.hand when declaring hand in the deal function
global variables are evil. i would take more object oriented approach, like this
var Hand = function(bjcallback) {
this.cards = [];
this.onblackjack = bjcallback;
this.deck = [1,2,3,4,5,6,7,8,9,10,"Jack","Queen","King","Ace"];
this.values = {
"Jack": 10,
"Queen": 10,
"King": 10,
"Ace": 11
};
this.sum = function() {
var i, x, res = 0;
for (i in this.cards) {
x = this.cards[i];
if (typeof(x) != 'number') { x = this.values[x] };
res += x;
};
return res
};
this.pick = function() {
var pos = Math.floor(Math.random() * this.deck.length);
var card = this.deck[pos];
console.log(card);
return card
};
this.deal = function(n) {
n = n || 2;
for (var i=0; i<n; i++) this.cards.push(this.pick())
};
this.hit = function() {
this.cards.push(this.pick());
if (this.sum() > 21) this.onblackjack();
}
}
var hurray = function() { alert('Blackjack!') };
var hand = new Hand(hurray);
hand.deal();
hand.hit();
note that i'm not much into cards so i might have confused terminology or counting

How to implement JavaScript Cascades..?

I'm reading "JavaScript the Good Parts" and it mentions cascades as a way to do method chaining in JavaScript but I can't find any code that explains how these methods should be implemented.
getElement('myBoxDiv').
move(350, 150).
width(100).
height(100).
color('red').
border('10px outset').
padding('4px').
appendText("Please stand by").
on('mousedown', function (m) {
this.startDrag(m, this.getNinth(m));
}).
on('mousemove', 'drag').
on('mouseup', 'stopDrag').
later(2000, function ( ) {
this.
color('yellow').
setHTML("What hath God wraught?").
slide(400, 40, 200, 200);
}).
tip('This box is resizeable');
The trick is that the method itself should only return this. That way, each time you chain these methods together, the object itself is the base of the call.
SomeObj.width(40) would then return just SomeObj, so adding the call .height(50) would function, and continue along.
In a cascade, we can call many methods on the same object in sequence in a single statement.
Lets try this example,
var Calc = function(){
this.result=0;
this.add = function(){
for(var x=0; x<arguments.length; x++){
this.result += arguments[x];
}
return this;
};
this.sub = function(){
for(var x=0; x<arguments.length; x++){
this.result -= arguments[x];
}
return this;
};
this.mult = function(){
if(this.result==0)this.result = 1;
for(var x=0; x<arguments.length; x++){
this.result *= arguments[x];
}
return this;
};
this.div = function(){
if(this.result==0) return this;
for(var x=0; x<arguments.length; x++){
this.result /= arguments[x];
}
return this;
};
this.eq = function(){
return this.result
};
}
var cal1 = new Calc();
cal1.add(3).sub(1).add(2) // Here result = 4;
These methods always return the object they belong to this, e.g.:
var txtProcesor = {
txt: '',
removeWhite: function () {
this.txt = this.txt.replace(/\s+/g, '');
return this;
},
evenToUp: function () {
var res = "";
for (var i = 0; i < this.txt.length; i++) {
if (i % 2 == 0) res += this.txt[i].toUpperCase();
else res += this.txt[i];
}
this.txt = res;
return this;
}
}
txtProcesor.txt = " abc def ";
alert(txtProcesor.removeWhite().evenToUp().txt);
This is basically the way JQuery works. The idea is to make each of those functions return objects which contain those functions again so to speak.
EDIT: You can download JQuery and look at the source code for it, because this is exactly what is going on in that library.
Here is a demo combine cascade with callback, and the usage, hope this will help.
let calNum = function(num) {
this.num = num;
this.add = function(dif, callback) {
this.num = this.num + dif;
callback(this.num);
return this;
}
this.sub = function(dif, callback) {
this.num = this.num - dif;
callback(this.num);
return this;
}
this.multi = function(m, callback) {
this.num = this.num * m;
callback(this.num);
return this;
}
return this;
};
calNum(3).add(3,function(result) {
console.log(result);
}).multi(2, function(result) {
console.log(result);
}).sub(1, function(result) {
console.log(result);
}); // The final result is 11
I was also going through the same book but didn't find any implementation of the concept. However I found this nice and short blog on this.
Here is how you can enable cascades:
function number(value) {
this.value = value;
this.plus = function (sum) {
this.value += sum;
return this;
};
this.return = function () {
return this.value;
};
return this;
}
console.log(new number(5).plus(1).return());

Categories

Resources