CV Project: Blackjack Game
Background:
While participating in a Coding Bootcamp, I was tasked with creating a project using only HTML, CSS, and JavaScript. Our instructors encouraged us to develop simple game ideas we could implement. I immediately thought about creating a Blackjack game where the player would play against the computer (the dealer). My creative juices definitely started flowing as I immediately pictured how the user interface would be. The only requirements were that we had to use HTML, CSS, and JavaScript. I decided also to use Trello and Figma to plan out each step and to design the wireframes and game assets respectively.
One challenge that I set for myself was to also implement as much of the user interface using CSS without using external assets such as SVG files or PNG files (unless absolutely necessary). The entire game board is implemented in CSS. The only assets that I used were the poker chips, card decks, and blackjack logo (embedded in the board). Also, I wanted the game to be fully responsive (work on cell phones, tablets, and desktops).
Process:
My first step in the process of designing and implementing my game was to create the user interface in Figma. I find it easier to not “over-engineer” things when I have a clear understanding of what needs to be created/implemented. I generally like to have some sort of visual design as it helps me to get that understanding. I created the game assets in about 3 hours. I grabbed a few reference images from Google to have an idea of what I wanted to design and got to work.
The second step was implementing the basic game logic. I started by implementing the logic for creating a deck and also two players (the user and the computer). I created a few functions for getting a random deck when the game starts, betting or staying, and finally winning the actual game. That was the fundamental logic for my game.
I tested each of these functions by running or “playing” the game in the terminal. I used a lot of console.log to be able to see if the logic was adding up. In the end, I had the MVP implemented and it worked without focusing on actually implementing the graphics. I wanted to leave that part for last.
Once the basic MVP was met, I implemented the actual game design. This was probably the hardest part because I had to use JavaScript to change a lot of things visually. I had to write a few algorithms to figure out which chips were currently on the board and if they needed to move based on the screen size. Remember: One of my requirements was for the game to be fully responsive. Depending on the size of the screen, some of the game assets had to be resized.
Finally, my project was deployed on Github pages. It was another one of our requirements along with those previously mentioned. I have also since deployed the project using Netlify and it is currently accessible at: https://blackjack.jordanblount.com/
Takeaway:
It took a lot of work, but it was super worth it in the end. I had about 6 days to create the entire game. I was done in 5. The last thing that I did was implement some game sounds just to make the game even more interactive and fun.
I learned a lot about using CSS and JavaScript together. It was a fun project which I am definitely proud of because I was able to implement it and it came out mostly how I wanted it to. The game looks pretty much exactly as I imagined it and functions super well. My future plans are to redo the betting logic and clean up some of the game code.
