JavaScript Exercise - Target Blaster Game from Scratch

Set up a JavaScript game by creating a header class, a start button, and a score display inside a game container with a movable crosshair, mouse tracking, and basic styling.

Begin writing JavaScript to move a crosshair inside a container with the mouse. Listen for mousemove events, read clientX and clientY, and update the crosshair's absolute position via styling.

Learn to update an on-page crosshair with live x and y coordinates as you move elements, by styling a bottom-aligned, left-offset indicator and dynamically displaying values with JavaScript.

Create a start button, reset the score, and drive a requestAnimationFrame loop that updates the gameplay and animation, pausing when the game ends.

Learn to implement collision detection in JavaScript by comparing the bounding rectangles of two elements, including the four corners and intersection logic, returning true when they overlap.

Learn to create targets dynamically in JavaScript by implementing a bad maker function that builds divs with random positions, appends them to a container, and checks collision detection during gameplay.

Replace the red dots with random font awesome icons by using an icons array and a content delivery network. Adjust the font size and line height for better visuals.

Learn to generate random hex colors for targets, use data-set attributes for speed and direction, and implement four-direction movement with boundary checks to create colorful targets.

Learn to implement firing at moving targets with mouse events, detect hits via collision checks, remove hit enemies, respawn new ones, and update score with variable points.

Implement a JavaScript game over message in a target blaster game by toggling the game over display on start and end, updating the score, and removing enemies.

Expand bad guys' movement to eight directions by enabling diagonal motion and updating direction handling with checks for positions 1 through 8. This enhances gameplay and provides more movement options.

Add hazards to raise challenge by creating bomb icons with zero point value, using a hazards counter and collision checks to trigger game over when a hazard is hit.

Learn to shoot multiple bullets from clicks, update animations, detect collisions with moving targets, remove hits, update score, spawn new enemies, and reset on game over.

Review a JavaScript target blaster game from scratch, disable input when not in play, and refactor into separate style and script files while detailing collision, scoring, and hazards.