javascript_rubyracer

application.css

.container {
  margin: 20px auto;
  width: 600px;
  padding: 0px 20px 20px 20px;
  border: 1px dotted black;
}

.racer_table td {
  background-color: white;
  height: 20px;
  width: 20px;
}

.racer_table td {
  /*border-left: 2px solid red;*/
  border-right: 2px solid red;  
}

.racer_table td.active1 {
  background-color: purple;
}

.racer_table td.active2 {
  background-color: orange;
}

application.js

$(document).ready(function() {
  $(document).on('keyup', function(event) {
    // Responds to "Q"
    if (event.keyCode == 81) {
      $('.active1').next().addClass('active1');
      $('.active1').eq(0).removeClass('active1');
      if ($("#player1_strip").children("td").last().hasClass('active1')) {
        $(this).off(event); 
        $('#game_over').append("Player 1 wins.");
        }
      }
    // Responds to "P"
    else if (event.keyCode == 80) {
      $('.active2').next().addClass('active2');
      $('.active2').eq(0).removeClass('active2');
      if ($("#player2_strip").children("td").last().hasClass('active2')) {
        $(this).off(event); 
        $('#game_over').append("Player 2 wins.");

        }
    }

       // update_player_position('player1', 10);
  });
});

index.erb

<div class="container">
  <h1>Ruby Racer!!</h1>
  <p>Nuts!</p>

  <div>
    <p id="game_over"></p>
  </div>

 <table class="racer_table">
  <tr id="player1_strip">
    <td class="active1"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>

  <tr id="player2_strip">
    <td class="active2"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
</div>