Project #1: The Game

Overview

Everyone will get a chance to be creative, and work through some really tough programming challenges. Let's start out with something fun - a game! We'll be making our own versions of Wordle.

If you're not familiar with Wordle - here is the original Wordle

You will be working individually for this project, but we'll be guiding you along the process and helping you as you go.

Technical Requirements

Your app must:

  • Render a game in the browser

  • Include separate HTML / CSS / JavaScript files

  • Be playable as a game (it doesn't have to be fun though!) with multiple turns or attempts

  • Have logic for winning and losing the game (tell the player clearly when they win or lose, and stop the game)

  • Use Javascript for DOM manipulation

  • Deploy your game online, where the rest of the world can see it!

Necessary Deliverables

  • A working game, built by you, hosted somewhere on the internet

  • A git repository hosted on GitHub, with a link to your hosted game, and frequent commits dating back to the very beginning of the project

  • A link to your hosted working game in the README and URL section of your GitHub repo

  • A README.md file with explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc.

  • A short (5min) presentation/demo to the rest of the class and Q&A time after.

Extensions/options

You don't have to build an exact replica of Wordle - different is good! It can be a very different game, but takes some inspiration from Wordle.

Focus on getting a simple playable version of the game first, but after that make it your own! Here are some ideas:

  • Keep track of multiple game rounds with a win counter (can you keep that winning streak??)

  • Allow game customizable options, time limits, guess limits, language options (e.g. American vs. British English)

  • Use a custom set of words - around a theme

  • Make it super easy for players to share their results or scores on social media

  • Focus on the feel and flow of the app - does it move the cursor to the right textbox automatically?

  • Get inventive with your styling - research CSS effects, animations to spiff things up

  • Research LocalStorage or SessionStorage to persist data locally to allow games to continue after page refresh or loss of internet connectivity

  • Research web audio API and add sound effects to your game

  • Be creative! Bend the rules and give it a twist!

Example Wordle adaptations

It's 100% fine to build a vanilla Wordle app - but if you want to change it up you can! Check out these creative Wordle adaptations for inspiration...

  • Crosswordle https://crosswordle.vercel.app/

  • Word Master https://octokatherine.github.io/word-master/

  • Absurdle https://qntm.org/files/absurdle/absurdle.html

  • Nerdle (maths) https://nerdlegame.com/

  • Worldle https://worldle.teuteuf.fr/

  • Squirdle (Pokemon) https://squirdle.fireblend.com/

Plagiarism

Do NOT copy from other people's implementations of Wordle. That includes:

  • Online tutorials for building Wordle

  • YouTube videos about building Wordle-like games

  • Looking at the source code from Wordle itself or other Wordle implementations

This just isn't a good way to learn. You're trying to grow your skills to build any app, not just ones that have tutorials out there.

You should build your own version of Wordle from scratch. If you need to do something, it's fine to look up how to do it and find examples! We require that you make many small commits to git, not one big commit a the end.

You are allowed to copy from:

  • StackOverflow answers

  • Any tutorials and examples online which are not specifically about Wordle

  • Examples from MDN documentation and W3 Schools

If it's more than 1 line of code and you don't change it substantially, you MUST add a link to your code (in a comment) to say where you got it from.

References

PreviousDay 2: Project 1 kickoffNextDay 1: Intro to Python

Last updated