Repository Link

Website Link

This is the web version of a card game I made with two friends called "Stupid Superpowers." It is an "Apples to Apples" or "Cards Against Humanity" remake with only stupid superpowers. My web stack consisted of HTML, CSS, React, Node.js, Express.js, and Socket.io, multiple npm packages (profanity checker, random name generator, countdown). The website was deployed on Heroku.

There is no account creation, as the game is meant to be played casually without any need for progress.

I used flexbox to format the homescreen, lobby, and result screen in columns and rows. I used grid to format the game screen. This made separating the prompt, cards, scoreboard, and chat very simple.

Whenever a user clicks something on the frontend, socket.io emits certain parameters such as player id to the backend "database." The backend then works through the array and does its magic, as I will describe below.

Here's how the temporary "database" is formatted.

• Array of Games
  • Game Attributes: Color, Code, Prompts, etc.
  • Chat
  • Array of Players
    • Player Attributes: Score, Powers, etc.

When a player joins a game, whether randomly or by code, the program searches for a valid room and allows them to join the lobby. Otherwise, an error message shows up.

There is a countdown that works by resetting the React state every second. When a player chooses a card, they can submit and that changes their player attribute. When every player has selectd, the game attribute changes to "voting." The voting system works similar to the selecting system. When everyone votes, the highest scoring players get an extra point to their score. If someone has reached 7, the winning screen occurs. Otherwise, the game chooses the next prompt card in the deck. Each player then discards a power from their array and randomly picks a new one.

Each game has an array of chats. When a player enters a chat, the program finds the game code, and registers it into its chat array. Socket.io then sends the text back to the frontend.

Allows users to search public workouts based on stroke and distance. Also allows them to register / login and create their own workouts.

Website Link

Has two dropdowns that allows users to search workouts based on stroke and distance.

If logged in, a user can create a workout. This is prevented if you are just a guest user.

If logged in, a user can view their own workouts. They can also edit or delete each workout.

Allows user to register or login to their account.

1. Download this repo as a zip and uncompress
2. Run npm install on both the client and server directories
3. Run npm run dev in the server directory
4. Run npm start in the client directory

1. Add Procfile and write web src/index.js
2. Run npm build in the client directory
3. Copy that content and put it in a folder called "public" in the server directory
4. Deploy with Heroku CLI instructions

Repository Link

Link to Project

Program Purpose: Allows the user to make pixel art

Features: 16 colors, pencil, eraser, trashcan, square, line, bucket, undo / redo, export, different mouse size

Language: Python and Pygame

Inspired by pixilart

Attributes: Color, position

Methods: Change color

Attributes: Image name, tool / icon name, position

Methods: Draw border

Attributes: Size, color

Methods: Update - Highlights current pixel, becomes transparent if it is not on the board, changes cursor to diamond if it is on the board

Attributes: Position

Methods: Update - Sets to visible or transparent depending on mouse size

Attributes: Color, position

Methods: Draw circle - draws a circle in the box if it is selected

Trashcan: Erases the whole board and resets the alternating gray and white grid

Export: Takes a picture of the canvas and saves it to a screenshot folder

Bucket: Fills the surrounding area with a color

Pencil: Changes a pixel's color

Eraser: Resets a pixel's color to its original gray or white

Square: Creates a square based on 2 selected points (Bugs - Sometimes doesn't respond, when undoing, the second point is erased too)

Line: Creates a line based on 2 selected points (Bugs - same as square)

Undo: Reverses the board to the previous state (Bugs - takes 2 clicks for the first undo)

Redo: Restores the board to the state you just had (Bugs - same as undo)

The board and current selections (tool, mouse size, color) are created using a text file that allows for saving previous work.

Each class has its own sprite group and list containing instance

Checks for escape key to exit. If it is, the program saves the current board and selections.

Checks if the mouse is being clicked. Everytime the mouse is released, a new board state is pushed to the undo stack

Checks for arrow keys to change the mouse size

Checks if there the mouse and pixel collide. If they do, they perform the necessary function based on the current tool.

Checks if a color box or tool has been selected.

Updates the amount of mouse boxes to be shown.

Updates every sprite (polymorphism)

Open the terminal / command line

pip install pyinstaller

Open up a terminal / command line inside the directory

pyinstaller --add-data "board.txt:." --add-data "reset.txt:." --add-data "selections.txt:." --add-data "icons:icons" --add-data "screenshots:screenshots" main.py

Go to dist and select main.exe

Program Purpose: Generates a maze that then solves itself

Language: Python and Pygame

Algorithm: Randomized DFS / Floodfill / Recursive Backtracking

Link to Project

Wikipedia Algorithm Pseudocode

Inspired by The Coding Train

1. Maintain a matrix that keeps track of visited cells
2. Maintain a stack that keeps track of cells on the current path
3. Start at the top left cell
4. Randomly choose one of the available neighbor cells
5. If there are none, go to previous cell in the stack
6. Color visited cells blue, current cell blue, and remove the white wall
7. Will eventually return to the top left cell and guarantees a maze

1. Maintain a matrix that keeps track of visited cells
2. Maintain a stack that keeps track of cells on the current path
3. Start at the top left cell
4. Randomly choose one of the available neighbor cells without a wall
5. If there are none, go to previous cell in the stack
6. Color visited cells green and current cell red
7. Will eventually reach the bottom right cell, at which point the program restarts

1. A matrix of cell classes: each cell instance maintains properties such as a wall array, visited / current booleans, and methods to draw to the screen
2. Simulation Function
   1. Generation - Find next cell, check if it is inbounds and unvisited, remove the wall, move to that cell
   2. Solving - Find next cell, check if it is inbounds and unvisited, move to that cell

Open the terminal / command line

pip install pyinstaller

Put maze.py inside of a folder called main (or whatever name you want)

Open up a terminal / command line inside the folder

pyinstaller --onefile -w maze.py

Go to dist and select main.exe

[Repository Link](https://github.com/joshualiu555/Strategy-Steps "Repository)

A recreation of the Wii Party Minigame, "Strategy Steps" Allows unlimited players (preferably 4) Each round, players select a number: 1, 3, 5 After each round, if a player is the only number to select that number, they move up that number of steps. First to 10 wins

The program uses the discord API and discord buttoms library. The entire game is asynchronous as it relies on user inputs.

It cannot support multiple games being played. When an request to start the game is entered, an array of players is made in this format.

• Player array
  • Score, Number Chosen

1. Begin The Game

.start @player1 @player2

2. Start The Round

.next

3. Choose Your Number

Simply click a button. The results will appear once everyone has chosen a number

4. End The Game

.end

[Repository Link](https://github.com/joshualiu555/Game-Of-Life "Repository)

A Python / Pygame simulation of Conway's Game of Life

The entire simulation runs on a Program Class. Once an instance is initialized, the program creates a new board. Each cell is its own class and is able to change states. Once initialized, the program object begins an infinite while loop until the user exits the program.

There is a 2D Grid of cells. Each cell checks its 4 neighbors.

1. Every live cell with 2 or 3 neighbors lives on.
2. Every live cell with 4 neighbors dies due to overpopulation.
3. Every live cell with 1 neighbor dies due to underpopulation.
4. Every dead cell with 3 neighbors is reborn due to reproduction.

[Repository Link](https://github.com/joshualiu555/Chaos-Game "Repository)

A Pygame program that simulates the Chaos Game theory to generate a fractal.

1. Draw three dots in the form of a triangle
2. Start at point 1
3. Randomly choose a point 1-3
4. Draw a dot in the middle of those two points
5. This dot is your new point
6. Repeat from step 3 continuosly

You wil eventually draw the Sierpinski triangle

[Repository Link](https://github.com/joshualiu555/Rock-Paper-Scissors "Repository)

A Javascript rock paper scissors game that let's you type a username and select how many games to play against the CPU.

1. Type Your Username
2. Choose how many rounds someone has to win for the game to end.
3. Start the Game

1. Choose your icon
2. Click shoot

The result will appear and you keep playing until the game ends.