These pages describe the design and programming of a game of Spider solitaire to run in any graphical browser.
The design is very much object-oriented and it is intended as an example for beginners in this field (OOP = Object-Oriented Programming) to be able to follow, copy and extend. For this reason it is presented as small stages of design and development, one page per stage.
The programming is done in very plain JavaScript avoiding syntax that has been added to the language in recent years. In this way we can be sure that the program will run in all browsers. Students can use this to really learn the basics of JavaScript. More recent features of the language can be learnt later.
My aim is to show aspects of programming that are not simply about learning the syntax. My courses have been criticised for being too wordy. But programming involves being able to concentrate on details for long periods of time.
I emphasise: the programming is kept as simple and basic as possible just to illustrate a way of developing a non-trivial application in stages. I think it is important to learn the basics of a language thoroughly before going on to more advanced aspects. Don't try to run before you can walk. (I promise there will be no JS Promises here.)
The game will be presented in one simple HTML page using a <canvas> element. We will show how cards can be drawn quite easily in such an environment. This project will also demonstrate programming user interaction with a mouse and keyboard.
Although Spider will be used as an example, the aim is to provide a framework which could be the basis for other solitaire card games, the common feature being that cards are arranged in columns.
Note: Because we will be doing graphical things it is unlikely that your browser will let you display the game directly from your disc, for security reasons. You will need an Integrated Development Environment (IDE). I use Apache NetBeans which is completely free. It has a good HTML/JavaScript plug-in that can be added from within the program. That provides syntax highlighting and reasonable code completion suggestions. Importantly it provides a localhost server facility which means you can run the HTML file without having to upload it to a real server. You will just need to tell NetBeans which browser you are using, in the project properties dialogue, under "Run". I mostly use Firefox but occasionally test in other browsers.
Here is an example of how the game will look:
