grelf.net - Cards

To be able to run the game in a browser we need an HTML page and some JavaScript (JS). The JS program will be in separate files, one for each type of object (such as Card or Deck). In this way we can make the structure very clear and manageable. We will use the original way of incorporating the JS with <script> elements. We will also use the traditional way of starting the program, by an onload attribute in the <body> element: that ensures that everything is loaded into the browser before the program runs.

Here is the initial HTML file. We will be adding more <script> elements in subsequent pages but otherwise this is all the HTML we need. Everything else is JS.


<!DOCTYPE html>
<html>
  <head>
    <title>Cards</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body onload="run()">
    <canvas id="canvas"></canvas>
    <div id="info"></div>
    <script src="js/gameA.js"></script>
  </body>
</html>

The outline of that was generated automatically by NetBeans when I started a new HTML/JavaScript project called Cards. I added these things:

onload="run()" in the body element. We will need to write a function called run in the JS file.
The canvas and div elements. The div is for test output but you might omit that and use console.log() instead.
The script element, to load a file called gameA.js from subdirectory js. This file will contain the first part of our program, to set up an object representing the whole game.

The letter A in gameA.js is my personal versioning technique. I have set the real server for my web site so that browsers may not cache HTML files but JS (and other) files may be cached. I force the HTML to use newer versions by changing that suffix in the JS file name. Newer versions only need to be downloaded to clients if the name has changed.

Now for the initial contents of gameA.js:


// Framework for solitaire-style card games
const GAME = {};

function run()
{ GAME.cnv = document.getElementById ("canvas");
  GAME.cnv.width = screen.availWidth;
  GAME.cnv.height = screen.availHeight;
  GAME.g2 = GAME.cnv.getContext ("2d");
  GAME.N_COLUMNS = 0; // To be set by particular game
  GAME.COLUMNS = [];
}

The single global object GAME simply holds data to be used by any of the other objects we are going to create.

For now the run() function only creates a few things. We will shortly be adding to this function to create some cards and display them.

For beginners: GAME holds a reference to an object somewhere in memory. The reference enables the system to be able to locate it but we do not need the details. The contents of the object will change as our program runs but it will still be the same object. By using the keyword const, rather than let or var, we are telling our IDE and all browsers to stop us if we try to assign a different object to GAME. This is useful, not a hindrance. (Pointers in the languages C and C++ are different from references because they give programmers memory addresses and let them explore and manipulate them directly. System programs may need such access but application programs generally do not.)

(Calling the context g2 is a personal habit. I first met the concept of graphics contexts many years ago in a completely different language where the context was of type Graphics2D. The name g2 is useful because it is short and distinctive.)

So what are some types of objects we will need apart from GAME?

Do think about that but first, on the next couple of pages, I want to give some general hints and tips based on my own experience. I have used many different programming languages and systems over several decades.

Create a solitaire framework in vanilla JavaScript

Simple HTML page and game JS