JavaScript Exercise - Tank Shooter Game from Scratch

Learn to build a vanilla JavaScript game from scratch by dynamically generating and updating DOM elements, styling them, and creating random fire shots, focusing on HTML setup and core JavaScript.

Set up your web development environment with Brackets live preview and Chrome dev tools to write, render, and debug HTML, CSS, and JavaScript for a tank shooter game from scratch.

Set up the HTML page, link a stylesheet and script file, and create style.css and script.js to enable live preview and testing in Brackets.

Style a browser-based tank shooter game by importing a Google font, structuring a dashboard and play area with HTML and CSS, and using JavaScript to dynamically update score and progress.

Hook up the start button with JavaScript to begin the game, using querySelector and getElementById to grab elements, add a click listener, and start a continuous animation loop with requestAnimationFrame.

Set up the game container and input handling, implement mouse down firing, and manage play state to fire bullets, move shots, and update the dashboard while spawning enemies.

Create and style a tank using CSS, building a static base with a spinning turret and blue box, configuring absolute positioning, borders, colors, and transitions for upcoming JavaScript movement.

Learn JavaScript math and CSS transform to compute the mouse angle for rotating a turret around the box center, using atan2, sin, cos, and degree-based rotate transforms.

Learn to make a tank turret follow the mouse inside a container by calculating the angle from the tank center to the cursor using arctan.

Move the turret by tracking the mouse, calculate the rotation angle in degrees, and apply a css transform rotate to the turret element, updating its position for browser compatibility.

Create bullet elements with document.createElement, assign the fire me class, position them absolutely, and move them toward the mouse angle using sin and cos.

Learn how to manage bullets in a tank shooter game by calculating movement from angle, updating styles, and removing offscreen bullets to prevent endless elements and prepare for collision detection.

Import font awesome icons via CDN, use an icons array, and create ten bad guys with a dynamic bad maker function, each randomly sized and positioned with basic movement.

Move the enemies by selecting all elements with the badie class and updating their top and left positions using offset top, offset left, and x move and y move.

Learn to implement collision detection in a JavaScript game using getBoundingClientRect to compare elements’ left, right, top, and bottom values, build an isCollide function, and trigger life loss on collision.

Implement collision detection between player and enemies, reduce player lives on hit, and color the base red to reflect damage as the collision loop processes.

Implement the update dash function to refresh the scoreboard and progress bar, calculate the lives percentage, and adjust the bar width to reflect player health.

Create a game over function to stop the animation loop, show the game over screen with the score, reset lives, clear enemies and shots, and return to the start menu.

Add random hex colors to enemies with a random color function applied before rendering, returning two-digit hex values. Reinforce collision detection for shooting and destroying enemies in upcoming lessons.

Apply collision detection between shots and enemies to register hits, remove collided elements, and update the score with 1–5 points while spawning new enemies to extend the game.

Apply final tweaks and bug fixes to the tank shooter game, test gameplay to prevent errors when removing elements after game over, and guard collisions with an active gameplay flag.

Review the tank shooter game's source code to set up HTML, CSS, and JavaScript structure, implement a start button, play area, progress bar, animation loop, collision detection, and dashboard updates.