How to Make a Card Game in JavaScript, part 1
Tags: javascript, games
Published: 2017-03-17 15:09:13

---
title: How to Make a Card Game in JavaScript, part 1
published: true
description: Detailing some of the decisions I made while creating a game using plain JavaScript.
cover_image: https://andrewscripts.files.wordpress.com/2017/03/1__169_-2014-08-22-1227.jpg
tags: javascript, games
---

I've been playing this solitaire card game for awhile now called [Dungeon Solitaire - Tomb of the Four Kings](https://matthewlowes.com/games/) 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:

```javascript
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:

```javascript
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:

```javascript
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.