Intro
Today in the class we covered more advanced programming techniques including the creation of buttons, functions and recursion as well as better techniques for the creation of the common bouncing ball sketch we have seen in class.
Today’s Game
My sketch for today is actually more than a sketch. It is a small video game, which I call FingerSpeed. FingerSpeed of course is more than a game, it measures your click speed. Your goal is to click the red button as fast as you can, in order to raise the falling ball to the ceiling as fast as possible. Of course, I did not make the game easy and for that reason I actually made it hard to win, so the user will have to do quite a lot of clicks before winning (still not sure if the game is fun or annoying!). In case, the ball touches the ground the user loses and thus the game is over showing the appropriate message (You lost!). On the other hand, in case the user makes the ball touch the top of the sky, the player wins and thus the appropriate message along with the high score appears.
Creation
In order to code the game, I firstly created a simple ball on the middle of the canvas, that was falling with a certain speed (velocity). Then, I built the ground using a simple rectangle on the bottom of the canvas.
The next step, was to build the button which is a big red button on the bottom right of the canvas. Then it was the time to add texts in order to help the user realise what is going on. First I used the text command in order to add the text “Click the mouse as fast as you can!” and then I added the “Click Here!” text on the button in order to show the user where he/she has to click in order to play.
My next part, which was the most challenging was to activate the button in order to raise the ball every time it was clicked. On the other side of the coin, this should not happen if the click happens anywhere else on the canvas. For that reason I created two consecutive if commands, one that checks if the mouse is clicked and one that checks if the distance of MouseX, MouseY is within the radius of the button. In case both of these conditions are true the ball is slightly raised.
Moreover, I also had to add two more animations, one of them that would trigger if the user loses and one of them that triggers in case the user wins. This part was relatively easy. With a simple if statement in case the ball touches the floor, the background will become black and the message “You Lost!” will appear. On the other hand in case the value of the y-coordinate becomes less or equal to zero, then the background will become white and the message “You Won!” will appear as well as the high score.
The high score was a more complicated story. Initially I wanted to use the second() function, which contains the value of the current second and then I would reuse it at the moment the user won. This way the difference of these two values would be the high score and therefore the least the value, the better the score. Unfortunately the second() function did not seem to work for me so I used a simple counter and would permanently increase the value of the score by 10 continuously. This value along with the text “Your highscore is:” will appear when the user wins. Of course that means that the faster the user wins, the lower his score is, which is something wrong. For that reason, I would change the value of score with one more variable called highscore and thus the final value that would appear is the the number 10000 minus the score, in order to give higher scores to the users that finished faster and therefore clicked faster. You shall able to try the game below in the Game section.
Game
Conclusion
In conclusion, I hope that you enjoy playing my (annoying) game and have the highest possible score. It was quite fun to make and I hope to make even better games in the future, as I am a big fun of video games.
Thank you for reading,
Christos