Making Games with JavaScript
This week @AustinCodingAcademy I have been focusing on using JavaScript to modify the DOM. I made a basic TicTacToe game and a basic Pig Latin Translator with a GUI interface. These are items I have worked on before, but this time we had much more programming behind the seen to make them more advanced. I made a “Computer Player Mode” in the TicTacToe game. This took quite a bit of logic to make the game smart enough to try and bet the person using the GUI. I had a lot of issues with timing in the computer mode, since JavaScript is asynchronous. Often the program would be much faster than the GUI, causing display issues and logic problems. I learned a lot about how to look for a break in the code where the logic would stop and look for another input before proceeding. For example, when the computer won a hand, I had the computer getting to go first on the next game. I found it would have the next hand picked, before the user ever got a chance to clear the board. I solved this by changing the player who goes next after a win. This gave a natural break and waited for the user to give an input before moving on.
In class today I learned about this. and bind(). These are useful items when working with objects in JavaScript. JavaScript associates this. with what ever function called on an object, when normally you want this. to be assicated with the original object it came from. The bind() function can bind that reference to the object you want it bound to.
Working with the DOM you must understand the difference between attributes and properties. Attributes are in the HTML itself, rather than in the DOM. They are very similar to properties, but not quite as good. When a property is available it’s recommended that you work with properties rather than attributes. An attribute is only ever a string, no other type.
Working with objects it is important to be able to iterate through an object. You can loop through an object with the for/in loop, or for/of loop.
You can also loop through objects by first converting the object into an array. Then, you loop through the array. You can covert an object into an array with three method:
- Object.keys
- Object.values
- Object.entries
An important part of JavaScript is the Event Loop. The Event Loop has one simple job — to monitor the Call Stack and the Callback Queue. If the Call Stack is empty, it will take the first event from the queue and will push it to the Call Stack, which effectively runs it. Such an iteration is called a tick in the Event Loop. Each event is just a function callback.
There are also call stacks and task queues. So in short, a job queue is a queue of things to do (usually stored persistent) and a call stack is a stack of routines. A job would have variables assigned to it, and a call stack would be the abstract implementation. So a job could “call” a method from a call stack.
JavaScript is evolving just like any technology. The latest standard is ECMAScript 6 (or ES6). There are some differences between ES6 class and ES5 function constructors. ES6 class allows the developers to instantiate objects using the new operator. ES5 function constructors focus on how the objects are instantiated. They also ensure the developer that this keyword which is basically used inside the class only refers to the object that is being created by the developer.
Learning new programming techniques is fun, and I am enjoying my learning adventure @AustinCodingAcademy.
