Introductory Note
Games makes your website engaging, fun, and more whole than it would be without such. This guide isn’t necessarily how to code an entire game but rather how to set up code made by someone else and then improve upon it.
Adding Games
Pick one of the following games. Game should be simple and easily replicable.
- Snake
- Game of Life
- Quiz
- Simple Math Game
The first steps to adding one of these games is creating a new file, particularly in the _posts folder of your website. Name this file year-month-day-name_of_game.md
Once you have the file set and ready, you will need some preliminary code to add before pasting the code of your game of choice.
- layout: post
- title: [Name of Game]
- description: [Description of Game]
- type: hacks
- courses: { week: {week: (current week)} }
Once this code is added, copy paste the code of your game. Sometimes games will come with a nav home part of the code. Delete that or the website won’t work. Other than that, you should have a working game!
If everything was set correctly, the file should look something like this:
<-- This First Part Is Your Own Code -->
---
layout: post
title: Game Name
description: description of the game
type: tangibles
courses: { week: {week: week number} }
---
<-- The rest of the code is Copy & Pasted -->
<style>
Some Code in Here
</style>
<div class="container">
Some Code in Here
</div>
<script>
Some Code in Here
</script>
Improve the Game
If you’d like to understand the code behind the game a bit better or better yet, improve the game, consult ChatGPT. ChatGPT is great at both explaining code and improving upon it, making the games more interactive and enjoyable. It’s important to note, in this process, do not blindly copy and paste code from ChatGPT. Try understanding what is going on as such experience will serve you later down the road.