Siege of the Belltower!!

Inspiration

I really like playing games, and this seemed like a doable project that would be fairly fun.

What it does

The user has to enter their name into the name bar at the top, and then click the button that says "Push Me!!!" very fast, until the yellow bar rises to reach the top of the blue bar, kind of like the bell in a ring-the-bell game reaching the top of the tower. Once the user reaches the top at least once, their name is featured on the leaderboard on the right, and they can see their score and the score of everyone else who has played the game.

How I built it

I used html to make the various boxes and labels and titles, and css to format them and arrange them. I also used javascript to animate it so that when the button was pressed, the yellow bar rose by a certain amount, and over certain intervals of time, the bar would decrease again. Scheme was used in order to store each user's score and display it on the leaderboard.

Challenges I ran into

It had been a while since I had done anything with html and css, and I did not know any javascript before this. Thus, I needed a lot of help with my project, and I also looked up quite a bit of what I wrote. Also, whenever there was a mistake, such as when the yellow bar wasn't rising or the leaderboard wasn't updating, it took me quite a while to figure out what was wrong, but eventually I got it.

Accomplishments that I'm proud of

I am proud of the fact that I was able to finish my project in this small a window, and that I learned a lot in the process. I am also happy that I was able to figure out what went wrong each time something was messed up.

What I learned

I learned a little bit about the box model and other things in html and css, and I definitely learned a lot in javascript given that I had never used it before. Some of these things were how to make the program perform a certain action when certain events occurred, such as the yellow bar rising once the button was clicked, and also making things happen every time a certain amount of time had passed, such as the yellow bar decreasing about every 20 milliseconds. In scheme, I learned how to use a hash table and how to use a web application to store information and display it. This was one of the hardest parts, and it will take me a bit longer to fully understand it, but at least I wasn't completely lost as to what I was doing.

What's next for Siege of the Belltower!!

I am not at all sure how I would do this, but it would be interesting to use a force touch trackpad so that the bar increased a certain amount based on how hard the user pressed the button, rather than how fast they kept on clicking.

Built With

• css
• html
• javascript
• scheme