My First Project in General Assembly.

This medium post is gonna be about my experiences and takebacks from this project. Some back story, 2 weeks into the course and we were already given our first Project. It was to create a game, any game.

Having no prior coding experience, I was honestly worried. I was worried about not being able to create a game at all, hoping my code wasn’t gonna be spaghetti.

Having some faith in my skills and google, I was about to understand new things about coding, the thought process, debugging skills and javascript.

So I created a game, inspired by “Find Waldo”. I’ll get into how I got to that later.

First project

Aim/Goal.

This project aimed to get familiar and practice Javascript and man was it tough. I’ll take you through.

I just wanted to challenge myself and be uncomfortable.

Brainstorming an Idea.

Coming up with an idea is the toughest part of any project. It takes time, sometimes we just sit there thinking and pondering of what kind of projects can we create.

It was tough, I took an entire day deciding what to do. I had 3 ideas

1. Word typing game (Hangman, Speedtyping)

2. Card Game (Turn base game, To find monsters)

3. Clicking Game (Find waldo, Pick the correct colour)

So after brainstorming, my next thought was what do I want to achieve or learn from my project. I wanted to deal with something that handles DOM manipulation. (DOM manipulation is directly and dynamically updating, changing the style or content on a document) apple => “click” => banana

Comparing all the ideas, The word game might not be as DOM Heavy, the Card game as well. I thought the click game would allow me to practice javascript and to achieve what I aimed for.

Starting to code.

Stage 1

Stage 1

Creating the simplest version of my project.

Game logic, click PINK circle score points and SQUARE lose a life. At this stage, the circle doesn’t move and the squares are randomly positioned.

However, the issue I faced during this stage was to set a rule where the circle will never be covered completely. I looked it up and wanted to implement collision detection but I didn’t understand what was going on with the code. so I didn’t want to use it.

Stage 2

Stage 2

It wasn’t smooth sailing, I faced difficulty during the process of creating the game. At stage 2, I change something in my code and it stopped working.

To solve this problem I started to put messages in between my code so that I’ll be able to see which line it started to go wrong.

After solving it, I decided to create a separate test file so that ever implementation can be tested before integrating it with my original file. I liked this habit and carried it over to my future projects.

As you can see the blocks are starting to move, I used an in-build javascript function called .animate to make this possible.

A snippet from my code and (for nerdy people like me)

var animation = element.animate(keyframes, options);
var squaremovementup = [
  { transform: 'translateX(00px)' },
  { transform: 'translateY(-450px)' }
    ];
var squaretiming = {
    duration: 1500,
    iterations: Infinity,
    direction: 'alternate',
}
for (var i = 15; i < squares.length; i++) {
        document.querySelector(`.square${i}`).animate(
        squaremovementup,
        squaretiming
        )
    }

stage 3

Stage 3

In stage 3, I wanted to make my game more dynamic and challenging. So I decided to randomise the colours of the squares and circles. Furthermore, adding more circles, not just 1.

After going for a meeting with my instructors he gave me feedback saying it was a cool game and asked if I was gonna do more.

Stage 4

Stage 4

After receiving the feedback, I decided to challenge myself to create another layer. It’s where the circles will change in colour, size, movement speed and position every few seconds.

At this stage it’s impossible to score any points, however, the player doesn’t know that and will valiantly click on the circle. Soon the player will give up and listen to music and watch the screen go.

Conclusion.

This project was the first thing I have ever created with my own two hands from lines of code. It gave me a deeper understanding of javascript and the thinking process of a developer.

Technologies

1. Html
2. CSS
3. Javascript

Github Link: https://github.com/TsaiRenkun/Project_1