If you want to see a live demonstration, simply copy the code into Notepad++ and run it in Chrome as an .html file. I encountered some difficulties when trying to display a working example using Snippet or CodePen, so unfortunately, I couldn't provide direct links to those websites.
The question at hand is this: when the laser is fired once, it behaves exactly as intended by incrementing with lzxR++; until it reaches the border of the game arena. However, if the space bar is pressed while the laser is still in motion, the code attempts to display the laser in two places simultaneously which creates a choppy effect. How can this be avoided? Is there a way to stop the incrementation and fire a fresh new laser with just one press of the space bar, even if the previous laser was mid-increment?
Below is the provided code snippet:
<html>
<head>
<style>
/* CSS styles for the elements in the game */
</style>
<title>Portfolio</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
// JavaScript functions for controlling the game
</SCRIPT>
</head>
<body>
<div id="blueCanvas">
<div id="laser"></div>
<div id="blueBall"></div>
</div>
<p id="pixelTrackerTop">Top position is 0</p>
<br>
<p id="pixelTrackerLeft">Left position is 0</p>
</body>
</html>