Game Development with JavaScript for Beginners

Game Development with JavaScript for Beginners

Game Development with JavaScript for Beginners

Learn about modern JavaScript, TypeScript by building interesting games from scratch.

Language: english

Note: 0/5 (0 notes) 349 students  New course 

Instructor(s): Sachin Kafle

Last update: 2022-09-20

What you’ll learn

  • All core features and concepts you need to know in modern JavaScript development
  • Build 2d games with HTML, CSS & JavaScript
  • Implement and Practice Object Oriented Programming
  • Learn game development using javascript
  • Learn about Typescript and Webpack
  • All about variables, functions, objects and arrays

 

Requirements

  • Any programming language knowledge
  • Basic web browser knowledge

 

Description

Nowadays, JavaScript can be used to make games, it brings the question of how good it is to use it for such tasks?.

Yes Indeed! JavaScript is a great language for game development, depending on the type of game you want to create. JavaScript is best for web-based and mobile games. It’s also a great language for beginners to learn because it’s generally easy to understand and has plenty of libraries and modules available.

JavaScript games can be played in the browser or mobile phone, so, if that’s your goal, it’s an excellent option. Using platforms and tools can help create both 2D and 3D games that can run directly in your browser.  Aside from only web-based games, JavaScript has been increasing in popularity in mobile game development.


Many popular online games were built using JavaScript. Students who want to create JavaScript game coding can start building one taking examples from one of the following: 

  • Tower Building:  is a great way to get started with JavaScript games.

  • Bejeweled was created as an in-browser game in the early 2000s. It’s similar to Candy Crush where you have to match three jewels in a row to score points.

  • 2048 is an addicting game that allows you to use your arrow keys to move tiles around in a grid. The idea is to merge tiles until they equal 2048.

  • Polycraft is a 3D game that is playable in your browser. Polycraft is full of adventure, exploration, base-building, gathering, crafting, and even fighting. It’s an excellent example of how you can move past 2D games with Javascript.

  • Words With Friends 2 is a mobile app game that uses React Native, a framework that utilizes JavaScript to create mobile applications. They chose to use React Native for its ability to create a game that can be played on multiple platforms using JavaScript with one code-base.

See, how fun and rewarding it can be using JavaScript for building games, Let us look at some projects we are going to build in this course:

1. Hill climbing game: Famous android game but its idea of making vehicle move in hills is never old when it comes to web. We uses different concepts such as webpack, and physics module from phaser library to make this game.

2. Platformer 2D: we will have detail idea about sprites and how to use them in our games. We will create map (environment) and players from scratch. Different levels will be made and triggers/colliders will be added to make player change from one level to another.

3. Basics of Phaser library: Different programs to load images, follow camera, loading animations will be created.


I really enjoyed creating this course. Hope you will also have fun learning. See you at the class!

 

Who this course is for

  • Beginner web development students who have no or only little JavaScript experience
  • Everyone interested in learning JavaScript and all about how it works building games

 

Course content

  • Introduction
    • Introduction
  • Setup and Installation
    • Setup node js
    • Install Visual Studio
  • Introduction to JavaScript
    • The ‘script’ tag
    • Variables in JavaScript
    • Comments
    • Core Types in JavaScript
    • JavaScript Object Types
    • JavaScript Array Types
    • null and undefined types
    • JavaScript Functions
    • if-else
    • switch statements
    • for loop
    • while loop
    • JavaScript “strict” mode
    • this keyword
  • Introduction to TypeScript
    • Introduction to TypeScript
    • Why TypeScript
    • Core Types in TypeScript
    • Type inference
    • Object Type
    • Array Type
    • const vs let vs var
    • Arrow function
    • Closure (in JavaScript)
    • Introduction to classes and objects
    • Classes and objects
    • constructor
    • class methods
    • Inheritance
  • Introduction to webpack
    • What it webpack
    • Why to use webpack
  • Phaser Basics
    • Boilerplate code
    • Configuration of game
    • Preload Scene
    • Adding image to Scene
    • Adding interactive
    • Making object to move
    • Adding Tweens
  • Animation in Phaser
    • Boilerplate code
    • Loading SpriteSheets
    • Creating Animation
    • Adding Tweens
    • Adding audio to the game
  • Physics in Phaser
    • Adding physics to the project
    • Adding Sprite
    • Adding Collider
    • Adding Input events
  • Follow Camera
    • Loading tilemaps
    • Creating maps
    • Adding player
    • Camera following Player
  • Platformer 2D
    • Introduction to the game
    • Introduction to project files
    • Dependencies for the game
    • Fix dependencies (important)
    • Project flow
    • Configuration for the game
    • Plugins for the game
    • Game file
    • Single tile
    • export default
    • Tile Group
    • Player class
    • Introduction to maps
    • Create Maps
    • Create Levels
    • PreloadScene
    • Preload setPath
    • MainScene
    • Create animation
    • Spine Animation
    • Taking Input
    • Creating Goal Sprite
    • Player collision
    • Testing different levels
    • Removing Loading Screen
    • Adding Background
    • Render background properly at center
    • Create coin
    • Display Coin
    • Enemy Class
    • Bee class
    • Enemy Group
    • Adding Bee Enemy
    • Adding collider
    • updating collider
    • Adding update to each Bee enemy
    • Collision with Bee enemy
    • Creating Slime Enemy
    • Adding Full Screen
  • Hill Climbing Project
    • Introduction to the game
    • Introduction to the SVG
    • Display SVG
    • SVG coordinate System
    • SVG Path element (important)
    • Game Elements
    • Boilerplate code
    • customCanvas
    • Adding Dependencies
    • Configuration for the game
    • Preload Scene
    • Creating background
    • Defining Car
    • Creating car wheel
    • Creating Gas
    • Create GuiScene class
    • MainScene
    • Make wheel move
    • Add body and wheel
    • Testing code
    • Create Terrain
    • Normalize vertexsets
    • use SVG to display Terrain
    • Terrain Body
    • Ensuring car does not get destroyed
    • Adding Grass to the Terrain

 

Game Development with JavaScript for BeginnersGame Development with JavaScript for Beginners

Time remaining or 651 enrolls left

 

Don’t miss any coupons by joining our Telegram group 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate