JavaScript gamedev

JavaScript is a universal language, so it can be used for making games. This way you could create game which can run in browser (though it's not only way - you could use WebAsssembly and you won't be limited to JavaScript)

But how to enter JS gamedev space?

Try first to make simple games, then more complex.

Complexity can have few aspects:

• graphics - GUI/button based games --> 2D graphics --> 3D graphics
• logic - very few rules (e.g. snake) --> games with more rules (e.g. platform game) --> whole simulation of the virtual world (strategy games, FPS games etc.)

how to learn make graphics:

1. Well, assuming you already know how to make websites in JavaScript I recommend that you first learn making very simple games with simple GUI based graphics - e.g. memory game, jigsaw puzzle, word guessing etc. This kind of games can be done in way you would usually make websites (e.g. using React or even with vanilla DOM)
2. Then you could learn how to make games with simple 2D graphics and animations like snake or platformer game. You could probably learn some 2D graphic library like Pixi.js or just learning plain canvas API for drawing and animating (though you could also animate objects using divs or svg and style it with CSS.
3. At next stage of learning you could learn some 3D graphics (I recommend using Three.js or some other high level 3D graphic library like e.g. Babylon.js). But be aware - 3d graphics can be challenge. It's harder to think in 3D than 2D, besides you have to think about more things - geometries, materials, textures, lights, cameras... You also need to have basic understanding of 3d graphics concepts like vertices, faces, normals, vectors, matrices... You would use libraries for exact calculations but still you need to know what you are trying to achieve.
4. When you have solid understanding of both 2d and 3d graphics, you could go deeper.
   • you could learn how to write own shaders (in Three.js there's ShaderMaterial for this purpose).
   • you could learn how to make your own geometries from scratch (e.g. using BufferGeometry in Three.js) - you'd need manually compute vertex positions - this demands of you deeper visual and numerical thinking
   • You could write simple 2d/3d graphics engine in pure WebGL (or WebGPU). This will be tedious - drawing simple triangle in pure WebGL is like few dozens lines of code. But this can be great educational experience. You'll get to know more about programming graphics in JavaScript.

how to learn make logic:

1. logic that can be implemented in few if statements: memory game, word guessing etc.
2. simple grid based logic: game of life, snake, tetris. You would need to make a grid/tilemap data structure and check some conditions
3. collision based logic - e.g. platformer games - you collide with coin - you gain points, you collide with enemy - you lose health etc. You would need system for managing and animating various logic and implement algorithms for collision checking. You'd probably need some event system.
4. simulation/agent based logic - where there are many independents "actors" which can do some actions and be in particular state. You'd need a way for simulating asynchronous processes - you could do this by using state machines, generators, async/await etc. You'll also need to learn some algorithms for path finding or invent some simple AI algorithms for you NPCs. If you wanted to implement this kind of simulations as a multiplayer, you'd need to learn how to synchronize gameplay between computers etc.