How are games written on canvas?

Question

JavaScript

It's interesting to hear from experienced developers how they write simple games. Take for example the simplest mini-game in the tower defense genre. Some field, there is a cannon, an enemy appears, when he approaches, the cannon fires a projectile, the projectile flies, hits the enemy, his health is taken away. Interested in:
1) how do you load graphics? straight from the pictures? Is it possible to take something from a binary file?
2) How do you start writing a program? What kind of list of necessary functions or even classes do you create, and then write logic in each? What are the cannon, projectile and enemy in your program?
3) How much easier is it to write such toys on frameworks like phaser, or can you write just as quickly on pure javascript?
These are such children's questions... I hope the game developers will not laugh too much, but without irony they will tell in detail about their daily development process :)

Answer 1

Just take and create the architecture of your application (game), read the documentation of the canvas (or framework API) and write.
Graphics - tile-map.
Game objects are classes.

Answer 2

There are three approaches to making games if you're new:
1) It's up and running. Not planning far ahead, stepping on all sorts of rakes, overcoming both yourself and your bad code. The cons are obvious. Pros: you don't need to bother with the theoretical base, you do everything just to make it work, but you gain practical knowledge by leaps and bounds.
2) Read methodological literature. Long, painful, hard. And most of the good literature is only in English. Write out what you think will be useful in development, write some kind of plan for your future actions. Cons: it's long, it's hard, you forget what you read not so long ago. In the end, things won't work out the way you planned. Pros: you will be taught all sorts of rakes from someone else's experience. Another thing is that you will not understand why this is a rake, because. not enough practice.
3) Find an experienced team and join there as a junior. And be sure to a new project. Small. You can even do nothing there, carry coffee, but you must be aware of everything that happens there. Constantly monitor changes, wonder why they do it this way and not otherwise, and stuff like that. The advantages are obvious.
Well, there is a combined approach, which is most often found in practice. You read several books, start developing, make some kind of prototype, then read more, ask more experienced guys what you are doing wrong. You improve your game, you refactor. Iteration after iteration, cycle after cycle, repetition after repetition...
And as for the immediate question, apparently you don't even know how game studios and their development work, what a game engine is... Read, for starters, the book " Game Engine Architecture" by Jason Gregory to get an idea of ​​the main tool in the hands of a game developer. It describes what an engine is, what subsystems it usually consists of, how it is usually implemented, and how programmers and game creators work with it.
And this is the technical part. There are an order of magnitude more books on game design, because the gameplay always decides.

Answer 3

The beauty of frameworks lies in getting rid of the routine like preloaders, calculating physics, and generating levels based on external data (maps). If you fundamentally need to do everything yourself and invent your own bicycle, then yes, the canvas dock will help you. If you want to save time - then phaser(3) and similar engines.