Get $1 credit for every $25 spent!

The JavaScript DOM Game Developer Bundle

Ending In:
Add to Cart - $29.99
Add to Cart ($29.99)
$1,592
98% off
wishlist
Courses
8
Lessons
420

What's Included

Product Details

Access
Lifetime
Content
10.0 hours
Lessons
80

HTML5 Canvas: Create 5 Games & 5 Projects

Amazing Effects with JavaScript on the HTML Canvas Element

By Laurence Svekis | in Online Courses

This is a hands-on course that will help you put your HTML5 skills and knowledge into practice. In this course, you will learn how to create your first game using HTML 5 Canvas. You will create a fun, interactive battle game with a computer brain and dynamic values. Some examples of Canvas-based games you can create are the following: Pong, Catcher, Bubble Popper, Brick Breakout, and Battle Bots. You will also work on 5 projects. This course requires prior coding experience to help you work easier.

4.7/5 average rating: ★ ★ ★ ★

  • Access 80 lectures & 10 hours of content 24/7
  • Make Canvas-based games
    • HTML5 Canvas Pong Game. Hit the ball between 2 players on screen
    • HTML5 Canvas Falling Items Catcher Game. Catch items as they fall
    • Bubble Popper. Score when you click & pop endless bubbles that float up the screen
    • Brick Breakout Game. Build your version of this classic brick breaker game
    • Battle Bots Game. Create 2 player interaction & response to game actions
  • Create 5 projects
    • Download canvas image to computer
    • Create a Matrix falling letters effect using HTML5 Canvas
    • Explore how to make a bouncing ball on canvas
    • Upload images from your computer into canvas
    • Draw on canvas simple drawing application project
Laurence Svekis | Instructor, GDE, Application Developer
4.3/5 Instructor Rating: ★ ★ ★ ★

Providing Smart digital solutions online since 2001, Laurence Svekis is considered a true web technology expert. He has professional experience in a wide range of digital areas, from Search Marketing, Video Marketing, Content creation, User Experience, application architecture, and web programming.

The applications he has created have entertained, informed, and engaged tens of millions of people. He has over billions of page views on various platforms and has sent millions of click-through visitors. He has developed hundreds of web applications, from microsites to enterprise-level platforms.

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Redemption deadline: redeem your code within 30 days of purchase
  • Experience level required: beginner
  • Have questions on how digital purchases work? Learn more here

Requirements

  • HTML & CSS
  • JavaScript experience
  • Web programming experience

Course Outline

  • Your First Program
  • Create simple HTML5 Canvas Game with JavaScript Pong Game
    • SECTIONHTML5CanvasGameIntroduction - 2:19
    • Pong Game Source Code
    • 1SetupofHTML5Game_Board - 5:42
    • 2Drawmoreshapeson_Canvas - 9:23
    • 3KeyBoardInteraction - 9:50
    • 4SecondobjectonScreen - 9:11
    • 5AnimationFrames - 3:35
    • 6collisiondetection - 8:00
    • 7BouncingBall - 11:28
    • 8FinalGame_Tweaks - 14:18
    • 9PongGameCodeReview - 4:28
  • Create a Game HTML5 Canvas Simple Game with JavaScript
    • SECTIONIntroductionCatcher_Game - 1:34
    • Source code
    • 1SetupGameHTMLcode - 1:41
    • 2JavaScriptCreate_Elements - 6:35
    • 3KeyboardEvent_Listeners - 9:16
    • 4Droprandom_items - 5:18
    • 5MoveRandom_Objects - 5:21
    • 6AddColorsandSet_hazards - 8:05
    • 7CollissionDetection_HTML5 - 13:05
    • 8CollisionActions - 3:41
    • 9AddScoringtoGame - 7:34
    • 10GameControls - 9:03
    • 11StartGame_Option - 14:42
    • 12CatcherGameCodeReview - 9:05
  • Create an HTML5 Canvas game JavaScript MouseClick Popper
    • SECTIONIntroductionBubble_Popper - 2:00
    • Source Code
    • 1SetupHTMLforGame - 6:15
    • 2GradientFill - 5:09
    • 3GenerateBubbles - 5:28
    • 4MovingBubbles_HTML5 - 7:58
    • 5MakingBubbles_More - 5:49
    • 6AddMoueClickson_Canvas - 12:37
    • 7MouseClickCollisionDetection - 8:19
    • 8MultipleArrayCollisionDetection - 4:22
    • 9GameScoring_Canvas - 6:55
    • 10FInalCodeReviewBubble_Popper - 10:37
  • HTML5 JavaScript Battle War Canvas Game from Scratch
    • SECTIOnBattleGame_Introduction - 2:00
    • Source Code
    • 1HTML5SetupandDraw - 7:15
    • 2DrawingPaths_Canvas - 7:09
    • 3DrawingCircles_Canvas - 7:26
    • 4AnimationFrame - 9:15
    • 5KeyboardEventListenerMove - 8:44
    • 6AddSecond_Player - 8:08
    • 7MovementConditions - 7:23
    • 8ShootingKeypresses - 10:49
    • 9CollisionDetection_Objects - 12:48
    • 10PlayerScoring - 5:27
    • 11GameReset - 5:03
    • 12GametweaksandUpdates - 3:30
    • 13OpponentBrain_Logic - 13:17
    • 14OpponentBrainLogic2 - 12:37
    • 15OpponentAttack_Mode - 9:39
    • 16GameTweaksandAdjustments - 5:40
    • 17SectionCode_Conclusion - 11:31
    • 18BonusUpdate2Brains - 23:53
  • JavaScript HTML5 Breakout Game Block Breaker
    • SECTIONBrickBreakerGame_Introduction - 2:04
    • Source Code
    • 1BreakoutGame_Setup - 6:08
    • 2SetupPlayer_Paddle - 4:37
    • 3PlayerMovement_KeyPresses - 5:14
    • 4MovePlayer_Paddle - 4:02
    • 5MouseMovement_Player - 4:20
    • 6AddaBouncingBall - 9:43
    • 7CollisionDetection - 14:35
    • 8AddBrickstoScreen - 11:31
    • 9UpdateBricks - 3:59
    • 10Scoringand_Win - 10:10
    • 11FinalGametweaksand_Adjustments - 11:29
    • 12BugFixesandTweaks - 9:21
    • 13BounsContent - 14:50
    • 14BallSpeed_Update - 4:23
    • 15FinalGameCodeReview - 11:06
  • Course Questions and Answers - Useful Code Snippets and Code examples
    • 1WritetoCanvasDownload_Image - 15:35
    • 2HTML5CanvasMatrixEffect - 14:07
    • 3HTML5CanvasBouncingBall - 9:03
    • 4HowtoUploadto_Canvas - 13:51
    • 5Drawon_Canvas - 28:57
    • Section Source Code

View Full Curriculum


Access
Lifetime
Content
8.0 hours
Lessons
68

JavaScript: Create 5 Fun Word Games

Build 5 Amazing Interactive Games Perfect for Kids Using JavaScript

By Laurence Svekis | in Online Courses

Explore how you can build your own games online using JavaScript. This course will help you learn about game design and teach you the steps to create fully functional games from start to finish. Create your own version of the game in just a few hours! Source codes are included.

4.8/5 average rating: ★ ★ ★ ★

  • Access 68 lectures & 8 hours of content 24/7
  • Create games using JavaScript
  • Work on 5 projects
    1. Word Scramble. Scramble the letters with JavaScript Random Array values
    2. Word Decoder. Every letter has a number associated with it; player needs to solve the phrase using the number codes to letters
    3. Hangman Game. Player needs to guess the hidden phrase by clicking the available letters
    4. Wordsearch. Create a fully functional word search that fills the grid with as many words as possible
    5. Dynamic Quiz Game. Creates all the DOM elements & interactions depending on the JSON data
Laurence Svekis | Instructor, GDE, Application Developer
4.3/5 Instructor Rating: ★ ★ ★ ★

Providing Smart digital solutions online since 2001, Laurence Svekis is considered a true web technology expert. He has professional experience in a wide range of digital areas, from Search Marketing, Video Marketing, Content creation, User Experience, application architecture, and web programming.

The applications he has created have entertained, informed, and engaged tens of millions of people. He has over billions of page views on various platforms and has sent millions of click-through visitors. He has developed hundreds of web applications, from microsites to enterprise-level platforms.

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Redemption deadline: redeem your code within 30 days of purchase
  • Experience level required: intermediate
  • Have questions on how digital purchases work? Learn more here

Requirements

  • HTML, CSS & JavaScript fundamental experience

Course Outline

  • Introduction to Word Scramble Game creation using JavaScript
    • Scramble Game introduction - 2:38
    • 1Setupofwebdevenvironment - 5:59
    • 2SetupGameStartValues - 7:34
    • 3SetupWords_Game - 8:57
    • 4Scramblethe_Letters - 5:47
    • 5OutputScambledtoPage - 6:18
    • 6LetterCounter - 7:33
    • 7Scoringand_GamePlay - 8:17
    • 8FinalGame_Tweaks - 9:40
    • 9ScrambleLettersGameReview - 7:55
    • 10DynamicWordListfromSheets - 16:15
    • 11_UserSelectsListof_Words - 11:12
    • 12GamePlayBugFixeswith_List - 8:07
    • Source Code
  • Secret Word Message Game Uncover the Secret words using number values JavaScript
    • Introduction to Word_Decoder - 2:48
    • 1GameboardSetupSecret_Word - 7:41
    • 2CreateInteractionforPlayer - 3:09
    • 3CreateTheCodedValues - 10:13
    • 4OutputCodeto_Player - 8:04
    • 5ArrayMapShortenCode - 6:21
    • 6Makeitintoa_Game - 9:55
    • 7SetupGame_Start - 8:40
    • 8Playthe_Game - 12:03
    • 9PlayerInputs - 11:21
    • 10Gameplaytweaks - 8:30
    • 11GameWin_Check - 8:02
    • 12FinalGame_Tweaks - 9:00
    • 13NumberstoLettersGame_Conclusion - 16:17
    • 14CodeReviewforGame - 6:00
    • Source Code
  • Hangman word guessing Game from Scratch using JavaScript
    • Introduction_hangman - 2:07
    • 1GameBoard_Setup - 2:22
    • 2DomContentLoadedRun_App - 10:53
    • 3CreateGamePlay - 6:03
    • 4StarttheGameSetup - 6:52
    • 5BuildPlayer_Letters - 9:31
    • 6CheckLetterstoWord - 5:43
    • 7UpdateHidden_Letters - 5:26
    • 8Scoringof_Game - 6:07
    • 9GameWin_Conditions - 7:54
    • 10FinalGameCodeReview - 10:17
    • Source Code
  • JavaScript WordSearch Game from scratch
    • Introduction_wordsearch - 3:27
    • 1SetupWordSearchBoard - 6:16
    • 2CreateAddGameElementstopage - 9:04
    • 3GameValuesandSetup_Grid - 13:29
    • 4AddWordstoGrid - 11:50
    • 5CheckforexistingLetters - 6:08
    • 6AddWords_Vertically - 6:02
    • 7FillGame_Letters - 9:48
    • 8ListWordstobe_found - 2:59
    • 9GameTweaksandAdjustments - 6:26
    • 10PlayerInteraction - 13:24
    • 11CheckWin_Condition - 5:32
    • 12FinalGame_Tweaks - 9:28
    • 13FinalGame_Wordsearch - 13:53
    • Source Code
  • JavaScript Quiz Questions - Create a dynamic Quiz with JavaScript JSON data
    • Quiz_Introduction - 2:55
    • 1SetupDevEnvironmentFiles - 6:29
    • 2CreateJSONDataFetch_Data - 6:41
    • 3CreateQuiz_Questions - 4:33
    • 4ShowquestiontoPlayer - 8:42
    • 5GameplayShow_Question - 7:39
    • 6AddPlayerInteractionto_Game - 7:45
    • 7MovetoNextQuestion - 12:51
    • 8AddScoringforQuiz_Game - 8:06
    • 9FinalGameQuizTweaks - 9:08
    • Source Code

View Full Curriculum


Access
Lifetime
Content
3.0 hours
Lessons
25

JavaScript Math Games: Project for Learning Code from Scratch

Explore How You Can Create a Fully Dynamic Interactive Math Game

By Laurence Svekis | in Online Courses

Put your JavaScript skills to the test - create a fully functional Math game from scratch - perfect for kids to learn math. Test your kids or anyone who wants to put their math skills to the test, math skills with a dynamic math quiz game built with JavaScript. The lessons of this course will walk you through all the steps to create a fully functional Math game in which you can set the parameters.

5.0/5 average rating: ★ ★ ★ ★ ★

  • Access 25 lectures & 3 hours of content 24/7
  • Apply JavaScript to create an interactive dynamic Math Game
  • Make calculations with JavaScript
  • Create elements on the page
  • Add interactions to game for player
  • Apply styling to make interesting games
  • Create & generate dynamic games and randomize content
Laurence Svekis | Instructor, GDE, Application Developer
4.3/5 Instructor Rating: ★ ★ ★ ★

Providing Smart digital solutions online since 2001, Laurence Svekis is considered a true web technology expert. He has professional experience in a wide range of digital areas, from Search Marketing, Video Marketing, Content creation, User Experience, application architecture, and web programming.

The applications he has created have entertained, informed, and engaged tens of millions of people. He has over billions of page views on various platforms and has sent millions of click-through visitors. He has developed hundreds of web applications, from microsites to enterprise-level platforms.

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Redemption deadline: redeem your code within 30 days of purchase
  • Experience level required: beginner
  • Have questions on how digital purchases work? Learn more here

Requirements

  • Knowledge of HTML, CSS & JavaScript

Course Outline

  • JavaScript Game Course Introduction to developing a Math Game with JavaScript
    • Math Game Introduction - 3:00
  • JavaScript Introduction to methods and code used to build the game
    • 1JavaScriptquerySelector_Objects - 8:33
    • 2JavaScriptCreateElement_Object - 10:21
    • 3MathRandom_Example - 8:27
    • 4ArraySortMethodRandom - 5:36
  • Creating a JavaScript Math Game from scratch
    • 1SetupofGameHTML_JS - 5:43
    • 2SetupGameVariablesand_Objects - 7:24
    • 3Startthe_Game - 9:21
    • 4BuildQuestion_Screen - 9:20
    • 5Tweaksand_Adjustments - 6:29
    • 6Questionto_Player - 15:04
    • 7CheckAnswer_Respond - 10:30
    • 8CorrectAnswers - 4:39
    • 9GameUpdatesandFixes - 6:59
    • 10GameScoring - 7:30
    • 11QuestionFeedback - 7:39
    • 12PlayGameAddoptions - 12:04
    • 13UpdatedVersion_Game - 8:42
    • 14Version2FullPage_Game1 - 12:21
    • 15GameReview_Improvements - 15:46
    • 16CreateCSV_File - 10:17
    • 17DownloadCSVFileScore - 10:16
    • 18RestartofGameBug_Fixes - 6:25
    • 19MathgamefinalCode_Review - 8:33
    • Source Code

View Full Curriculum


Access
Lifetime
Content
1.0 hours
Lessons
12

JavaScript DOM Modern Interactive Dynamic Web Pages & Games

Create Interactive & Dynamic Web Page Content with JavaScript DOM Manipulation

By Laurence Svekis | in Online Courses

The DOM is an object-oriented representation of the web page, which can be modified with JavaScript to create interactive and dynamic web content. In this course, you will be taught how to make web pages come to life. You will be guided on how to create new page elements and automatically have new page elements added to the page you are working on. Also, you will be introduced to JavaScript DOM manipulation, a process of building interactive web page content that professionals are utilizing today.

4.2/5 average rating: ★ ★ ★ ★

  • Access 12 lectures & 1 hour of content 24/7
  • Create games using JavaScript DOM Manipulation
  • Courses covered
    1. Web Dev Setup Coding IDE & Resources. Links and resources to setup introduction to course content
    2. JavaScript DOM Document Object Model Introduction to Selection. Select single or multiple page elements with QuerySelector
    3. Element Style Manipulation with JavaScript Update Color & Background Color. Manipulate the element style properties and add click events with JavaScript Event Listeners
    4. Update Element Position Using JavaScript. Move elements on the page & update the element style left and top values with JavaScript
    5. AnimationFrames with JavaScript & KeyBoard EventListeners Movement. AnimationFrames provide smooth continuous movement of elements on the page while keyboard key presses move elements according to keypress event listeners
    6. Create Element using JavaScript & Randomly Place within Page Container Div. Use document create Element method to dynamically generate elements & add them to the HTML page
    7. Move Element Randomly & Make them Clickable. Make new elements clickable and randomly move on the page
    8. Collision Detection with JavaScript Elements. Add options to check collision between page element
    9. Scoring & Game Development with JavaScript Page Elements. Add scoring to the gameplay, create gameplay and allow the user to progress in the game
    10. Final Gameplay of JavaScript DOM Project
Laurence Svekis | Instructor, GDE, Application Developer
4.3/5 Instructor Rating: ★ ★ ★ ★

Providing Smart digital solutions online since 2001, Laurence Svekis is considered a true web technology expert. He has professional experience in a wide range of digital areas, from Search Marketing, Video Marketing, Content creation, User Experience, application architecture, and web programming.

The applications he has created have entertained, informed, and engaged tens of millions of people. He has over billions of page views on various platforms and has sent millions of click-through visitors. He has developed hundreds of web applications, from microsites to enterprise-level platforms.

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Certificate of completion included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Updates included
  • Experience level required: beginner
  • Have questions on how digital purchases work? Learn more here

Requirements

  • HTML, CSS & JavaScript fundamental experience

Course Outline

  • Introduction to JavaScript DOM creating interactive Web pages and web content
    • 0JavaScriptDOMInteractiveElements - 2:34
    • JavaScriptDOMIntroduction_Course
    • 1WebDev_Setup - 9:53
    • 2DOMDocumentObjectModel - 11:37
    • 3ElementStyle_Manipulation - 12:09
    • 4ElementStylePostionMove_Element - 5:55
    • 5KeyEventsAnimation_Frame - 13:29
    • 6CreateElementsSetRandom_Position - 17:53
    • 7MoveNewElementson_Page - 12:32
    • 8ElementCollision_Detection - 19:30
    • 9FinalGamePlayReviewand_Updates - 8:53
    • Source Code

View Full Curriculum


Access
Lifetime
Content
8.0 hours
Lessons
54

JavaScript: DOM Projects InterActive Dynamic WebPages JS DOM

Make Web Pages Interactive & Dynamic by Updating Elements, Adding Listeners and Creating JS DOM Games

By Laurence Svekis | in Online Courses

This JavaScript Course will provide JavaScript essentials so that you can explore and learn more about JavaScript. This is a complete JavaScript course that covers ES6 and modern JavaScript coding. Here, you will gain access to the web browser document object, and select and update the elements on paper. You will also learn how to create dynamic web pages, connect them with DOM, and update and manipulate page elements.

  • Access 54 lectures & 8 hours of content 24/7
  • Explore JavaScript & build fun real world projects from scratch
  • Awesome JavaScript DOM Projects
    1. Build an Interactive Game. Generate a responsive grid with JavaScript & CSS Grid
    2. JavaScript Slot Machine with Real Element Movement & Tracking of Element Values. Build dynamic global game object that you can adjust to change the game dynamics
    3. JavaScript DOM Frogger Game. Classes & how to track classes, update and check if element contain classes
Laurence Svekis | Instructor, GDE, Application Developer
4.3/5 Instructor Rating: ★ ★ ★ ★

Providing Smart digital solutions online since 2001, Laurence Svekis is considered a true web technology expert. He has professional experience in a wide range of digital areas, from Search Marketing, Video Marketing, Content creation, User Experience, application architecture, and web programming.

The applications he has created have entertained, informed, and engaged tens of millions of people. He has over billions of page views on various platforms and has sent millions of click-through visitors. He has developed hundreds of web applications, from microsites to enterprise-level platforms.

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Certificate of completion included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Updates included
  • Experience level required: beginner
  • Have questions on how digital purchases work? Learn more here

Requirements

  • HTML, CSS & JavaScript fundamental experience

Course Outline

  • Introduction to the JavaScript DOM selecting updating page elements with code
    • DOM0Introduction - 4:38
    • 1DOMcourse_Introduction - 14:16
    • JavaScriptDOMIntroduction_Course
    • Source Code
    • 2SelectionOptions_JavaScript - 14:09
    • 3ElementStyleUpdateJavaScript - 10:30
    • 4AddRemoveClassesAttributes - 15:16
    • 5AddHTMLtoPage - 15:34
    • 6AddRemoveElementsAppend - 19:50
    • 7TraversingtheDOMJavaScript - 15:23
    • 8EventListenersJavaScriptDOM - 24:40
    • 9MoreEventListenersDOM - 14:59
    • 10KeyboardEvents_JavaScript - 15:05
    • 11ElementMoverwithKeyboard - 13:29
    • 12AddAnimation_Frame - 12:27
  • JavaScript Element Clicker Game CSS grid JavaScript Dynamic Grid
    • 0GameClickers_Introduction - 2:30
    • Section2JavaScriptDOMGame
    • JSGameClicker source code
    • 1PageSetupHTMLJS - 4:02
    • 2CreateGameGridCSS_JSFix - 17:25
    • 3PageElementsInto_Array - 12:55
    • 4MakeElements_Interactive - 18:56
    • 5SmoothTimerCodeTweaks - 9:40
    • 6GameScoringandGamePlay - 18:21
    • 7GameClickers_Review - 8:28
  • JavaScript Slot Machine Dynamic Interactive JavaScript DOM project
    • 0JavaScriptSlotMachineIntroduction - 3:18
    • 1ProjectSetupindexjs - 3:07
    • JavaScriptDOMSlotMachineSourceCode
    • Source_Code
    • JavaScriptSlotMachine
    • 2GameSetup_JavaScript - 8:30
    • 3SetupVisualElementsDynamically - 17:07
    • 4ApplyStylingtoDesignSlotArea - 8:56
    • 5AnimationFrames_movement - 4:48
    • 6MovingPageElementsJS - 14:13
    • 7MovementdebuggingandFixes - 11:15
    • 8MovementdebuggingandFixes_2 - 15:01
    • 9MovementdebuggingandFixes_3 - 14:51
    • 10JavaScriptSlot_Machine - 18:12
    • 11JavaScriptSlotMachineReview - 9:05
  • JavaScript DOM Game Frogger Move elements update classes and more
    • 0JavaScriptFroggerGameIntroduction - 2:02
    • 1FroggerGameBoard_Setup - 5:19
    • JavaScriptDOMFrogger_Guide
    • FroggerGameJS
    • 2CreateGameGridwith_JavaScript - 14:47
    • 3MovewithArrowKeys - 12:06
    • 4UpdateconditionsforMove - 5:21
    • 5GameBackground_Objects - 13:58
    • 6GameObjectsSetup2 - 8:47
    • 7ObjectMovement_JavaScript - 14:15
    • 8GamePlayFixes_Updates - 14:43
    • 9FixGameplay_Debugging - 14:47
    • 10ImproveGame_VisualsV2 - 11:13
    • 11JavaScriptFroggerGameCode - 6:26

View Full Curriculum


Access
Lifetime
Content
10.0 hours
Lessons
80

Create 5 HTML Games Using JavaScript Course

Introduction to Drawing Using JavaScript on HTML5 Canvas Element

By Laurence Svekis | in Online Courses

This is a hands-on course that will help you put your HTML5 skills and knowledge into practice. In this course, you will create 5 Canvas-based games: Pong, Catcher, Bubble Popper, Brick Breakout, and Battle Bots. You will also work on 5 projects. This course requires prior coding experience to help you work easier. This course is a fast-paced course with all the source code included. Please try the code as you go through the lessons to learn.

4.7/5 average rating: ★ ★ ★ ★

  • Access 80 lectures & 10 hours of content 24/7
  • Make Canvas-based games
    • HTML5 Canvas Pong Game. Hit the ball between 2 players on screen
    • HTML5 Canvas Falling Items Catcher Game. Catch items as they fall
    • Bubble Popper. Score when you click & pop endless bubbles that float up the screen
    • Brick Breakout Game. Build your version of this classic brick breaker game
    • Battle Bots Game. Create 2 player interaction & response to game actions
  • Create 5 projects
    • Download canvas image to computer
    • Create a Matrix falling letters effect using HTML5 Canvas
    • Explore how to make a bouncing ball on canvas
    • Upload images from your computer into canvas
    • Draw on canvas simple drawing application project
Laurence Svekis | Instructor, GDE, Application Developer
4.3/5 Instructor Rating: ★ ★ ★ ★

Providing Smart digital solutions online since 2001, Laurence Svekis is considered a true web technology expert. He has professional experience in a wide range of digital areas, from Search Marketing, Video Marketing, Content creation, User Experience, application architecture, and web programming.

The applications he has created have entertained, informed, and engaged tens of millions of people. He has over billions of page views on various platforms and has sent millions of click-through visitors. He has developed hundreds of web applications, from microsites to enterprise-level platforms.

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Certificate of completion included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Updates included
  • Experience level required: beginner
  • Have questions on how digital purchases work? Learn more here

Requirements

  • HTML, CSS & JavaScript fundamental experience

Course Outline

  • Create simple HTML5 Canvas Game with JavaScript Pong Game
    • SECTIONHTML5CanvasGameIntroduction - 2:19
    • Pong Game Source Code
    • 1SetupofHTML5Game_Board - 5:42
    • 2Drawmoreshapeson_Canvas - 9:23
    • 3KeyBoardInteraction - 9:50
    • 4SecondobjectonScreen - 9:11
    • 5AnimationFrames - 3:35
    • 6collisiondetection - 8:00
    • 7BouncingBall - 11:28
    • 8FinalGame_Tweaks - 14:18
    • 9PongGameCodeReview - 4:28
  • Create a Game HTML5 Canvas Simple Game with JavaScript
    • SECTIONIntroductionCatcher_Game - 1:34
    • Source code
    • 1SetupGameHTMLcode - 1:41
    • 2JavaScriptCreate_Elements - 6:35
    • 3KeyboardEvent_Listeners - 9:16
    • 4Droprandom_items - 5:18
    • 5MoveRandom_Objects - 5:21
    • 6AddColorsandSet_hazards - 8:05
    • 7CollissionDetection_HTML5 - 13:05
    • 8CollisionActions - 3:41
    • 9AddScoringtoGame - 7:34
    • 10GameControls - 9:03
    • 11StartGame_Option - 14:42
    • 12CatcherGameCodeReview - 9:05
  • Create an HTML5 Canvas game JavaScript MouseClick Popper
    • SECTIONIntroductionBubble_Popper - 2:00
    • Source Code
    • 1SetupHTMLforGame - 6:15
    • 2GradientFill - 5:09
    • 3GenerateBubbles - 5:28
    • 4MovingBubbles_HTML5 - 7:58
    • 5MakingBubbles_More - 5:49
    • 6AddMoueClickson_Canvas - 12:37
    • 7MouseClickCollisionDetection - 8:19
    • 8MultipleArrayCollisionDetection - 4:22
    • 9GameScoring_Canvas - 6:55
    • 10FInalCodeReviewBubble_Popper - 10:37
  • HTML5 JavaScript Battle War Canvas Game from Scratch
    • SECTIOnBattleGame_Introduction - 2:00
    • Source Code
    • 1HTML5SetupandDraw - 7:15
    • 2DrawingPaths_Canvas - 7:09
    • 3DrawingCircles_Canvas - 7:26
    • 4AnimationFrame - 9:15
    • 5KeyboardEventListenerMove - 8:44
    • 6AddSecond_Player - 8:08
    • 7MovementConditions - 7:23
    • 8ShootingKeypresses - 10:49
    • 9CollisionDetection_Objects - 12:48
    • 10PlayerScoring - 5:27
    • 11GameReset - 5:03
    • 12GametweaksandUpdates - 3:30
    • 13OpponentBrain_Logic - 13:17
    • 14OpponentBrainLogic2 - 12:37
    • 15OpponentAttack_Mode - 9:39
    • 16GameTweaksandAdjustments - 5:40
    • 17SectionCode_Conclusion - 11:31
    • 18BonusUpdate2Brains - 23:53
  • JavaScript HTML5 Breakout Game Block Breaker
    • SECTIONBrickBreakerGame_Introduction - 2:04
    • Source Code
    • 1BreakoutGame_Setup - 6:08
    • 2SetupPlayer_Paddle - 4:37
    • 3PlayerMovement_KeyPresses - 5:14
    • 4MovePlayer_Paddle - 4:02
    • 5MouseMovement_Player - 4:20
    • 6AddaBouncingBall - 9:43
    • 7CollisionDetection - 14:35
    • 8AddBrickstoScreen - 11:31
    • 9UpdateBricks - 3:59
    • 10Scoringand_Win - 10:10
    • 11FinalGametweaksand_Adjustments - 11:29
    • 12BugFixesandTweaks - 9:21
    • 13BounsContent - 14:50
    • 14BallSpeed_Update - 4:23
    • 15FinalGameCodeReview - 11:06
  • Course Questions and Answers - Useful Code Snippets and Code examples
    • 1WritetoCanvasDownload_Image - 15:35
    • 2HTML5CanvasMatrixEffect - 14:07
    • 3HTML5CanvasBouncingBall - 9:03
    • 4HowtoUploadto_Canvas - 13:51
    • 5Drawon_Canvas - 28:57
    • Section Source Code

View Full Curriculum


Access
Lifetime
Content
3.0 hours
Lessons
29

JavaScript DOM Pacman Game Project: Learn JavaScript Code

Create a JavaScript Pacman Game from Scratch Using Document Object Model DOM Game Source Code

By Laurence Svekis | in Online Courses

Explore how you can create a PacMan-type of the game from scratch using JavaScript and only JavaScript DOM. This course is perfect for those who want to practice and learn more about web design and web development. Here, you will be taught how to create gameplay directly within your website. Also, you will be guided on how to run in the browser and have fun! Learn about game design and how you can create a DOM-based web game from scratch using JavaScript alone.

4.2/5 average rating: ★ ★ ★ ★

  • Access 29 lectures & 3 hours of content 24/7
  • Explore how you can create a PacMan-type of game from scratch using JavaScript
  • Create your own version of the game using JavaScript
  • Manipulate elements on the page using JavaScript
  • Understand DOM manipulation & element selection
  • Make the enemies smarter by detecting where the player is located
  • Add score keeping from the game play
  • Learn how to start, stop & restart game
  • Generate dynamic game boards
Laurence Svekis | Instructor, GDE, Application Developer
4.3/5 Instructor Rating: ★ ★ ★ ★

Providing Smart digital solutions online since 2001, Laurence Svekis is considered a true web technology expert. He has professional experience in a wide range of digital areas, from Search Marketing, Video Marketing, Content creation, User Experience, application architecture, and web programming.

The applications he has created have entertained, informed, and engaged tens of millions of people. He has over billions of page views on various platforms and has sent millions of click-through visitors. He has developed hundreds of web applications, from microsites to enterprise-level platforms.

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Certificate of completion included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Updates included
  • Experience level required: beginner
  • Have questions on how digital purchases work? Learn more here

Requirements

  • HTML, CSS & JavaScript fundamental experience

Course Outline

  • How to Create PacMan using JavaScript and the DOM only course
    • 0JavaScriptPacmanGameIntroduction - 2:17
    • Pacman course source code
    • 1FilesSetupandPlanning - 4:11
    • 2CreateGame_Assets - 7:07
    • 3CSSCreatetheGhosts - 5:56
    • 4CSSCreatethePacMan - 12:23
    • 5_JavaScriptSelect_Elements - 11:03
    • 6CreateGameBoardJS - 14:17
    • 7AddGhoststoGameBoard - 8:10
    • 8AddGhoststoGameBoard_2 - 5:58
    • 9AddAnimationFrameMovement - 7:20
    • 10MovementParameters - 10:26
    • 11PacmanMovementMouthand_Eyes - 5:51
    • 12GhostMovement_JavaScript - 8:05
    • 13MakeTheGhostsSmarter - 7:45
    • 14StopandStartGamePlay - 8:41
    • 15GameTweaksandFixes - 2:34
    • 16Scoringadded - 6:22
    • 17GameOverandStart - 9:19
    • 18GameOverandRestart - 7:56
    • 19ResetDefaultValuesRestart - 2:48
    • 20EndGameWinCondition - 7:49
    • 21PlayerPowerUP - 9:21
    • 22PacmanEattheGhost - 5:04
    • 23NewLevelsandBoards - 5:37
    • 24GenerateLevel_Content - 13:06
    • 25GenerateLevelContent2 - 3:33
    • 26FinalJavaScriptPacmanTest - 7:14
    • 27JavaScriptPacmanGameReview - 15:29

View Full Curriculum


Access
Lifetime
Content
7.0 hours
Lessons
72

Create 5 JavaScript Coding Projects from Scratch Course

Learn More about JavaScript & DOM Interactions and Create Useful Components

By Laurence Svekis | in Online Courses

Practice and learn more about JavaScript as you create 5 amazing projects all while using Vanilla JavaScript. This JavaScript course will help you explore and sharpen your skills by introducing you to mini-projects that you can extend to build some amazing functionality and interactions for web users. You can also add them to your portfolio and have fun while you learn. With this course, you can challenge yourself and design your own versions of different games.

4.6/5 average rating: ★ ★ ★ ★

  • Access 72 lectures & 7 hours of content 24/7
  • Apply JavaScript Code to mini projects
  • Interact with JavaScript Document Object Manipulate elements on page
  • Create interactive page content with JavaScript
  • Practice JavaScript while coding fun mini projects
  • Create dynamic content with JavaScript
  • Download files with JavaScript - DOM interaction - Common JavaScript methods
Laurence Svekis | Instructor, GDE, Application Developer
4.3/5 Instructor Rating: ★ ★ ★ ★

Providing Smart digital solutions online since 2001, Laurence Svekis is considered a true web technology expert. He has professional experience in a wide range of digital areas, from Search Marketing, Video Marketing, Content creation, User Experience, application architecture, and web programming.

The applications he has created have entertained, informed, and engaged tens of millions of people. He has over billions of page views on various platforms and has sent millions of click-through visitors. He has developed hundreds of web applications, from microsites to enterprise-level platforms.

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Certificate of completion included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Updates included
  • Experience level required: beginner
  • Have questions on how digital purchases work? Learn more here

Requirements

  • HTML, CSS & JavaScript fundamental experience

Course Outline

  • Introduction to applying JavaScript to Create mini projects Course
    • JavaScript5Projects_Introduction - 5:04
  • Lorem Ipsum Generator app with JavaScript
    • 0JavaScriptLoremIpsumGen - 3:49
    • 1SetupHTMLandFiles - 7:47
    • 2JavaScriptDOMElementSelection - 7:23
    • 3AddEventListener_JavaScript - 6:24
    • 4AddDatatoOutput - 3:58
    • 5StringMethodsandRegextoClean_String - 8:06
    • 6RandomWord_Paragraphs - 7:21
    • 7CreateSentancesfromWords - 10:09
    • 8HowtoCaptilizea_String - 4:07
    • 9UserinputforWord_Count - 9:41
    • 10LoremIpsumGenV2 - 9:10
    • Project Source Code
  • Pagination from JSON data multiple pages and content loading app
    • 0PaginationIntroduction - 3:26
    • 1PageSetupFetchRequest - 6:19
    • 2LocalHostSetup_LiveServer - 8:26
    • 3Makerequestgetpage_data - 5:03
    • 4OutputcontentstoPage - 5:58
    • 5PageButtonsNextPrev - 15:03
    • 6LoadContentByPage_Number - 4:28
    • 7JumptoPageby_Value - 12:40
    • 8LoadMoretothe_bottom - 6:07
    • 9ClickEventloadMore - 7:06
    • Source_Code
    • pagination project
    • ResourceSites(1)
  • How to create a JavaScript Carousel Images Slider Component
    • 0CarouselIntroduction - 3:21
    • 1SetupHTMLandImage_Details - 9:56
    • 2Carouselcontaineraddimages - 10:46
    • 3ApplyCSScreateStyle - 9:46
    • 4HideandShowImages - 8:25
    • 5Conditionsfor_Images - 5:38
    • 6Imagedot_indicators - 8:50
    • 7AutoloadnextImageIntervals - 4:34
    • 8AddactiveIndicatorDot - 5:48
    • 9CarouselFinal_Updates - 7:53
    • 10CarouselConclusion - 6:20
    • Carousel Source Code
    • Source_Code
    • 3ResourceSites
  • Downloadable List items Create a JavaScript task list and download as file
    • 0TaskList_Introduction - 3:40
    • 1PageSetupCreateList - 5:00
    • 2CreateList_Item - 6:54
    • 3AddInputEventListener - 2:36
    • 4CrossOutand_Delete - 3:58
    • 5TaskList_Styling - 8:10
    • 6DownloadListasText_File - 12:04
    • 7DownloadListasTextFile2 - 4:58
    • 8ListsavedtoLocalStorage - 6:44
    • 9ListsavedtoLocalStorage_2 - 10:34
    • 10TaskList_overview - 5:43
    • Source_Code
    • 4ResourceSites
  • JavaScript Dynamic Timeline from JSON
    • 0JavaScriptTimeLine_Introduction - 3:28
    • 0SectionJavaScript_Examples - 10:45
    • 01SectionJavaScriptExamples2 - 11:58
    • 1SetupHTMLandJS_data - 6:14
    • 2CreateRandomContentData - 14:40
    • 3OutputContenttoPage - 9:44
    • 4SortObjectDataby_Property - 6:34
    • 5IndicatorListofEvents - 6:12
    • 6IndicatorStylingandPosition - 13:08
    • 7CreateInteractionwithJavaScript - 7:59
    • 8HideShow_Content - 3:38
    • 9AddLineforTimeLine_Effect - 6:01
    • 10Timelineproject_Tweaks - 12:29
    • 11FinalAdjustments - 9:41
    • 12JavaScriptTimeLineProjectReview - 14:43
    • 5ResourceSites
    • JavaScriptTimeline
    • 5_Resources
    • 5SourceCode

View Full Curriculum



Terms

  • Unredeemed licenses can be returned for store credit within 30 days of purchase. Once your license is redeemed, all sales are final.