Learn JavaScript with Fun - Build an UFO Hunter Game

Explore using JavaScript in HTML with inline scripts in the body or head, or via external .js files, and leverage live server and caching for faster, maintainable code.

Explore variables and datatypes in JavaScript, including numbers, strings, boolean, null, undefined, big integer, symbol, and object. Learn dynamic typing, the var keyword, simple operations, and identifier rules.

Explore how JavaScript uses arithmetic, assignment, comparison, logical, bitwise, and conditional (ternary) operators to manipulate values and compute results.

Master JavaScript conditional logic with if, else if, and else blocks using prompts and console logs to validate age and handle true or false conditions.

Explore how the switch statement evaluates a single expression against multiple cases, using case, break, and a default to handle summer months and the not summer scenario.

Explore how JavaScript functions work, defined with the function keyword, named or anonymous, receive parameters and arguments, return values, and how they enable code reuse and conciseness.

Explore string and number methods in JavaScript, including length, indexOf, replace, and slice. See how primitives act as objects, convert numbers to strings, and reveal binary or hexadecimal representations.

Explore how JavaScript arrays store multiple values using literals for quick creation. Access items by zero-based indices, note the length, and recognize how they differ from objects.

Explore JavaScript loops, including for, while, and do-while, with break and continue to control flow for building the UFO hunter game.

Master the break and continue keywords in JavaScript, learning how break terminates loops and switches and how continue skips iterations within for loops and arrays.

Master for in and for of loops in JavaScript by iterating object properties and array values, and understand how indices work for one-dimensional arrays.

Explore how JavaScript scope controls visibility from local to global, showing that local variables stay inside a function while global variables live on the window object.

JavaScript hoisting moves declarations to the top of the scope, but not initialization. Explore calling functions before they are declared and how variables show undefined before initialization.

Explore how let and const define block scope in JavaScript, unlike var's function scope, and why you should prefer them for robust code.

Use object constructors as blueprints to instantiate objects with defined properties. Leverage constructor functions to create car and student templates, accessing properties with this and building a full name method.

Explore object oriented programming in JavaScript, focusing on prototypes and prototype based inheritance. Compare class based and prototype based models with examples like animal, cat, and dog.

This lecture explains JavaScript object prototypes, showing how each object links to a prototype via the prototype property and how prototype methods save memory by avoiding per-object copies.

Explore prototype chaining in JavaScript, where every object links to a prototype that holds properties and methods, forming an inheritance chain toward null.

Discover how JavaScript uses prototype-based behavior and how the class syntax provides syntactic sugar, with constructors and new creating objects while methods live on the prototype.

Explore JavaScript's call and apply methods to invoke a function on another object's context, using this to access first and last names and pass parameters via a one-dimensional array.

Explore arrow functions in JavaScript, mastering concise syntax with single-expression returns, and how the this keyword is handled differently compared to regular functions.

Explore CSS (cascading style sheets) for web page styling, covering inline, internal, and external styles, with selectors, declarations, properties, and values, plus practical examples using p, h5, IDs, and classes.

Demonstrate block level and inline elements, using paragraphs, headers, and strong, and show how div and span group content and apply CSS styles like color, padding, and borders.

Explore the document object model and learn to access and manipulate HTML elements with JavaScript. Use getElementById and innerHTML to update content and styles, and handle button click events.

Learn how the browser object model structures the window and document, and how the document owns elements and lets you access them with document.getElementById, the location object, and screen size.

Learn to implement a Space Invaders style shooter in JavaScript, building a four-row by eight-column UFO hunter game where a spaceship defeats descending aliens, earning points as waves speed up.

Outline the project structure for the UFO hunter game, including a root hunter folder and folders for images, javascript, sounds, and css, plus an index.html entry point.

Set up a canvas in the HTML page, access it with document.getElementById to obtain a 2d drawing context, then draw shapes, text, and images for the UFO hunter game.

Center a 900×750 canvas, apply a repeating background image, and implement a resize function so the canvas covers the full window with a 1-pixel border.

Explore the game engine and canvas-based animation, using arrow image and clear to update positions. Build an update loop with game states from opening to game over at 60 fps.

Explain how prototypes implement inheritance and emulate classes in JavaScript, then apply a canvas-based game basics setup with a stack-based position tracker for game states.

Explore animation by building a game loop that updates positions and draws on the canvas, using setInterval to achieve 60 frames per second.

Explore the opening position in a JavaScript UFO hunter game, defining the draw function, gradient title, and start controls, while ensuring script order and the game loop.

Master keyboard management for a JavaScript UFO hunter game by pressing space to start, tracking pressed keys in a data structure, and navigating to transfer position with key down events.

Navigate from the transfer position to the in-game position by animating font size and color over a two-second transition, drawing a 'get ready for level' message and updating the canvas.

Learn to structure in-game positions and objects in JavaScript by creating a space ship object, initializing its image, and drawing it on the canvas with the center of the image.

Move the spaceship left or right by listening for key codes 37 and 39, updating its x position with a defined speed in the update loop.

Limit the space ship movement by reinitializing its x within the left and right play boundaries when it crosses them.

Define a bullet prototype with x and y coordinates and a one-dimensional bullets array, shooting from the ship center via the space bar and animating upward.

Animate bullets in a JavaScript canvas game by moving bullets upward, removing off-screen bullets from a one-dimensional array, and regulating fire rate with last bullet time and maximum frequency.

Animate enemy ships with horizontal motion by updating their x position using speed and current level, then bounce them at canvas edges by reversing direction.

Explore the vertical movement of enemy ships, moving right, down 30 pixels, then left. Use horizontal and vertical movement flags to govern this alternating pattern.

Identify frontline enemies in each column, store them in a one-dimensional array, and update their line positions after movement to enable bombing in the UFO hunter game.

Animate enemy bombs in the ufo hunter game by drawing pink rectangles and moving them downward, removing off-screen bombs; set up collision handling with the spaceship.

Detect collisions in a 2d game using hitboxes and bounding boxes to check rectangle intersections among the UFO, bullets, bombs, and the spaceship.

Handle spaceship collisions by iterating a one dimensional bombs array, removing bombs on impact and ending the game like the UFO bullet collision in the lesson.

Learn to implement and manage game sounds in a JavaScript UFO hunter game, including loading explosion, shot, and UFO sounds, controlling playback, and refactoring with loops and a switch statement.

Implement a real-time mute feature in the UFO hunter game using the S key to toggle a muted flag, preventing sounds through the sounds object and the mute function.

Implement a pause state using a position container stack to push and pop game states. Update the draw function to show pause prompts and enable P and escape controls.

Display an on-screen sound status for a JavaScript canvas game, toggled by a key and color-coded to show muted or active, and show a 'press B to pause' prompt.

Set the shield value to two, decrement shields on collision, and trigger a new opening position when shields fall below zero, while reporting level and score.

Activate the game over state when the shield falls below zero, display the current level and score, and wait for the space key (32) to restart from the opening position.

Explore final game customization by tweaking level parameters like speed and bomb frequency, and enforce a level cap at 10 to guarantee the hardest state remains achievable by the user.

Learn how JavaScript uses prototypes and modern class syntax to convert prototype-based code into ES2015 classes, enabling object-oriented design in a game development context.

Congratulations on finishing the javascript programming and game making course; study the completed code, customize the UFO hunter game, and practice to build confident knowledge in programming.