About this project
This project was given in first semester as an introductory assignment to CSS animations and JavaScript. It was also my first encounter with JavaScript, where I also came to love the programming language.
Game mechanic requirements
The game is a clicker game, in which you can click on elements to gain or lose points. The requirements to this project are as follows:
Movement
The elements can only move in certain patterns or paths that we defined by ourselves with CSS animations. We can use JavaScript to randomly add classes with different CSS animations.
Points, lives, timer
You can only click on "positive" elements and "negative" elements. Clicking on positive elements will reward points, and clicking on negative elements will deduct points and lives, up to a total of three lives. The timer will count down when the game starts and cannot be modified once it has started.
In my case, clicking on a fish will reward you with two points, while clicking on sea cucumbers will deduct 5 points as well as lose one life — well actually three lives, because cats have nine lives. Failing to click on a fish in time will also deduct one point. The goal is to reach 75 points within 60 seconds when the time is over.
JavaScript
During this project, we were taught a couple of things in JavaScript, such as assigning variables with
let for mutable variables and const for immutable variables, and methods such as
querySelector() to select DOM elements. We used math methods Math.random() and
Math.floor() for random numbers, and class methods classList.add(),
classList.remove() to add or remove classes. We used functions and event listeners as well.
We did not use Git at that time yet. In retrospect, the JavaScript file could be optimized in many respects.
Illustrations
Besides using JavaScript for this project, we used Adobe Illustrator to draw our own user interface and elements for the game.
Tech stack used for this project
HTML, CSS, JavaScript, Adobe Illustrator