Explore my latest portfolio of web development projects
covering a wide range of areas from HTML , CSS, JavaScript,
Visual Studio Code, UI/UX animation to WordPress and React.
Whac-A-Mole Website Game
Whac-A-Mole Website Game
This is a web game created with HTML, CSS, and JavaScript.
The first version:
Brainstorm and Search
Since we need to use the getBoundingClientRect() method to create web pages with images that follow the cursor, I wanted to make a whac-a-mole game. Since I was not familiar with this method, I started to look for related introductions and tutorials on the internet. At the same time, I was also looking for suitable pictures. I also made reference to the current gopher games on the internet, and formulated the basic rules and functions. But because the focus is on the use of getBoundingClientRect() method, so the rules only set the time for 30 seconds, hit the mouse can be added points, and in the final pop-up window to tell you the total score.
Development and testing process:
I’ve designed the web page layout for the Whack-A-Mole game. I use some oval images to represent the hole for mouse image to go up and down. I use the hammer images to replace the normal cursor during the game. During development I used the getBoundingClientRect() method to get the hammer to hit the mouse and add points,and I've been working on this part for a long time. There are few functions I used to cooperate with getBoundingClientRect() to make the hammer work without error which is moveCursor(), hit(), and for each loop to allow the hammer to interact with the mouse images. I also added a few variables which are time, timer, and startCountdown() function to achieve the time countdown function for game.
Second version: Re-brainstormed and re-designed:
I added refresh page, and pause, etc. to the first version. I also re-searched for suitable images and icons, since I couldn't find suitable hammers, the original hammer image was too low pixel, so I used an illustrator to draw my own vector image and used it in the game. In addition, I found background music, and hit sound effects to increase the game play experience. After that, I use a background-image to make the web page look more interesting.
Development - hand code:
First, I added two new buttons on the top left corner which is refresh and pause button. I added the pauseGame() and refreshGame() function to make the button can pause and refresh the game. But unfortunately, the hammer cannot interact with these two buttons in the first few tests. After that, I found that the problem is in the JavaScript part, and I’ve fixed the error of refreshGame() and pauseGame() function by modified the JavaScript code. Next, I change the images and icons for mouse and hammer to improve the visual presentation quality of the game. I also added a few audios effect which is hit sound when the hammer hit mouse and background-music to increase the game play experience of user. In addition, I use a background-image to make the web page look more interesting. Lastly, I added some CSS code for the start button, to make it can ease-in when the web page was launched and disappear after user click the start button to improve the visual presentation quality.
