PinPadle Game

  • Content:

    • Number pad

    • Popups

    • Page PostBack

    Rules:

    • Guess a 5-digit pin to win

    • Gray boxes means the digit isn’t in the code, yellow is right number in the wrong place, green is right number in the right place

    • ASP.NET .NET Framework (v4.8)

    • C#

I completed this minigame that was inspired by the growing popularity of Wordle. Wordle uses an array of 5-letter words, and picks one as the daily solution. For my game, I wanted to use numbers so I could utilize the random number generator. I also wanted to write the code to only include 1 of each digit, to make the game faster. If repeats were included there would be too many potential solutions to solve.

Final Game   |    Code Logic   |    Future Steps

Code Logic

Final Game

Future Steps

This is the code show casing how the answer pin is formed. A random number generator pulls 5 digits between 0 and 10, then assigns them to respective textboxes. These text boxes are not visible to the user, however they help in color coding when running “CheckSolution”.

After the pin is generated, the start popup is hidden for the remainder of the game.

This game is finished. While I do not intend on making additional changes, this code could be used as the structure for future game projects. Wordle has been the starting point for many similar games, and was based on MasterMind (a popular board game).

Potential Iterations:

Code Optimization:

  • Initially this project was used for school, and part of my assignment was to utilize a list of elements. Because of my restrictions, I feel like the game was not as optimized as it could have been

Difficulty:

  • The answer pin could be adjusted to include repeats, however this would possibly make the game impossible.

  • The user could have unlimited guesses in that case, and have the win screen include the number of attempts it took to win

Rules Popup

Gameplay

Win Screen

I wanted to keep the game in dark-mode, as a personal preference. I also used the same colors as Wordle, to maintain an aesthetic trend with my inspiration.

The game consists of:

Left Side:

  • Guess Box: This is where the user will input their 5-digit guess. Upon hitting the “Enter” button, this places into the rows below and color codes

  • Guess Rows: These are the 5-box long rows that get color coded

Right Side:

  • Rules Button: This opens the rules popup. At the end of the popup there is a “Close” button

  • "Restart Button: This button triggers a page reload that restarts the game with a new answer, and blank guesses

  • Number Pad: these are the buttons used to input a guess. To the left of the “0” is the backspace, to the right is the “Enter” button

This is the function connected to the number pad. It simply puts the numbers into the “guessBox” before being sorted when the “Enter” button is clicked. The user cannot exceed 5 numbers in the “guessBox”

The “CheckSolution” function color codes the user’s guess numbers. It checks each digit for placement (green), then appearance in the pin (yellow), or if it is missing (gray).

←   Back to Projects    |     Return to Top   ↑