Hiya! The alpha version of my game is out now! Head over to my profile if you want to check it out ^_^. In this post I'll be giving a small overview over what I learned while making this game and what I did to make it, as I know there are people on here that want to make games in HTML/CSS and JavaScript, but don't know where to start. I'll be splitting this into general advice, more specific guidance, and a little progress showcase.
If you have little to no knowledge of coding, I highly recommend you try making something like a small webpage first before you start planning anything. When starting this project, I had basic knowledge of HTML, CSS and JavaScript. So I knew how to make a webpage, decorate it and make it slightly interactive. This lets you familiarize yourself with the code and understand the scope of things you can do. It's a great way to gain experience and practice using the code you know.
I really only have one thing to say about planning : be precise, but not detailed. Understand clearly the flow or layout of your game, but don't get into the nitty gritty. Things change a lot during production, so what you planned in the start probably won't stick. For example, when designing a menu, have a good idea of what features you want to add and the general layout, but stuff like font face or color scheme and other stuff just leave for later. Writing a list or thumbnailing help a lot with this phase too.
When you are ready to move on to the actual making part, bear in mind a few things:
1. Make it exist first, perfect it later. This is often said about writing or drawing, but it works well in this case too. Perhaps you have a feature that has a lot of rules as to how it interacts and when it is active ect, which can get confusing fast. I recommend just making the feature itself first, then adding the rules and restrictions one by one. Like carving a statue!
2. Flowcharts are your friend. Before making new features, I often sit down with some good ol pen and paper and write the psuedocode down. It doesn't have to be line for line, something like on click-->check condition --> if yes --> do something is fine. This gives you a guide on what the flow will be like without focusing on the syntaxes and other stuff. It's really easy to get caught up in the syntaxes and forget details or mess up the flow. This saves you a lot of time from rewriting!
3.Leave comments in your code! Your project is going to take a while. You probably will forget what code does what and how functions you made work. A lot of time is wasted if you have to constantly re-read code to understand how it works. Leaving comments next to code briefly explaining it's function makes it more readable and save you a lot of trouble.
4. FOR THE LOVE OF GOD, KEEP BACKUPS AND SAVE VERSIONS OF YOUR CODE. So many things can go wrong. This guideline is written in blood, that I can promise you. What if you accidentally deleted a core function and didn't notice? What if you added a new function but suddenly nothing works anymore and you can't figure out why? Having a backup where everything on it FOR SURE works can be useful as a reference and can and will save your ass. It might be tedious to keep track of, but believe me you will be thankful to yourself for doing this.
5. Don't focus too much on naming. This may not apply for projects worked on by multiple people. As long as you understand clearly what the variable or functions is referring too, it doesn't matter what you name it. A lot of programmers emphasize on the importantance of good naming, but it's not that important really. Just don't use capital letters and symbols willy-nilly, try to keep a certain "form" in how you name things(easier to keep track of) and once you get used to it you can easily call variables and functions without having to memorize their names.
That's it for general, now onto the specifics.
1. Using Flexbox. If you don't know what Flexbox is, please go look it up before making your game. Basically everything in my game uses Flexbox to place features, so it's important you understand well how it works. Here's a visual guide to Flexbox properties that helped me learn to use it really fast. https://flexbox.malven.co/
2. Absolute positioning. This article explains it all : https://www.w3schools.com/css/css_positioning_fixed_absolute.asp
It's very useful, especially combined with Flexbox. If you have elements that move across the screen, this is especially important to know. I encourage y'all to experiment with it more, so you can see what I mean by that.
3.Using setTimeout. JavaScript does not have a wait function. Code runs all at once, it will not wait for code to finish running before moving on to the next line. That means if you have something like play animation --> wait until animation ends --> run some other code you will have to use setTimeout to ensure the timing is correct. This was horrendous to learn as all the information I could find on it was really unhelpful, so I'm putting down what I learned to help y'all out. It looks like this : setTimeout((parameters)=>your code here, wait time in milliseconds, value of parameters)
The code inside the function will execute after the wait time. For example :
setTimeout((text)=>document.write(text), 1000, a)
When running the function, the value of answer and b will be printed first despite being written last, and the value of a will be printed one second after the code is read. The code below setTimeout keeps running despite the timeout.
So, how to make a "true" wait so that everything below will wait for the first bit to finish before executing? Here's an example : function doMath(a+b){
setTimeout((text)=>document.write(text), 1000, a)
setTimeout((ans, value)=>doMath2(ans,value), 2000, answer, b)
function doMath2(ans,value) {
This method splits the function into two parts : one is before the timeout and the other after. This ensures everything after the timeout waits before executing. Another way is like this : function printLetters() {
for (i=0;i<letters.length;i++) {
setTimeout((letter)=>document.write(letter), seconds, letters[i])
This method pauses each new line of code by a longer time than the last, allowing you to repeat code in increments of time without overlap. Depending on your situation you can decide which one is more suitable to your needs. My guide here is just to let you understand better how setTimeout works.
4.Animation / movement. If you need to make an element move from one spot to another, I suggest you use the transition css property. This website explains the basics : https://www.w3schools.com/css/css3_transitions.asp
Say you need to move a character from one side of the screen to another. It's css might look like this
transition:top 2s, left2s;
The end point is top:0% and left:100%. To make the character move, just add this in your function : document.getElementById('character').style.top = '0%'
document.getElementById('character').style.left = '100%'
Your character will then arrive at the destination in two seconds. If there is code below those lines, remember to make them wait for two seconds until after it arrives before continuing if needed. It is important to note that no matter the distance, the character will take two seconds to reach the new top and left position, so you may need to change the speed. Not only does this allow for movement of elements, this also allows you to transition opacity, rotation and other things smoothly. My menu screen and the bug movement in my game are prime examples of transitions in play.
5.Graphics design / game layout. Take note of your screen resolution. If the size of your game is the fullscreen size of your screen, then make your assets based off that. It's less of a pain to have the asset in the exact size needed on the screen than resizing it in css later. Just open a canvas the same size as your screen resolution and make assets in there so you know how big they will be. An important thing to note is html takes images as an entire element. Say you have a picture of a banana with a large amount off empty space around it. Depending on the z -index of the image, anything beneath the banana will be unclickable as the banana is technically above them despite you being able to see them. You will have to add your assets as the exact size with a little empty space as possible if they are to be clickable with other things. Otherwise just make the image the same size as the screen with the right amount of empty space and layer things correctly. If you need to position objects exactly on a spot on the screen, but don't know the top/right/left/bottom properties, a trick I have is to figure out the smallest rectangle that can hold your asset inside, mark it out in the right spot on a canvas the same size as your screen, and uploading the image to this site here :https://imageonline.io/find-coordinates-of-image/
You can then find the pixel coordinates of the location of the corners of the asset. Depending on what css length units you use, you may have to do some math to convert the pixels to vh or em. If you have a lot of images to position, I suggest building a function to place them for you instead.
6. The internet has the answers. If you're stuck on something or don't know how to code something, you can search to see if there is a syntax that exists that can help you out! I've already linked this website a few times, but w3schools.com contains comprehensive information on HTML, CSS and JS code and their properties along with examples. Start by searching for the right syntax you need, then look up how to use it properly. Problems you may have probably have been encountered ages ago by someone on stackoverflow. Take some time to read how other solved their problems and figure out how to fix your own. I strongly advise against using AI to solve your problems. From old experience, using ai runs the risk of it deleting stuff randomly, changing features you want to keep and almost all the time it can't solve your problems at all. (Small disclaimer: I only ever tried ai like three times, before I knew the other bad stuff about it. I have never used it since because it's literally garbage). And of course you can ask online if you are really stuck! But sometimes you just need to let things rest for a day or two before you work on it again.
That's all I can think of to advise y'all for now! Have some progress pics hehe
Sorry for the quality lmao, mostly some messy notes an earlier looks at the game
Next goals include : character design, story development, sound effects.