I've been playing this solitaire card game for awhile now called Dungeon Solitaire - Tomb of the Four Kings by Matthew Lowes. The game simulates deep-diving into a tomb searching for the treasures buried there along with four kings. What I've always loved about this patience-style game is that it has simple-to-learn rules, uses a standard deck of cards so it can be played anywhere, and yet brings a rich story element to what would otherwise be ‘just another solitaire game'.
THE SETUP
I made the choice early on to create this game using plain, pure, vanilla JavaScript. I'm a front-end engineer by trade, so I figure making this game in plain JS would give me the broadest appeal to potential employers. I've used and liked Ember and React, and I've even tried Angular, but I have always felt MVC frameworks often are overkill for most applications.
The first iteration of this game is going to be text-based, with few or no graphics. A proof-of-concept. One of the first things I did was create a helper for DOM manipulation:
function getById(_id) {
return document.getElementById(_id)
}
I could have made an alias to document.querySelectorAll()
, but my general preference is to use IDs for JavaScript hooks, so if I know I'm going to have a unique ID for the majority of actions, then there's no reason not to use getElementById
.
The first object type I created was a Card object since this is a card game. JavaScript prior to ES6/ES2015 didn't have a real ‘class' system, so my first instinct was to create a plain object, especially since the Card object was going to be a very simple one. Here's how it looked at first:
var Card = function(data) {
this.rank = data.rank;
this.suit = data.suit;
this.value = data.value;
this.name = this.rank + " of " + this.suit;
}
Card.prototype.listItem = function() {
var el = document.createElement('li');
el.innerText = this.name;
return el;
}
This would have been fine, of course, but as I refactored some things as I went I reconfigured it into a class. Here's what it looks like now:
class Card {
constructor(data) {
this.rank = data.rank
this.value = data.value
this.suit = data.suit
this.name = this.rank + " of " + this.suit
this.graphic = '' // TODO
}
listItem() {
var el = document.createElement('li')
el.innerText = this.name
return el
}
}
As you can see, not very different, but the class syntax does make some of it a little bit simpler to read. Also, I dropped the semicolons at the end of every line; again, for readability.
The second thing I added was a listItem()
method. This gives me a quick and easy way to display this card in the DOM, similar to the convenience property for Card.name
. The class syntax here is interpreted by the browser the same as adding the function via the prototype chain, but it's a little bit cleaner to read.
That's it for this post. Next time, I'll start looking at the Game and Level objects, as well as give you a look into the HTML structure of the app.
Top comments (4)
Looks like a good idea, I also started to work one a klondike solitaire game and I'm documenting the progress here. Currently I'm looking on getting the right assets for the game and I found some nice resources, but they are distributed under Why I Chose Not to Use Open-Source Playing Cards in My Klondike Solitaire Game (And How You Can).
Will we be getting a Part II to this??
Yes! OMG, I totally spaced getting to Part 2! I swear I started writing it. Sorry for the delay! I'll get it finished up ASAP.
As an amusing side note, I had started this project in an effort to get a job. Then, I got a job and forgot to finish the project!
Ha, the irony. Looking forward to Part 2 when it's up! I'll follow ya so I make sure not to miss it :)