Case study
CATAN
JAVASCRIPT
JavaScript is one of the most commonly used programming languages and plays a significant role in modern web design. In this case study, I invite you to join me on my first-ever JavaScript project. This project focuses on experimenting with JavaScript alongside HTML and CSS. It will showcase my understanding of various data types, variables, functions, loops, if-statements, and more!
Briefing
The task for this project was to create or recreate an existing game using only JavaScript, HTML, and CSS — simple enough. With my limited prior experience in JavaScript, I ambitiously chose the board game, Catan. In hindsight, this was never achievable for a beginner, but it was a fun and insightful project nonetheless.
THE GAME
“Catan” is a popular strategy board game where players compete to earn victory points, with the first person to reach 10 points declared the winner. In Catan, players gather resources such as wood, brick, grain, ore, and sheep to build roads, settlements, and cities. Settlements and cities earn them victory points. While there is more nuance to the game, this is essentially its core concept. The tricky part of this project was translating the various items and rulesets into an interactive interface.
THE BOARD
The board in Catan consists of 19 hexagonal tiles, each assigned a resource. Every corner of every tile serves as a potential settlement spot, connected by roads. Consequently, every corner of every tile needed to be clickable.
In addition, every space between settlements required a clickable road, resulting in a big html grid. Combine the roads, settlements, and tiles, and you'll have the complete board!
RANDOMIZER
Truth be told, the randomizer wasn't a necessity for the game; instead, it served as a fun challenge to explore JavaScript. That being said, considering that every game of Catan begins with a randomly generated board, there was some value in implementing it.
The randomization process involved creating a function that utilized Math.random
to shuffle
the styles and then reassign them to the tiles.
ROADS AND SETTLES
Creating the road and settlement grid was just the beginning – they had to be interactive too! In a game of Catan, players first choose a settlement spot and then place a road adjacent to it, pointing either upwards, leftwards, or rightwards. This meant the roads had to remain invisible until a player built their settlement. Once settled, only the three adjacent roads should become visible.
PROBLEM SOLVING
Working on this project made me realize just how much work and effort goes into creating seemingly 'simple' games like Catan. It required a lot of problem-solving and backtracking to create something even remotely functional.
For example, once something is made invisible, it shouldn't be clickable anymore. Also, when you click something, it should remain active. Randomizing the board should reset all active settlements and roads. The list goes on... In the end, I only managed to create the initial few steps of the game.
FINAL PRODUCT
As mentioned above, this was about the extent of what I was capable of creating within the span of this project, which is barely scratching the surface of the full game.
I discovered that JavaScript has a steep learning curve. While this project may not constitute a complete game, I am still very proud of what I have managed to produce. I learned a lot of valuable techniques and am therefore proud to showcase them here!
View full project
GAME
CODE
DETAILS