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
var Player = function(name)
{
this.cards = [];
this.x=400; //position for cards
this.y=300;
this.calcPoint=function()// calculate point of player
{
var total =0;
for ( var i = 0; i < this.cards.length; i++)
{
total+=this.cards[i].value;
}
return total;
}
this.draw = function(graphic) // draw cards of player
{
for ( var i = 0; i < this.cards.length; i++)
{
this.cards[i].x=this.x+i*21; // set distance between 2 cards
this.cards[i].y=this.y;
this.cards[i].draw(graphic);
}
}
}
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 card
this.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 colour
s<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 :
Now, we create more Stand and Repeat button in index.html
<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
Hope to helping ^^
Part 1
Part 2
