patternjavascriptMinor
Simple Blackjack game using JavaScript and jQuery
Viewed 0 times
simplejavascriptgamejqueryusingandblackjack
Problem
For my first JavaScript/jQuery project, I made a simple Blackjack game. However, I would like to have a more object oriented approach. I would truly appreciate it if someone can review my code and point out how I can make it more object oriented.
```
function reset(){
// Reset
$(".dealer-cards").html("");
$(".player-cards").html("");
var reloadGame = "HitStand";
$(".buttons").html(reloadGame);
$(".dealer-cards").css("width","");
$(".player-cards").css("width","");
$("#playerTotal").html('');
$("#dealerTotal").html('');
$("#message").html('');
}
function deal(){
reset();
/// Store cards in array
var cards = ["ace-of-clubs","two-of-clubs","three-of-clubs","four-of-clubs","five-of-clubs","six-of-clubs","seven-of-clubs","eight-of-clubs","nine-of-clubs","ten-of-clubs","jack-of-clubs","queen-of-clubs","king-of-clubs","ace-of-spades","two-of-spades","three-of-spades","four-of-spades","five-of-spades","six-of-spades","seven-of-spades","eight-of-spades","nine-of-spades","ten-of-spades","jack-of-spades","queen-of-spades","king-of-spades","ace-of-hearts","two-of-hearts","three-of-hearts","four-of-hearts","five-of-hearts","six-of-hearts","seven-of-hearts","eight-of-hearts","nine-of-hearts","ten-of-hearts","jack-of-hearts","queen-of-hearts","king-of-hearts","ace-of-diamonds","two-of-diamonds","three-of-diamonds","four-of-diamonds","five-of-diamonds","six-of-diamonds","seven-of-diamonds","eight-of-diamonds","nine-of-diamonds","ten-of-diamonds","jack-of-diamonds","queen-of-diamonds","king-of-diamonds"];
/// Store correlating values in an array
var values = [11,2,3,4,5,6,7,8,9,10,10,10,10,11,2,3,4,5,6,7,8,9,10,10,10,10,11,2,3,4,5,6,7,8,9,10,10,10,10,11,2,3,4,5,6,7,8,9,10,10,10,10];
/// Zero out dealer total
var dealerTotal = 0;
$(".dealer-cards .card").each(function(){
var num = Math.floor(Math.random()*cards.length);
var cardClass = cards[num];
$(this).addClass(cardClass);
```
function reset(){
// Reset
$(".dealer-cards").html("");
$(".player-cards").html("");
var reloadGame = "HitStand";
$(".buttons").html(reloadGame);
$(".dealer-cards").css("width","");
$(".player-cards").css("width","");
$("#playerTotal").html('');
$("#dealerTotal").html('');
$("#message").html('');
}
function deal(){
reset();
/// Store cards in array
var cards = ["ace-of-clubs","two-of-clubs","three-of-clubs","four-of-clubs","five-of-clubs","six-of-clubs","seven-of-clubs","eight-of-clubs","nine-of-clubs","ten-of-clubs","jack-of-clubs","queen-of-clubs","king-of-clubs","ace-of-spades","two-of-spades","three-of-spades","four-of-spades","five-of-spades","six-of-spades","seven-of-spades","eight-of-spades","nine-of-spades","ten-of-spades","jack-of-spades","queen-of-spades","king-of-spades","ace-of-hearts","two-of-hearts","three-of-hearts","four-of-hearts","five-of-hearts","six-of-hearts","seven-of-hearts","eight-of-hearts","nine-of-hearts","ten-of-hearts","jack-of-hearts","queen-of-hearts","king-of-hearts","ace-of-diamonds","two-of-diamonds","three-of-diamonds","four-of-diamonds","five-of-diamonds","six-of-diamonds","seven-of-diamonds","eight-of-diamonds","nine-of-diamonds","ten-of-diamonds","jack-of-diamonds","queen-of-diamonds","king-of-diamonds"];
/// Store correlating values in an array
var values = [11,2,3,4,5,6,7,8,9,10,10,10,10,11,2,3,4,5,6,7,8,9,10,10,10,10,11,2,3,4,5,6,7,8,9,10,10,10,10,11,2,3,4,5,6,7,8,9,10,10,10,10];
/// Zero out dealer total
var dealerTotal = 0;
$(".dealer-cards .card").each(function(){
var num = Math.floor(Math.random()*cards.length);
var cardClass = cards[num];
$(this).addClass(cardClass);
Solution
This is a partial review. I might have missed things.
Model and view
Split your model and your view. You might have heard from the design pattern "model-view-controller". The model is the abstract data behind the scenes. The view is what the user sees, and all variables related to what the user sees, and interacts with.
You don't have to fully implement it as such, but keeping this in mind, this should help you categorize which variables belong to which part of the code. It should also help figuring out what data should be exposed.
classes and ids
I notice that you use classes to find all containers for
Whitespace
Fix your whitespace. The indentation of certain code is not correct. Use whitespace consistently around operators, and whitespace consistently after commas.
Abstract equality vs strict equality
I would recommend that you use strict equality (
Buttons
Don't use `
You are using two similarly sized Array's to store name and worth of a particular card. Make that at least an Object:
In the end you probably want to make a small class out of that.
Model and view
Split your model and your view. You might have heard from the design pattern "model-view-controller". The model is the abstract data behind the scenes. The view is what the user sees, and all variables related to what the user sees, and interacts with.
You don't have to fully implement it as such, but keeping this in mind, this should help you categorize which variables belong to which part of the code. It should also help figuring out what data should be exposed.
classes and ids
I notice that you use classes to find all containers for
dealer-cards and player-cards. There is, however, just one such container. I think the code might break if you have more of such containers. I would suggest using an id for elements that you expect only to occur once.Whitespace
Fix your whitespace. The indentation of certain code is not correct. Use whitespace consistently around operators, and whitespace consistently after commas.
Abstract equality vs strict equality
I would recommend that you use strict equality (
===) instead of abstract equality (==). Abstract equality is not associative, which can cause weird bugs.Buttons
Don't use `
for everything. We have a wide variety of elements for a wide variety of tasks. Buttons can be simulated using... (or ). The great thing is that these buttons work exactly as we expect them to work in every other application. We can select them with the keyboard for example, and press them with "enter", or tab them on a touch device. Your buttons do none of those things. They are restyled divs.
.data(..)
Use .data(..) to access data values instead of .attr('data- + ...)or.attr('data-x'). That's what that method is for... and any performance improvements the jQuery team thought up will be applied automatically.cards and valuesYou are using two similarly sized Array's to store name and worth of a particular card. Make that at least an Object:
var cards = {
"ace-of-clubs": 11,
"two-of-clubs": 2,
...
};In the end you probably want to make a small class out of that.
Code Snippets
var cards = {
"ace-of-clubs": 11,
"two-of-clubs": 2,
...
};Context
StackExchange Code Review Q#141620, answer score: 3
Revisions (0)
No revisions yet.