To continue “Begining HTML5 game part 2” :
Today, we build and play BlackJack game.
In js folder, create player.js file : contain methods of player interactive with cards and computer
In js folder, create computer.js, extends player.js file
var Computer = function(){this.x=400;this.y=80;}Computer.prototype =new Player(); //computer extends player
In dealer.js, define deal function to deal cards to player and computer :
//deal cardthis.deal = function(step){if(step==5) return ;var card1 = this.cards.pop();if(step!=4){card1.flip();}if(step==1||step==3){this.player.cards.push(card1);}if(step==2||step==4){this.computer.cards.push(card1);}setTimeout("dealer.deal("+(step+1)+")",1000);}
In index.html, in head section, add :
//set border for layout of canvas tag by 1px solid and has black color
<style type="text/css">canvas {border: 1px solid black;}</style>
index.html-> head section -> <script> tag : add code to init player and computer and assign to player and computer:
var dealer = new Dealer();var player = new Player();var computer = new Computer();dealer.player=player;dealer.computer=computer;
index.html -> body section : add deal button :
<input type = "button" id = "dealId" name = "dealBtn" value = "Deal" onclick="dealCard()"></input>
index.html -> head section -> <script> tag : create dealCard function to handle event when player click “Deal” button.
function dealCard(){dealer.deal(1);}
To create Hit Button :
index.html -> body section -> add Hit button :
<input type = "button" id = "hitId" name = "hitBtn" value = "Hit" onclick="hit()"></input>
index.html -> head section -> script tag : define hit function to player and computer :
function hit(){player.hit();computer.hit();}
And same dealCard function, you need init and assign to player and computer when they hit in index.html->head section -> script tag :
player.dealer = dealer;Computer.dealer = dealer;
In computer.js file, define hit function for computer:
this.hit = function(){dealer.computerHit();}
In player.js file, define hit function for player:
this.hit = function(){dealer.playerHit();}
In dealer.js, create hit fuction for player and computer :
this.playerHit = function(){var card = this.cards.pop();this.player.cards.push(card);card.flip();}this.computerHit = function(){var card = this.cards.pop();this.computer.cards[this.computer.cards.length-1].flip();this.computer.cards.push(card);}
Result :
<input type = "button" id = "standId" name = "standBtn" value = "Stand" onclick="stand()"></input><input type = "button" id = "repeatId" name = "repeatBtn" value = "Repeat" onclick="repeat()"></input>
And index.html->head section -> script section : define 2 functions for stand() and repeat() for player when player choose stand button or repeat button.
function stand()
{
player.stand();
}
function repeat()
{
player.repeat();
}
In Player.js : define methods stand() and repeat()
this.stand = function()
{
if(this.calcPoint()<21)
{
dealer.playerStand();
}
}
this.repeat = function()
{
dealer.playerRepeat();
}
In dealer.js : define methods playerStand() and playerRepeat() and checkPoint() to check Point of Player and Computer
this.checkPoint = function()
{
var cPoint = 0;
var pPoint=0;
cPoint = computer.calcPoint();
pPoint = player.calcPoint();
//alert("point of computer : "+computer.calcPoint());
if(actionStr=="playerHit")
{
if(pPoint>21)
{
alert("You lose");
return;
}
if(pPoint<21)
{
if(cPoint==pPoint)
{
alert("You draw");
return;
}
if(cPoint>21)
{
alert("You win");
return;
}
if(pPoint==21)
{
alert("You win");
return;
}
}
if(pPoint==21)
{
if(pPoint==cPoint)
{
alert("You draw");
return;
}
if(pPoint>cPoint)
{
alert("You win");
}
}
}
else if(actionStr=="playerStand")
{
if(cPoint<=21)
{
if(cPoint>pPoint)
{
alert("You lose");
return;
}
if(cPoint<pPoint)
{
alert("You win");
return;
}
if(cPoint==pPoint)
{
alert("You draw");
return;
}
}
else
{
alert("You win");
return;
}
}
}this.playerStand = function()
{
actionStr="playerStand";
this.computer.cards[this.computer.cards.length-1].flip();
this.checkPoint();
}
this.playerRepeat = function()
{
while(this.player.cards.length>0)
{
var card = this.player.cards.pop();
this.cards.push(card);
card.flip();
card.x = this.x;
card.y = this.y;
}
while(this.computer.cards.length>0)
{
var card = this.computer.cards.pop();
this.cards.push(card);
card.flip();
card.x = this.x;
card.y = this.y;
}
this.shuffle();//recall shuffle() method to shuffle cards.
}
Result:
It’s demo. To better, you need set rate and blackjack game rule to exactly.
Full Source code : https://docs.google.com/open?id=0Bw97UupVaNHuYUpnWkpCc1J2bHc
