Close
DIY today i learned (til)

How to Publish a HTML and JavaScript Game on GitHub

April 18, 2025

Recently, I took part in the Atlanta Science Festival 2025 STEM edition. The STEMcomm VIP team organized a version of Scavenger Hunt, and I was part of the CyberQuest Team. I was responsible for the Scavenger Hunt game, which needed an online interactive site. I figure that GitHub Page is a good free platform to do this. However, GitHub Page has had quite a few updates in recent years and the guide sites have not updated accordingly. I spent quite some time trying to figure it out, and here I am wanting to share how I did it.

In the past week I published an article about how to beat the popular 2048 game. You can take a look if you are interested!

https://chargedmagazine.org/2025/04/how-to-become-an-expert-at-2048/

https://chargedmagazine.org/2025/04/how-to-become-an-expert-at-2048/

So, in this example, we are publishing a variant of 2048. Credit the codes to

https://www.geeksforgeeks.org/design-a-2048-game-in-javascript/

1. Install a code editor like Visual Studio Code. If you already have one then just use yours. Choose the best one for your Operating Systems (OS). I’m using Windows for this tutorial.

https://code.visualstudio.com/

2. Create a GitHub account and make a public repository. You can choose or use alternative platforms that are able to host an HTML site.

https://github.com/

https://github.com/ddang37/ChargedMagazineGame2

3. Clone this repository onto your local computer. There are alternative ways to do it. I recommend using GitHub Desktop which makes things easier. Follow the corresponding guide below if you are new to GitHub.

https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository

If you use GitHub Desktop:

https://docs.github.com/en/desktop/adding-and-cloning-repositories/cloning-a-repository-from-github-to-github-desktop

4. Open the local repository folder in your Code Editor.

Create a HTML, CSS, and JavaScript file. Let’s name them game.html, style.css, and dynamic.js. You can change the names and have additional files for more complicated games.

5. Write the codes into the files. HTML with elements, CSS with stylings, and JavaScript with animation and interaction. 

For starters, you can search online for sample code and modify from there (make sure to credit the sources!). There are plenty of variants and implementations. You can also create your own!

You can also fork from the original popular 2048 code:

https://github.com/gabrielecirulli/2048

The codes we are using is a much simpler implementation, but still difficult:

https://www.geeksforgeeks.org/design-a-2048-game-in-javascript/

6. If your codes are not original from scratch, make sure your game.html file is referring to the correct style.css and dynamic.js. 

7. Save the codes. Double click the HTML file from file explorer, it should open a chrome site of your HTML game.

8. When you are satisfied with the result, commit your changes to the online repository. You can do this multiple times, even after you publish the site.

https://github.com/git-guides/git-commit

If you use GitHub Desktop:

https://docs.github.com/en/desktop/making-changes-in-a-branch/committing-and-reviewing-changes-to-your-project-in-github-desktop

9. When you are ready to publish your code, go to your repository online. Go to Setting > Pages > Build and deployment > Branch, change None to main. An option for the folder will appear, just keep the default. Click Save.

10. After a few minutes the page will go live. It will show up at the top under GitHub Pages.

11. Click on the URL or Visit site. Add the extension of the HTML file name and the game will show up!

https://ddang37.github.io/ChargedMagazineGame2/game.html

For this 2048, the game do not autogenerate a tile of 2 or 4 upon making a move, but rather based on time. The random generated tiles can be 2, 4, 8, or higher based on the current tiles on the board. This make the game much harder to win.

Fun fact: If you left this game alone, except for sliding, the game could play by itself!!!

Note: The website might take up hours to update if you commit new changes after publication. If CSS stylings are not working like it did locally, double check if there’s any Chrome extension blocking it. If the website takes forever to update, try making the repository private and then public again. Refer to GitHub information sites if otherwise.

https://docs.github.com/en/pages/getting-started-with-github-pages/github-pages-limits

References:

0Likes
About Author

You May Also Like

today i learned (til)
Lie Detector Pseudoscience: Why Polygraphs Fail
today i learned (til)
Sucrose V.S. Sucralose
today i learned (til)
Watch what you touch at airports
today i learned (til)
1984 in 2020

Your journey starts here! Let’s talk!

ThemeRex © 2026. All rights reserved.
  Timothy Durham was convicted of rape when a test showed his DNA genotype matched the DNA recovered from the crime scene. Eye witnesses testified that Durham was in a different state at the time of the incident, but he wasn’t exonerated from his 3000 year sentence until follow up DNA analysis showed that the preliminary forensic analysis used in the trial was misinterpreted (Thomas et al.). DNA testing serves an invaluable part in our criminal justice system, but it comes with complications and bias that can lead to wrongful convictions and misinformed juries.  

Background:

Forensic genetics aims to identify the origin of a biological sample. It can be traced back to Karl Landsteiner who discovered human ABO blood groups. With blood groups, suspects could be eliminated based on their blood type. For example, if a suspect had type A blood and there was type B blood left at the scene by the perpetrator, the investigators could rule out the suspect. Unfortunately, the reverse didn’t work. If the suspect and perpetrator both had the same blood type, it can’t be concluded that the suspect was guilty. Blood identifiers evolved into 8 distinct categories which improved the ability to eliminate suspects, but could only conclude that (if the system matched) it might be the perpetrator or this person might be related to the perpetrator (Jobling and Gill). The field evolved in the 1980s with the discovery of Minisatellites, lines of repetitive DNA that don’t encode proteins. Minisatellite patterns in DNA create what we know today as the DNA fingerprint, and it has a much higher accuracy rate than previous methods (Augustyn et al.). Around the same time, a breakthrough for victims of sexual assault was discovered. In the case of assault, bodily fluids of both the victim and the assaulter can get mixed. A process called differential lysis was created which could selectively increase the concentration of sperm in a fluid sample thereby allowing for accurate DNA testing (Jobling and Gill). Forensics evolved to use single-locus probe testing after several years because of its ease of interpretation. It looked at specific minisatellites that had high variability between subjects. This was the first DNA-based method to be used in a criminal investigation. Two murder homicides from several years apart were connected using DNA evidence. The evidence was then used to exonerate an innocent man, and the guilty party was found when he tried to evade mandatory DNA testing for all men in the small town. His guilt was then reinforced when the DNA profiles matched, and he gave a confession (Jobling and Gill). Finding DNA at a crime scene doesn’t guarantee that you’ll find a murderer. There are issues with non-pure samples and limited samples that make DNA work difficult, and accreditation of facilities and new techniques and take time (Jobling and Gill).  

Subjectivity of DNA Interpretation:

In a 2009 publication, the National Academy of Science discusses the possibility for subjective influence in lab based forensics. The interpretation bias happens in complex cases where, for example, there could be a mixture of DNA. A study published in 2011 looked specifically at this issue. A gang rape happened in Georgia, and the mixture in DNA from the case was used to prosecute one suspect after another suspect took a plea bargain to testify against him. With DNA mixtures, there are three possible conclusions: suspect excluded, suspect cannot be excluded, and inconclusive. If the suspect is excluded, it means that there’s little to no possibility that his DNA is part of the sample. If the suspect cannot be excluded, it means that there’s a possibility that his DNA is part of the sample. In the trial, the DNA examiners who knew the context of the case concluded that the suspect being prosecuted could not be excluded. The 2011 study gave the DNA evidence from this case and the DNA profiles of the suspects to 17 forensic examiners. These examiners had no context of the case, and they all worked independently. Of the 17, only 1 came to the same conclusion (suspect cannot be excluded) as the examiners who knew the context of the case. Twelve of the 17 concluded that the suspect who was prosecuted and convicted had no relation to the DNA found in the sample. Not only does this show that subjectivity occurs due to the context of the case, but the 17 examiners came up with different findings based on their past experiences meaning that not all DNA analysis is objective. Some organizations like the Scientific Working Group on DNA Analysis Methods say that quantitative statistical evidence should be presented with every categorical conclusion, but the US doesn’t require this (Dror and Hampikian).

False Positives:

There are two categories that cause wrongful identification in a DNA report: coincidental matches and false positives. Coincidental matches are DNA matches between two unrelated people. The probability of these matches is about 1 to 500,000 for white individuals and about 1 to 350,000 for black individuals. This small probability of coincidental matches makes people feel confident in DNA evidence. False positives, on the other hand, are matches between DNA and test DNA that result from issues in the forensics lab. There have been multiple cases of forensics labs accidentally switching victim and suspected rapist DNA which lead to convictions that were later overturned when the lab realized the error. There are also cases of misreading or misunderstanding a sample. In a case from 1993, a man was convicted of rape because someone interpreted a mixed sample of victim and perpetrator DNA as an individual sample. The conviction was again overturned. To prevent false convictions, retesting DNA is allowed, but it’s not an efficient solution. Many people are pushing for statistical information on the probability of false positives, so that the jurors can make accurate judgements based on DNA evidence (Thomas et al.).  

Conclusion:

DNA analysis is a useful tool for the criminal justice system, but subjectivity can be an issue in forensic testing. To combat wrongful convictions, there are organizations like The Innocence Project who use DNA testing to free the innocent, but reformed forensic testing standards should be put in place to prevent subjectivity and to ensure juries are correctly informed during trials. https://www.innocenceproject.org/    

Citation:

Augustyn , Adam, et al. “DNA Finerprinting.” Encyclopedia Britannica , 26 Apr. 2018, www.britannica.com/science/DNA-fingerprinting#ref153186. Dror, Itiel E., and Greg Hampikian. “Subjectivity and Bias in Forensic DNA Mixture Interpretation.” Science & Justice, vol. 51, no. 4, 2011, pp. 204–208., doi:10.1016/j.scijus.2011.08.004. Jobling, Mark A., and Peter Gill. “Encoded Evidence: DNA in Forensic Analysis.” Nature Reviews: Genetics, vol. 5, no. 10, Oct. 2004, pp. 739–751., doi:10.1038/nrg1455. Thompson, William C, et al. “How the Probability of a False Positive Affects the Value of DNA Evidence.” Journal of Forensic Sciences, vol. 48, no. 1, Jan. 2003, pp. 1–8., doi:10.1520/jfs2001171.