Clicky

Play

Pig-Pong

Objective

Create a visually more attractive version of the iconic Pong game.

Skills

Design, illustration and implementation using JavaScript, CSS and HTML.

I had a great time making Hangwoman and, to continue my learning journey, I was looking to customize yet another existing game. Pong is a true classic, but since I wanted to also have fun with the visuals I chose to change its original minimalist look. Pig-Pong's farm theme was born from a pun on ping-pong :)

Having decided on the new theme, the process begun of translating the Pong game elements to farm-themed ones. How would I embody the upper and lower boundaries? How about the bats and score board? Instead of hitting a ball I, of course, opted for a pig to do justice to my game's title. The pig needed to be as around as possible though, for credible game play.

Screenshot of the Pig-Pong project.

Compared to Hangwoman I faced so many more issues to mull over and to solve. To name a few: optimizing the play speed, so the game is suitable for beginners while challenging enough for more advanced players. How to reward risky game strategy? (because fortune favors the bold!) I decided that hitting closer to the edge of the bat should be more favorable, as opposed to using the safer center area. This would result in steeper return angles, thus making it harder for the opponent to counter. It took a while to find fitting music and sound effects, but it was fortunately also an enjoyable process. (Speaking of, I can warmly recommend Freesound for their large collection of audio snippets under Creative Commons licenses.)

As expected, making Pig-Pong would prove highly educational. It taught me event-driven programming for a large state: things like maintaining the pig's position, direction, speed, size and rotation angle/speed. I also learned to process unified mouse and touch input. Additionally, it taught me to tune the game play timing. All in all, I feel I stepped up my skill set to create intuitive game elements with a low threshold to play.

play the game

Hangwoman

Objective

Make my own version of Hangman, a childhood pen and paper game favorite.

Skills

Design, illustration and implementation using JavaScript, CSS and HTML.

As a kid, I quite enjoyed playing Hangman. When my husband and I decided to move to a tropical island, it gave me the idea of making an online version with a tropical flavor and a happier ending. It was important for me to retain the style of the stick figure drawing, so as to keep the connection with the source of inspiration. The initial challenge was to create a visually appealing as well as consistent stick figure setting.

Screenshot of the Hangwoman project.

Designing an intuitive interface was another challenge. How do I show which letters the player has chosen and which ones are still available? How do I reveal the word if the player has run out of letters and still hasn't been able to guess it? How do I display the word-to-guess? There were multiple solutions and often the details would make or break the design. For instance: I chose a monospaced font for the word-to-guess. This kept the text spacing natural and prevented the characters from shifting when a correctly guessed letter replaced the asterisk.

Aside from interface design, this project taught me a lot about DOM manipulation. I also was able to experiment with animating SVGs. It was educational to get feedback from friends and family who played the game. I tweaked the game as I received constructive criticism. One friend pointed out the need to be able to play the game using the keyboard, something I hadn't thought about prior to his remark. A less scholastic learning moment: I really got a kick out of actual users enjoying my game!

play the game