DEV Community

Cover image for How to Make a Card Game in JavaScript, part 1
Andrew Steele
Andrew Steele

Posted on

How to Make a Card Game in JavaScript, part 1

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)
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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
  }
}
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
quantotius profile image
quantotius

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).

Collapse
 
jess profile image
Jess Lee

Will we be getting a Part II to this??

Collapse
 
andrew565 profile image
Andrew Steele

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!

Collapse
 
jess profile image
Jess Lee

Ha, the irony. Looking forward to Part 2 when it's up! I'll follow ya so I make sure not to miss it :)