javascript_terminal
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| javascript_terminal [2023/11/20 12:42] – appledog | javascript_terminal [2023/11/24 01:34] (current) – appledog | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| = JavaScript Terminal | = JavaScript Terminal | ||
| + | * Also see: [[JavaScript Terminal v2|Version 2]] which is a more advanced version of this codebase. | ||
| + | |||
| This section will outline the basic JavaScript terminal code. This code was not used much when I taught JavaScript to Roger and Neo, but it serves the same basic purpose as the [[PyGame Terminal]]. | This section will outline the basic JavaScript terminal code. This code was not used much when I taught JavaScript to Roger and Neo, but it serves the same basic purpose as the [[PyGame Terminal]]. | ||
| The level of this code is the beginning of Season 2, for many reasons. If we took out the resize code, it might be late season 1 material, but with the resize code in I would say it is good for Season 2. Maybe a stripped down version could be produced later; but the idea here is that it will display on a cellphone or a tablet as well as on a desktop. | The level of this code is the beginning of Season 2, for many reasons. If we took out the resize code, it might be late season 1 material, but with the resize code in I would say it is good for Season 2. Maybe a stripped down version could be produced later; but the idea here is that it will display on a cellphone or a tablet as well as on a desktop. | ||
| - | You can view a technical demo of this at: [[https:// | + | You can view a technical demo of this program |
| == The Font | == The Font | ||
| Line 15: | Line 17: | ||
| < | < | ||
| < | < | ||
| + | <meta name=" | ||
| < | < | ||
| Line 42: | Line 45: | ||
| </ | </ | ||
| - | There is not much to see here. In the original we used normalizer, modernizer and a few other things, but I have stripped those off to show the basic idea. | + | There is not much to see here. The most interesting line is probably |
| - | There are four main parts: Color.js, which is a color map, Character.js which discusses what needs to be known to represent a character, Terminal, which holds the information about characters on the screen and how to draw them, and main.js which sets up everything and starts the game loop. | + | Otherwise our main goal is to load and run the JavaScript files. |
| Actually, you could probably refactor some things in main into a class (such as a Game.js class) and then just instantiate and run the class, like we do in Python for PyGame. Perhaps this will be done in a part two sequel article to this one. For now, it's left as an exercise to the reader. | Actually, you could probably refactor some things in main into a class (such as a Game.js class) and then just instantiate and run the class, like we do in Python for PyGame. Perhaps this will be done in a part two sequel article to this one. For now, it's left as an exercise to the reader. | ||
| Line 338: | Line 341: | ||
| However, one interesting quirk which arose is that the ctx.font has to be set upon terminal resize. I am not sure where the best place is to set it, but it seems to work great setting it on a resize. It would also work if you set it every time you drew a character, but if we assume that we are only using one font and are essentially the main application (a one-canvas app) then setting it on every character draw is probably unnecessary. | However, one interesting quirk which arose is that the ctx.font has to be set upon terminal resize. I am not sure where the best place is to set it, but it seems to work great setting it on a resize. It would also work if you set it every time you drew a character, but if we assume that we are only using one font and are essentially the main application (a one-canvas app) then setting it on every character draw is probably unnecessary. | ||
| + | |||
| + | == Also See | ||
| + | * Also see: [[JavaScript Terminal v2|Version 2]] which is a more advanced version of this codebase. | ||
| + | |||
javascript_terminal.1700484121.txt.gz · Last modified: 2023/11/20 12:42 by appledog