nw/index.html

## index.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Racecar</title>
    <link rel="stylesheet" href="racecar.css"/>
</head>
<body>

    <div class="container">
      <div class="lane">
        <div id="player1" class="player"></div>
      </div>
      <div class="lane bottom">
        <div id="player2" class="player"></div>
      </div>
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="racecar.js"></script>
</body>
</html>

## racecar.css
body {
    background-color: darkgreen;
    height: 100%;
    width: 100%;
    margin: 0;
}

.container {
  margin-top: 150px;
}

.lane {
    position: relative;
    height: 100px;
    width: 100%;
    border-bottom: 3px dashed yellow;
    border-top: 2px solid black;
    background: #000;
}

.lane.bottom {
    border-top: 3px dashed yellow;
    border-bottom: 2px solid black;
}

.player {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 0px;
  top: 25px;
}

#player1 {
    background-color: #bcc7cf;
}

#player2 {
    background-color: #cf4744;
}

## racecar.js
$(document).ready(function(){

  var player1 = $('#player1');
  var player2 = $('#player2');

  var course_length = $('.lane').width();
  var piece_length = player1.width();


  $(document).on('keyup', function(event){


    if(event.keyCode === 81) { // if 'q' is pressed (lane 1)
      var current_left = parseInt(player1.css('left'));
      current_left += piece_length;
      player1.css("left", current_left);
      if(current_left + piece_length >= course_length) {
        // player1 has won
        reset();
      }
    } else if(event.keyCode === 80) { // if 'p' is pressed (lane 2)
      var current_left = parseInt(player2.css('left'));
      current_left += piece_length;
      player2.css("left", current_left);
      if(current_left + piece_length >= course_length) {
        // player2 has won
        reset();
      }
    }
  });


  function reset(){
    player1.css("left", 0);
    player2.css({"left": 0});
  }

});
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>Racecar</title>
	<link rel="stylesheet" href="racecar.css"/>
	</head>
	<body>

	<div class="container">
	<div class="lane">
	<div id="player1" class="player"></div>
	</div>
	<div class="lane bottom">
	<div id="player2" class="player"></div>
	</div>
	</div>
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.js"></script>
	<script type="text/javascript" src="racecar.js"></script>
	</body>
	</html>
	body {
	background-color: darkgreen;
	height: 100%;
	width: 100%;
	margin: 0;
	}

	.container {
	margin-top: 150px;
	}

	.lane {
	position: relative;
	height: 100px;
	width: 100%;
	border-bottom: 3px dashed yellow;
	border-top: 2px solid black;
	background: #000;
	}

	.lane.bottom {
	border-top: 3px dashed yellow;
	border-bottom: 2px solid black;
	}

	.player {
	position: absolute;
	width: 50px;
	height: 50px;
	left: 0px;
	top: 25px;
	}

	#player1 {
	background-color: #bcc7cf;
	}

	#player2 {
	background-color: #cf4744;
	}
	$(document).ready(function(){

	var player1 = $('#player1');
	var player2 = $('#player2');

	var course_length = $('.lane').width();
	var piece_length = player1.width();


	$(document).on('keyup', function(event){


	if(event.keyCode === 81) { // if 'q' is pressed (lane 1)
	var current_left = parseInt(player1.css('left'));
	current_left += piece_length;
	player1.css("left", current_left);
	if(current_left + piece_length >= course_length) {
	// player1 has won
	reset();
	}
	} else if(event.keyCode === 80) { // if 'p' is pressed (lane 2)
	var current_left = parseInt(player2.css('left'));
	current_left += piece_length;
	player2.css("left", current_left);
	if(current_left + piece_length >= course_length) {
	// player2 has won
	reset();
	}
	}
	});



	function reset(){
	player1.css("left", 0);
	player2.css({"left": 0});
	}

	});