Black Jack
super simple Black Jack game
HTML
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<body ng:app>
<div ng-controller="GameController">
<p>
<h1>Cash: ${{cash}}</h1>
Wager $ <input type="text" ng-model="wager" name="wager" size="5">
</p>
<div class="table">
<ul>
<li ng-repeat="card in cards_drawn">
<div class="card ng-class:isRed(card);">
{{card}}
</div>
</li>
</ul>
<div style="clear:both;"></div>
</div>
<p>
<label>Points:</label> <span ng-bind="points">{{points}}</span>
<button class="btn-draw" ng-click="draw();">Draw!</button>
<button class="btn-cashin" ng-show="points>=15 && points<=21" ng-click="cashIn();">Cash In!</button>
</p>
</div>
</body>
CSS
li{
display: inline;
}
.card{
border: 1px solid #ddd;
width: 60px;
height: 80px;
text-align: center;
float:left;
margin: 2px 2px;
font-size: 3.3em;
padding-top: 5px;
overflow: hidden;
line-height: 38px;
background-color: #fff;
-moz-border-radius: 7px;
border-radius: 7px;
}
.red{
color: #f00;
}
h1{
font-size: 2em;
}
.table{
margin: 10px;
padding: 10px;
background-color: #006400;
width: 265px;
-moz-border-radius: 20px;
border-radius: 20px;
}
JavaScript
var myApp = angular.module('myApp', []);
// meh?
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function GameController($scope){
// TODO move this to the draw(), we don't need it here
$scope.cards = [1,2,3,4,5,6,7,8,9,10,'J','Q','K','A'];
$scope.card_types = ["♠", "♣", "♦", "♥"];
$scope.cash = 500;
$scope.wager = 50;
$scope.cards_drawn = [];
$scope.points = 0;
$scope.plusPlus = function(){
$scope.points++;
}
$scope.isRed = function( card ){
if( card && ( card.indexOf( '♦' ) > -1 || card.indexOf( '♥' ) > -1 ) )
{
return 'red';
}
}
$scope.draw = function(){
var btn_draw = $('.btn-draw');
if( ! _isGameOver( $scope.points ) )
{
if( btn_draw.text() != 'Draw!' ){
btn_draw.text( 'Draw!' );
}
var rand_card = Math.floor((Math.random()*$scope.cards.length));
var rand_type = Math.floor((Math.random()*$scope.card_types.length));
var value = 0;
if( isNumber($scope.cards[rand_card]) )
{
$scope.points += $scope.cards[rand_card];
}
else
{
$scope.points += 10;
}
$scope.cards_drawn.push( $scope.cards[rand_card] + " " + $scope.card_types[ rand_type ] );
if( _isGameOver( $scope.points ) )
{
$('.btn-draw').text( 'Start again!' );
}
}
else{
$scope.cash -= $scope.wager;
_startNewGame();
}
}
$scope.cashIn = function()
{
var earned = $scope.points/21*$scope.wager;
if( $scope.points == 21 )
{
earned *= 2;
}
else
{
earned /= 2;
}
$scope.cash +=...