We target the 3-intersection point between the horizontal line and the vertical line.
We have defined three DIV elements there to display the graphics when hitting the J, K, and L keys. We modify the HTML to add a data-line-no attribute to these elements:
<div id="hit-line-1" data-line-no="1" class="hit-line hide"></div> <div id="hit-line-2" data-line-no="2" class="hit-line hide"></div> <div id="hit-line-3" data-line-no="3" class="hit-line hide"></div>
We move to JavaScript. We define a new function inside the
audiogameobject:initTouchAndClick: function() { var game = this; $('.hit-line').bind('mousedown touchstart', function() { var line = $(this).data('lineNo') * 1; // parse in int game.hitOnLine(line); return false; }); $('.hit-line').bind('mouseup touchend', function(){ var line = $(this).data('lineNo') * 1; // parse in int $('#hit-line-'+line).removeClass('show...