I’m following the 2020 version of the Python tutorial. I had previously followed the 2019 tutorial, which has the same features but a different code structure.
Part 1 is about getting an @ character on the screen and moving it around.
The main interesting thing here is that the browser’s event loop works differently than what we get in Python, so the code structure is a little bit different.
- An element should be focused to receive input events. I attached my event handlers to the <canvas> display. An alternative is to attach handlers to the window so that we get the events no matter what is focused. However I plan to have other elements on the page that you might type into, so I don’t want those events.
- I map KeyboardEvent[3] to an action. Keyboard events have both a
keyand acode. The key name follows the current keyboard layout. The code name does not, but can distinguish keys that have the same key name, like the main left arrow and the numpad left arrow. For now I only need thekeybut later on I’ll also use thecode. - The Python tutorial has an
Actionclass hierarchy. Javascript objects can be created without a class, so I skipped the class. I created a union type for the types of actions allowed: {type: 'move', dx: number, dy: number} | {type: 'none'}. Instead of using methods on the classes, I have a switch (action.type) statement that handles the different types of actions. - The Python tutorial creates an
EventHandlerclass. I decided I don’t need that yet. I’m not yet sure what structure I’ll need, and often regret premature abstraction, so I’ll leave it as a global function for now, and structure it later.
The result is not particularly interesting yet but you can click on the game map and then move around with arrow keys. If the <canvas> isn’t in focus I print a message at the bottom saying to click to focus.