Musical Chairs

Game
Game Won Screen
Game Over Screen
Paused Screen
Story
Start Page

Inspiration

Musical chairs is a popular party game loved by all. Thinking about it I wondered what would happen if the chairs themeselve moved, the joy and wonder would increase infinitely. This was the inspiartion behind the musical and magical chairs game: "Musical Chairs"

What it does

When you open up the webpage, you are greted with a story about the chiar. Scrolling down you find the start button. The game is set ina canvas element. Every element visible on the screen is drawn using "ctx" of 2D figures. The user controls the chair while dodging from fires whick keep on moving around the screen bouncing off walls in patterns. Navigation is done through Arrow keys. There is pause functionality in the game, using the esc key. When a collision is detected, the game stops and a game over message is drawn on using ctx. On reaching the music the game is won.

How I built it

I bulit it on glitch.com, i used assets that were dwnloaded from the interent using appropriate Public License. The main html page was easy to build, however i had to hide a lot of elements using display: none. The most interesting part of the project was making the game. I used Vanilla JS. The game was divided into diferent class objects and a final game object was used to control it. The collision were detected using position matching of the elements.

Challenges I ran into

Using JS This was my firs time using JS and it was a lot of fun and a greaf leearning opputunity
Preventing the scroll of windows whiel controlling the chair.
Positioning the canvas element correctly.
Understanding the use of Classes.

Accomplishments that I'm proud of

The game has different game states this was done with the help of the al governing game object. Understanding how classes work was very tought but i am happy i got throught that and it was a lot of fun after that
Using event listeners to pause th game, move the game
Adding music and controlling its play and pause attributes. ## What I learned I had never used JS upto now. That was a tough expereince. I had tpo satrt from the very basics. The canvas element seeemed the toughest at the begining but become the most eay part to do nby the end. I had to put in event Listeners and make appropriate change when something occured, that was entirely new, controllig something with arrow keys ans so freeel.

What's next for Musical Chairs

I would love to add a score board.
Surely collision animations are going to be improve
The abilty of the fire to move with respect to the chair in a predective manner.