Now that I have a working site, I technically am done with my goals in making my 20-Time project. But since adding things almost always means improvement to the whole site, I plan on adding more, probably even after the whole project ends.
I discovered that with the $5 per month server I have from digital ocean, I can have unlimited sites running on it. I made a site for my base domain, dawg.cc, mainly to give a background about me and my programming. This means I can keep expanding from the base I made with the original server.
For the next weeks I plan on making a high quality multiplayer game to put on the dawg.cc site, so that I can learn further about AI, interpolation, and server programming. After I complete this, I will use my new and improved skills to go back to work on my 20-Time site, in which I will add new games, improve site performance, and increase professionalism of my work.
This last week I have also reflected how these sites can be used for my future, like job applications, along with helping me learn skills for my major in Computer Science. It's going well!
Now that I have a working web server and website, I can now work on creating games to play and compete on.
I decided to make some sort of aim game, after my friend requested me to make one. I settled on making a cube clicking game, in which you click 15 cubes as fast as possible.
As previously stated, creating a game goes along the lines of:
1. Create the world
2. Create objects
3. Write the code
Step 1 - Creating the world
To create the world I actually used an an advanced 3d game engine, Unity. The engine is the same one used for multi-million dollar games like Rust. I have had some past experience with the engine, so doing what I wanted to do, make some colored blocks pop up, took about 30 minutes to perfect. Since my framework does not render in 3d, I simply took screenshots of each block that popped up, totaling 8 screenshots, which I would later overlay onto my 2d framework. That was it for creating the world.
Step 2 - Creating Objects
I was very grateful that I had made my editor when I started this step. The job, which would have taken 2+ hours, only took 30 minutes. I used the editor to overlay invisible buttons onto all 8 frames of the game, meaning I could detect if they were clicked.
Step 3 - Writing the code
Now that I had the world layed out, I started work on the game. Since each game state corresponds with a number , 1-8, I made a randomizer that randomly selects a state after you click a cube. This is more complicated then it all sounds, but after a few hours of keyboard mashing, and a few hundred lines of code, I had a functional game. I wanted to have a leaderboard system that ties in with my database that ideally, if a user is signed in, their score gets submitted to the database when they finish. I was able to accomplish this by using socket.io, which is a simple way to transport data from the client to the server. When a user clicks the 15th and final block, their score submits to the server. If the user is signed in, their score is submitted, if they are playing as a guest, the score is disregarded. This ended up being a very successful system, as I was able, and still am able to scale the system for different stats.
The finished product
I am very happy with how the game ended up. My friends and I competed for top spots on the learderboard for a while. Check out the site!, it is supported on Chrome, Firefox, and Edge. The game is the one named "AIM."
Over the past week I made some massive bounds in my project.
To start, I needed to make my website look official. One minor thing that makes a website look far more official is the presence of HTTPS. HTTPS is the secure version of the common protocol of HTTP. The entire point of HTTPS is to encrypt user data, as so it cannot be stolen by hackers. For my site, I really don't need this security, as the most private thing being thrown around is an email. But as previously stated, HTTPS improves the officiality of a website. This officiality can be primarily seen in the top left of the address bar. HTTPS has a secure feeling lock, while a site that lacks it just has a "not secure" in the bar.
The premise of this is all great and jolly, but the execution of it is extremely hard. To make a website with HTTPS, I needed to acquire an SSL certificate, which is the heart of the encryption that HTTPS gives. After 4 days of research and problem solving, I settled on using Lets Encrypt, an authority that gives free certificates.
This is where things get complicated. To use the certificate I needed a domain. I bought a domain for $6.00, "dawg.cc," and added a sub domain "react," to make the final site domain "react.dawg.cc" (my project will inevitably be a reaction test so that is what the "react" is for). This new domain needed a server to point users to, so I logged onto the popular server hoster DigitalOcean. I bought one month of their cheapest server for $5.00, the set up was fairly easy, as they have a huge amount of documentation and guides. After about an hour of set up I got a base level site working.
I have worked a lot on the site since I wrote this post, so you can go check out the site. - https://react.dawg.cc
It has a game, leaderboard, sign on, and ranking which I will write about next week.
After my review with server code and data-basing, I went back to working on my game framework. My favored workflow for making a game is:
1. Make the game world with an image editor, such as Adobe Illustrator. This image would be the background of the game world.
2. Create collision objects to run, jump, and land on. These are invisible in the final game but are detected within it.
3. Actually make the game's logic, story, ect.
Steps 1 and 3 are not easy, but I can do them with time and creativity. The hardest thing to do here is step 2, when I have to make 100+ collision objects so the game can be worked on by a human. Without a tool to do this step, I would have to eyeball each of these objects and write them out like this:
Anyone, even without a knowledge of code, can see that this is terribly redundant.
When writing code, anything redundant can be written in a more efficient way. My way of making this more efficient, is by making a scene editor. With this scene editor, I can turn each of those lines of code into a simple and editable box, which I can use my mouse to edit. This makes a 2+ hour job of typing into a 10 minute job of clicking.
GitHub Repository for this editor
Very Simple example:
One thing I'd like to avoid with my website/web-server is storing sensitive data, like passwords. I still would like to create a sign in system though. This is where Google's sign in API comes in.
When signing into any sort of website these days, you probably see a "Sign in with Google" option. When you choose this option, and subsequently sign in, Google passes data about you to the website. This data may include emails, ages, usernames, and so on.
With this data, the website can match you with your own data on their database. This means you can securely sign in without risk of your password getting leaked.
I only plan on using two parts of data passed to me from the Google API, the users profile picture, and their distinct ID, which is a jumbled sort of characters.
With the profile picture I can assure the user that they are signed in by placing it in the top corner. But with the ID, I could easily store data like progress, games played, and ranking. With this stored data I could serve the user with data that is interesting to view, and is also stored safely.
Over break I worked on figuring out the logistics of using a server sided website, along with creating a database to store data about users.
The server is written on Node.js, a super fast server sided run time that has many plugins and features. The difference between a server sided and client sided website is that a server sided website can communicate data between itself and a client, or even client to client, while a client sided website can't communicate data anywhere other than locally.
Finding a perfect database was difficult, as there are hundreds, but I settled on a super simple one named LokiJS. Using this I was able to make a statistics tracking system for the classic game "pong."
For the last few weeks I've been focusing on making small projects to further improve my skills. In my computer science class, we were assigned to make some sort of code to do something. This was fun to make because it was a small way to improve my skills and show them to others. For this project, my friend and I made snake, a game that I've already made before, but I still enjoyed teaching my friend the basics of browser based games.
In the next few weeks, I'd like to practice more, there's no reason to rush to a conclusive project before I have the skills to do so. Over winter break I should be able to make some bounds in learning more complex things, like signing in with a Google account, and so on.
Thanks for checking out my 20 time project blog!
My proposal is a sort of game site, with some useful bits for people to see how they stack up mechanically with others.
For the last few weeks, I've been working on an html canvas engine which will be the source for many/every game I make pertaining to this site, and can be used for my personal projects too.
The technical bits of the engine are very complicated, but in basic terms, it makes a 1 hour task into a 10 minute one, as it removes a lot of annoying repetitive bits of code I'd usually have to write.
GitHub link for the engine: dawgine
I plan on working on this engine until around the new year, and then I will switch to creating the content to go on the site.