Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
src
.DS_Store
.gitignore
package-lock.json
package.json
readme.md
screenshot.png

readme.md

Tower of Hanoi

ScreenShot

What Is This?

First project of General Assembly's Web Development Intensive: Create a game using HTML, CSS, and JavaScript. I chose the Tower of Hanoi. A game with three towers or rods and a minimum of three discs stacked from largest to smallest.

Game Requirements:

☑️ Only one disc moved at a time.

☑️ Every move takes top disc from one stack and places on top of another.

☑️ No disc can be put on top of a smaller disc.

Bonuses:

Add timer-based scoring.

Track scores across games (even if the page is reloaded).

Extras:

☑️ Can add discs with a maximum of 7

☑️ Can remove discs with a minimum of 3

Technology Used: jQuery instead of Javascript

Initially, the plan was to utilize HTML, CSS, and Javascript that we had been learning over the past three weeks in our web intensive. However, after discovering some (deceptively) easy code featuring jQuery--a language we have not and will not go over in class--I decided to pursue jquery as my DOM manipulator of choice.

Approach Taken

After browsing the internet for useful code for this project, I found that you can create and use @for loops in SASS.

@for $i from 1 through 7 {
    .disc-#{$i} {
        width: 20px * $i;
        background-color: $pink;
    }
}

Source: http://thesassway.com/intermediate/if-for-each-while

With a handy little function written in jQuery:

tower.prepend($('<li class="disc disc-' + i + '" data-value="' + i + '"></li>'));

Source: http://api.jquery.com/prepend/

This seemed perfect for setting up buttons to add and subtract discs to increase or decrease the difficulty level.

What ended up happening is a lot of extra work in translating javascript into jquery and jquery specific methods. The methods, when they worked, were much simpler to write. However, sometimes the logic did not exactly work the way I wanted it to.

I consulted a friend who works as a webdeveloper specializing in javascript. In addition to helping me with my logic, her major note was that name naming of variables and functions needed to say what they are/do. I had named them vaguely and therefore and to go back and forth to remember what they did/responded to.

After trial and error, I was able to get a working version of the game that I liked.

An instructor helped me with my final goal (being able to add and subtract discs by pressing the button). Originally, I was able to add and subtract, but only by pressing the add/subtract buttons then hitting the reset button. Now you can add and subtract and immediately see the result.

Instead of return discNum after increasing the variable's value, I inserted the function that built the tower (buildTower($tower.eq(0));) which rebuilds the tower with the new number of discs immediately.

Play The Game

https://sun-mountain.github.io/hanoi_game/

Unsolved Problems

Sometimes, when the player clicks too fast, it breaks the game to where you can't deselect the top disc immediately and then changes the width of future selected disc. Only fix currently is to refresh the page which will restart the game, forgetting all progress.

For The Future

⭕️ Make game layout mobile responsive.

⭕️ Add move counter.

⭕️ Add win scenario.

⭕️ Add timer.

You can’t perform that action at this time.