Those of us who write or are learning to write JavaScript have used or use jQuery a ton. It’s a fantastic library that allows for incredible DOM manipulation in barebones JS applications.

Recently a friend and I made the Tron game in JS and jQuery and tested it with Mocha and Chai so that we could get better at writing complex logic in JavaScript as well as learn the new ES6 syntax which will most likely become the norm in 3–6 months. Hopefully gone are the days when you have 30 .prototype functions in your application!

I will cover some of the changes and benefits of using ES6 in a future blog post (or you can head over to a blog post that my boy Regis wrote on getters in ES6 for a quick intro https://medium.com/@rboudinot/calling-getters-on-getters-in-es6-classes-a81da6094c07#.7mq2ndf0k) but for now I want to address an issue that doesn’t get (in my opinion) enough coverage on stack overflow: Multiple Keypress in jQuery.

Here is the code we wrote, feel free to take a look in the lib directory and peruse through tron-bike.js, game.js, grid.js, and match.js if you’re eve lost on something: https://github.com/zRouth/tron

We’ve all probably used this code before when using key functions to manipulate the DOM:

And our rightOne(), leftOne() etc. functions call on a tron-bike.js class that has all our movement functions spelled out.

Now this code is completely fine for a first pass, and will allow us to move the Tron bike across our canvas using the arrow keys, which is fine if tron was a single player game, but how fun is that? Exactly, we wanted to make it multiplayer and here’s where the difficulty lies.

The line switch(event.which) {…} part of the function basically says that when a key is pressed, switch the event to that binding and execute our function, so if nothing is pressed then the up arrow (case: 38) is pressed it switches to our upOne() function, and then if key 40 is pressed (the down arrow on your keyboard) the event is “switched” to the new keydown being pressed and stops the previous “event”.

So if we want to make Tron a multiplayer game with 2 people playing head to head on the same keyboard, we have to make quite the work around. jQuery inherently doesn’t allow you to have multiple keypresses firing at the same time firing two different actions at the same time. It will fire one and then the other, so if player one is moving right, our code won’t pick up that player 2 is also trying to move left or up, or whatever.

I actually went to stack overflow for some initial help to get my legs underneath me but then realized our problem was far more complicated.

Here is the code a gentleman wrote to allow multiple keypress and output the keycode to hmtl in js fiddle: http://jsfiddle.net/gFcuU/

Looking at what he did I realized I wasn’t going to get this quickly so it was time to write some pseudo code:

Easier said than done.

My first/second pass looked a bit like this:

Let me draw your attention to the trueKeys and falseKeys functions. Don’t worry that they are called const (es6 is awesome though), these are most definitely functions . These are the functions that will store our keycode object hash with the key value pairs being { keycode: true } on keydown and { keycode:false } on keyup.

So we have an event listener on keydown and as long at the player isn’t dead: if (game.gameStatus !== “alive”) () then append to the DOM that playerOne or whomever is dead, otherwise set the keycode being pressed to true. Don’t worry about the rest, I’ll get to that.

Next take a look at the gameDirectionStatus function that stores our {keycode:function} obj. hash. We have all the WASD keys set to move player one up, down, left, and right and all the IJKL keys set to move player two. Ok cool, so now we have our two obj hashes, but these are just placeholders, they are just holding onto our objects. Now it’s time to actually call the function when the key is pressed.

Here’s where we throw in the executeTrueKeysFunctions (gotta love good naming!) Here we iterate through the first array of just keycodes and if the key is true, call the gameDirectionStatus() else if it’s false, return (don’t do anything). This false part of the function is very important as we found out because if you don’t have that, all keycodes will be set to true and you won’t be able to hit cmd-option-i to pull up the dev console or basically do anything else with the keyboard. Now you may have noticed the nested loop and I don’t recommend them, this is just a first pass to understand the logic.

So there we have it. And now we can execute multiple key functions that call different actions at the same time in JS and jQuery! I hope this has been helpful in understanding how to work through some complex logic and if you have any questions or suggestions please feel free!