HomeCoursesBuilding Web-Based Games and Utility Projects Using JavaScript

Intermediate

18h

Updated 6 months ago

Building Web-Based Games and Utility Projects Using JavaScript

Gain insights into JavaScript fundamentals while creating web-based games and utility projects. Discover DOM manipulation, classes, data structures, and enhance your career prospects in web development.

Join 2.7 million developers at

Overview

Content

Reviews

JavaScript is one of the most popular programming languages for creating interactive web pages, apps, and games. Knowing JavaScript can give you a huge edge in the job market. This course is for you if you want to learn JavaScript by creating hands-on projects instead of learning from theory. It will first introduce you to the basics of JavaScript, such as classes, objects, variables, and DOM manipulation. Then, it will help you create several web-based games and projects using different data structures, such as arrays, linked lists, LRU cache, and graphs. You’ll get clear step-by-step instructions for developing each project, while multiple assessments will help monitor your progress. By the end of this course, you’ll have a solid understanding of JavaScript and how to utilize its different data structures to create actual projects, giving you a good foundation to grow your career in web development, game programming, and interactive media.

JavaScript is one of the most popular programming languages for creating interactive web pages, apps, and games. Knowing JavaScr...Show More

WHAT YOU'LL LEARN

A working knowledge of JavaScript

Hands-on experience working with several data structures

The ability to create games using JavaScript and data structures

Familiarity with the Phaser framework

A working knowledge of JavaScript

TAKEAWAY SKILLS

JavaScript

Algorithm analysis

Game Development

Content

68 Lessons10 Quizzes2 Assessments2 Challenges

Overview of the Course

1 Lessons

Get familiar with building JavaScript projects to enhance data structures and algorithmic skills.

Introduction to the Course

Refresher to Javascript

8 Lessons

Look at JavaScript's evolution, execution context, variable scopes, arrays, classes, and DOM manipulation.

JavaScript

How JavaScript Works—Execution Context

What Are Var, Let, and Const Keywords in JavaScript?

Array and Utility Functions in JavaScript

How to Create Classes and Objects

DOM Manipulation—Basics

DOM Manipulation—Event Listeners

Quiz Yourself on Javascript

Snake Game Using Arrays and Objects

10 Lessons

Work your way through creating a Snake Game with HTML canvas, loops, and keyboard controls.

Introduction to Canvas

Coding Challenge: HTML Canvas with Stationary Object

What is a Game Loop?

Coding Challenge: HTML Canvas with Moving Object

Introduction to the Snake Game

Add the Snake to the Board

Add Movement to the Snake

Move Snake Using Keyboard Input

Add Food for the Snake

Quiz Yourself on the Snake Game Project

COVID Fighter Game Using Arrays and Collision Algorithm

6 Lessons

Break down the steps to creating a COVID Fighter Game, implementing JavaScript arrays and collision algorithms.

Introduction to the COVID Fighter Game

Setting Up the Project

Create and Display Enemies

Display Player Character and Gem Objects

Implement Scoring and Collision Detection Algorithm

Quiz Yourself on the COVID Fighter Game Project

Spin N Win Using Mathematics and Phaser.js

6 Lessons

Dig into creating a Spin-N-Win game with Phaser.js, animations, and mathematical logic.

Introduction to Spin-N-Win

Introduction to Phaser.js

Load and Display the Required Assets

Add Event Listeners and Animation

Spin the Wheel Using Mathematical Formulas

Quiz Yourself on the Spin N Win Project

Sudoku Using a Backtracking Algorithm

5 Lessons

See how it works to create, initialize, fetch, and solve Sudoku puzzles using backtracking.

Introduction to the Sudoku Project

Initialize the Sudoku Board and Set its Properties

Get Sudoku Puzzle and Create the Board

Implementing the Backtracking Solution

Quiz Yourself on the Sudoku Project

Mid-Course Assessment

Assessment

Travel Planner Project Using Graphs

7 Lessons

Piece together the parts of creating a graph-based travel planner using JavaScript and visualization libraries.

Introduction to the Travel Planner Project

How to Create Graphs in JavaScript

Visualize Graphs Using Vis.js

Dijkstra's Algorithm

Graph Data Creation and Rendering

Wrapping Up the Project

Quiz Yourself on the Travel Planner Project

Chat List Project Using LRU Cache

7 Lessons

Step through using LRU caching in JavaScript to build a chat list.

Introduction to the Chat List Project

Understand Caching and LRU Cache

Implement the Chat Handler Class

Get the Node from Linked List

Generate and Delete a Message in the Chat List

Connect the Chat Handler with UI

Quiz Yourself on the Chat List Project

Text Editor Using Stacks

5 Lessons

Walk through the creation of a text editor with undo functionality using stacks.

Introduction to the Text Editor Project

Understand Stacks

Implement Stack for the Text Editor

Connect Stack with the UI

Quiz Yourself on the Text Editor Project

10.

Photo Editor Using 3-D Arrays

7 Lessons

Work your way through creating a JavaScript-based photo editor with image manipulation features using 3D arrays.

Introduction to the Photo Editor Project

Implement the Upload and Save Features

Implement the Image Rotation Feature

Implement the Image Flip Feature

Implement the Image Resize and Grayscale Features

Merge All the Features with the UI

Quiz Yourself on the Photo Editor Project

11.

Frog Jump Game Using Greedy Algorithm

5 Lessons

Enhance your skills in creating a Frog Jump Game using the greedy algorithm and Phaser library.

Introduction to the Frog Jump Game

Implement the States for the Game

Implement Functions to Create and Update the Game

Implement the Greedy Solution

Quiz Yourself on the Frog Jump Game

12.

Summary

1 Lessons

Delve into JavaScript execution, DOM manipulation, game development, algorithms, caching, and more.

Summary

Final Course Assessment

Assessment

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:

Harsh Jain

Developed by MAANG Engineers

Every Educative resource is designed by our team of ex-MAANG software engineers and PhD computer science educators — subject matter experts who’ve shipped production code at scale and taught the theory behind it. The goal is to get you hands-on with the skills you need to stay ahead in today's constantly evolving tech landscape. No videos, no fluff — just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

Trusted by 2.7 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Software Developer

Carlos Matias La Borde

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI Mock Interviews

Test your skills in a simulated interview setting. Receive personalized feedback based on your performance. Available for Coding Interviews, System Design, and more.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Free Resources

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath