Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
JavaScript Exercise - Tank Shooter Game from Scratch
Rating: 4.7 out of 5(15 ratings)
2,280 students

JavaScript Exercise - Tank Shooter Game from Scratch

Build a JavaScript Game from scratch using only JavaScript no libraries no canvas - DOM manipulation Practice exercise
Created byLaurence Svekis
Last updated 11/2024
English

What you'll learn

  • Apply JavaScript and move elements within a page using JavaScript
  • Run animations within JavaScript
  • Create elements within the DOM
  • Manipulate HTML elements using JavaScript

Course content

2 sections • 34 lectures • 2h 25m total length

  • Introduction to Game Play and what you can expect from the course2:02

    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.

  • Web development environment setup4:32
  • HTML CSS page Setup2:41
  • Add Style and Elements HTML13:37

    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.

  • HTML source code0:16
  • CSS source Code0:45
  • JavaScript Start the Game5:38
  • Play the Game JavaScript3:40
  • Create a Tank CSS4:22
  • JavaScript Math CSS transform explained3:55
  • Move along with Mouse7:40
  • JavaScript Move Turret3:38

    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.

  • Source Code0:26
  • Shooter Bullets Create Elements JavaScript10:10
  • Remove elements from document JavaScript3:43
  • Source Code0:41
  • Setup Bad Guys JavaScript17:29

    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.

  • Source Code1:11
  • Moving Elements JavaScript Game7:23
  • Source Code1:18
  • JavaScript Element Collision detection8:01
  • Detect Collision with Player and Enemy4:49
  • Source Code1:33
  • Update Stats Dashboard values Element manipulation3:21
  • Game Over Function JavaScript5:48

    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.

  • Source Code1:45
  • Color the elements randomly JavaScript3:42
  • Blast the Bad Guys JavaScript Collision detection between two elements4:53
  • Final Game Tweaks and bug fixes2:41
  • Source Code Game Review10:26

    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.

  • Final JavaScript Source1:50
  • Source Code and Resources0:13

Requirements

  • Fundamental JavaScript concepts
  • Access to computer
  • Use of editor to write code
  • HTML and CSS knowledge

Description

Practice and learn more about JavaScript while building a fun interactive tank shooting game from scratch.  Prefect course for beginners to learn JavaScript!!! Step by step learning with all steps included. No libraries, no shortcuts just learning JavaScript!

Learn how you can use JavaScript to create, manipulate and make interactive HTML page elements.  Using JavaScript scripting you can create a fully interactive dynamic game from scratch.  Source code is included to get you started quickly.

This course is designed to help you practice JavaScript, you should have a functional understanding of the JavaScript language before taking this course. Please note that the course covers only JavaScript relevant to the building of the game.   Also HTML and CSS knowledge is essential as scope of this course is all JavaScript focused.  

Course covers

  • Learn how to setup your gameplay area using HTML and CSS
  • Setup page elements and prepare variables.  
  • Create interaction with JavaScript event listeners to invoke functions on mouse actions
  • Run animationframe to change HTML elements style attributes and calculate positions of shots and enemies
  • Calculate angles for the turret to follow the mouse movements and shot in the angled direction of where the mouse is.
  • Create elements using JavaScript and add/remove them from the page
  • Setup start game functionality with values to create game play
  • Access the JavaScript Document Object Model to manipulate element properties
  • Setup a dashboard to output variables for the user like score and life left
  • Setup helper functions to reuse within the game play
  • Check for element overlap and detect collisions which is essential for any game.  

All this is included and a whole lot more.  

Along with friendly support in the Q&A to help you learn and answer any questions you may have.

Try it now you have nothing to lose, comes with a 30 day money back guarantee.  

Start building your own version of the game today!!!!

See what you can build while you practice JavaScript!


Who this course is for:

  • Beginners to JavaScript
  • Anyone who wants to practice writing JavaScript
  • Anyone who wants to learn to make a JavaScript game without any libraries
  • Web developers
  • Webmasters

Report abuse