HTML5 Canvas create 5 Games 5 Projects Learn JavaScript

HTML5 Canvas create 5 Games 5 Projects Learn JavaScript, available at $79.99, has an average rating of 4.05, with 178 lectures, based on 47 reviews, and has 3342 subscribers.

You will learn about Create your first Game using HTML5 and Canvas How to use Canvas element to draw How JavaScript is applied to HTML5 Canvas The basics of using HTML canvas Create amazing things with Canvas Apply JavaScript to create Canvas effects like Matrix, bouncing ball and more Build a Game with HTML5 canvas apply game logic and more This course is ideal for individuals who are Web developers or Web Designers or Anyone who wants to learn more about creating web content or Anyone who wants to create Games with HTML and JavaScript It is particularly useful for Web developers or Web Designers or Anyone who wants to learn more about creating web content or Anyone who wants to create Games with HTML and JavaScript.

Enroll now: HTML5 Canvas create 5 Games 5 Projects Learn JavaScript

Summary

Title: HTML5 Canvas create 5 Games 5 Projects Learn JavaScript

Price: $79.99

Average Rating: 4.05

Number of Lectures: 178

Number of Published Lectures: 178

Number of Curriculum Items: 178

Number of Published Curriculum Objects: 178

Original Price: $199.99

Quality Status: approved

Status: Live

What You Will Learn

Create your first Game using HTML5 and Canvas

How to use Canvas element to draw

How JavaScript is applied to HTML5 Canvas

The basics of using HTML canvas

Create amazing things with Canvas

Apply JavaScript to create Canvas effects like Matrix, bouncing ball and more

Build a Game with HTML5 canvas apply game logic and more

Who Should Attend

Web developers

Web Designers

Anyone who wants to learn more about creating web content

Anyone who wants to create Games with HTML and JavaScript

Target Audiences

Web developers

Web Designers

Anyone who wants to learn more about creating web content

Anyone who wants to create Games with HTML and JavaScript

Learn HTML5 Canvas Element – Quick Introduction to Canvas HTML5

Introduction to drawing using JavaScript on HTML5 Canvas Element – This course requires JAVASCRIPT CODING!!!!!

Do not take this course without prior coding experience – JavaScript and HTML and prerequisites

New content just added – how to create your first game using HTML5 and Canvas – fun interactive battle game with computer brain and dynamic values.   Explore how to make Canvas based games

#1 HTML5 Canvas Pong Game– Hit the ball between ready 2 players on screen.  Source Code included build your own version of the game.

#2 HTML5 Canvas Falling items catcher Game – Objective of  the game is to catch items as they fall.  Score when you catch colorful balls avoid the blinking resizing items or you lose a life.

#3 Bubble popper with Mouse Clicks– hover mouse over items and pop them.  Score when you click and pop endless bubbles that float up the screen.  Colorful bubbles.

#4 Brick breakout game– Build your version of this classic brick breaker game.  Dynamic game elements, adding bonus falling items  and more.  Take this game to the next level add more and customize the dynamic game values.

#5 Battle Bots Game on Canvas – with 2 autonomous players or take control and have 2 players using the keyboard. You won’t find THIS GAME anywhere else –

How to draw elements on Canvas

How to add keyboard event listeners for arrow keys and player interaction

How to add animation for smooth gameplay

How to add game scoring and logic

How to apply automation to player movement

Create 2 player interaction and response to game actions

Projects –

1. How to download canvas image to computer – simple code to add a download button downloading your canvas image as base64 image file to your computer.

2. Create a Matrix falling letters effect using HTML5 Canvas.  Add this special, effect using JavaScript

3. Explore how to make a bouncing ball on canvas

4. Upload images from your computer into canvas

5. Draw on canvas simple drawing application project

Source Code included —

Explore how you can use JavaScript to draw within the HTML5 Canvas element on your webpages

Source Code included – step by step lessons with an introduction to basics of drawing on canvas.  Course will walk through how to use JavaScript code and syntax to create visual content within the HTML5 canvas element on the webpage.

The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images.

Course covers Getting started with HTML5 Canvas Drawing

How to Start Drawing on Canvas with JavaScript.

Learn Basics of Drawing on Canvas

Color Units and options for line and fill Color within Canvas objects

Strokes and Lines drawing more objects on Canvas

How to create Draw Arcs and Circles.

Add Text to Canvas JavaScript

Options and how to draw Line Styles Canvas

Using Images – Image Options Canvas HTML5 JavaScript drawing

Color Gradients and Styling Fun radial and linear

Applying Text Shadows to text content within Canvas

How to use Save and Restore.

Scaling reverse Text mirror your text content

Creating Canvas animations using JavaScript

Project how to create Image Rotator.

Canvas Drawing Draw a StickMan Challenge

This course is a fast paced course with all the source code included – Please try the code as you got hough the lessons to learn.

There are prerequisites to this course – please ensure you do have the skillset to learn the content presented within the lessons.  The design is to explore HTML5 Canvas  and how it works.  Scope of this course is HTML5 Canvas  and content related to the learning objective will only be covered in the lessons of this course.  Perfect to get introduced to HTML5 Canvas  or as a refresher to anyone already familiar with web coding.

Taught by a web developer with over 20 years experience – ready to help you learn and answer any questions you might have.

Fast friendly support is always available within the Q&A section

Course Curriculum

Chapter 1: Introduction to drawing using JavaScript on HTML5 Canvas Element

Lecture 1: HTML5 Canvas Introduction

Lecture 2: Resources

Lecture 3: Web Developer Setup Resources

Lecture 4: Start Drawing on Canvas with JavaScript.

Lecture 5: Source Code

Lecture 6: Basics of Drawing on Canvas

Lecture 7: Source Code

Lecture 8: Color Units and options for line and fill Color within Canvas objects

Lecture 9: Source Code

Lecture 10: Strokes and Lines drawing more objects on Canvas

Lecture 11: Source Code

Lecture 12: Draw Arcs and Circles.

Lecture 13: Source Code

Lecture 14: Add Text to Canvas JavaScript

Lecture 15: Source Code

Lecture 16: Canvas Drawing Draw a StickMan Challenge

Lecture 17: Source Code

Lecture 18: Options and how to draw Line Styles Canvas

Lecture 19: Source Code

Lecture 20: Using Images – Image Options Canvas HTML5 JavaScript drawing

Lecture 21: Source Code

Lecture 22: Color Gradients and Styling Fun

Lecture 23: Source Code

Lecture 24: Applying Text Shadows to text content within Canvas

Lecture 25: Source Code

Lecture 26: How to use Save and Restore.

Lecture 27: Source Code

Lecture 28: Scaling reverse Text mirror your text content

Lecture 29: Source Code

Lecture 30: Creating Canvas animations using JavaScript

Lecture 31: Source Code

Lecture 32: Project how to create Image Rotator.

Lecture 33: Source Code

Lecture 34: HTML5 Canvas Conclusion.

Chapter 2: Battle Game using HTML5 Canvas and JavaScript

Lecture 1: Battle Game Introduction

Lecture 2: Game setup How to HTML5 Setup and Draw.

Lecture 3: Source Code Drawing on Canvas fillRect method

Lecture 4: How to Drawing Paths Canvas Game Prep

Lecture 5: Source Code how to draw lines with Canvas HTML5

Lecture 6: How to draw arcs and Drawing Circles Canvas

Lecture 7: How to draw a Happy Face HTML5 Canvas code snippet

Lecture 8: How to make game animation with Canvas HTML5 JavaScript Animation Frame

Lecture 9: HTML5 how to add animations Code Snippet

Lecture 10: Make the game interactive with arrow keys Keyboard Event Listener Move.

Lecture 11: How to add Eventlisteners Canvas Keyboard Arrow Keys Code Snippet

Lecture 12: How to add a second Player to your HTML5 Canvas Game

Lecture 13: Source Code How to add an opponent in HTML5 Game Source Code

Lecture 14: How to set Movement Conditions and boundaries for players in game

Lecture 15: Movement of Players in Game HTML5 Canvas Game Source Code

Lecture 16: How to add Shooting with keypresses player event listeners

Lecture 17: Gameplay shooting within Game HTML5 Canvas Game source code

Lecture 18: How to add Collision Detection Objects within HTML5 JavaScript Game

Lecture 19: How to add Collision Detection to your HTML5 Canvas Game Source Code

Lecture 20: How to add Player Scoring within your JavaScript HTML5 game

Lecture 21: Code Snippet Adding Player Scoring to HTMl5 Canvas Game

Lecture 22: How to Game Reset and restart the game values

Lecture 23: Game Reset Canvas HTML5 Game Source Code

Lecture 24: HTML5 game code Game tweaks and Updates

Lecture 25: Source Code HTML5 Canvas game updates

Lecture 26: How to make an opponent in HTML5 game Opponent Brain Logic

Lecture 27: Adding Opponent Brain Logic 2 making the player move within the game

Lecture 28: Game Applying Logic adding an opponent Brain Source Code

Lecture 29: How to add Opponent Attack Mode to improve your gameplay

Lecture 30: HTML5 Game opponent attack mode source code

Lecture 31: How to add Game Tweaks and Adjustments to your HTML5 Game

Lecture 32: HTML5 Game Source Code updates

Lecture 33: Game code review and Section Code Conclusion

Lecture 34: Final Code HTML5 Game Updated Source Code

Lecture 35: Game Next Steps make 2 autonomous players HTML5 Canvas Battle Game V2

Lecture 36: Updated Source Code 2 Players Autonomous play HTML5 Canvas Game Code

Chapter 3: Create a Simple Interactive HTML5 Canvas Game HTML5 Canvas PONG Battle

Lecture 1: HTML5 Canvas PONG Game Introduction

Lecture 2: HTML5 Pong Setup of HTML5 Game Board

Lecture 3: Setup Game Board Source Code

Lecture 4: Game how to Draw more shapes on Canvas.

Lecture 5: Source Code

Lecture 6: HTML5 canvas game setup KeyBoard Interaction

Lecture 7: How to add event listeners Source Code

Lecture 8: How to add Second object on Screen for Pong Game online

Lecture 9: Source Code Movement Player key events

Lecture 10: HTML5 Pong game setup animations Animation Frames

Lecture 11: Making animations on Canvas HTML5 source code

Lecture 12: Adding collision detection between ball and paddles on Pong HTML5 game

Lecture 13: Source Code Interactions of canvas objects with collision detection

Lecture 14: HTML5 pong adding Bouncing Ball

Lecture 15: Source Code for bouncing ball

Lecture 16: HTML5 Canvas pong game Final Game Tweaks.

Lecture 17: Source Code Final Game HTML5 Pong Game

Lecture 18: Pong Game Code Review.

Chapter 4: HTML5 Canvas Game Bubble POPPER JavaScript Game

Lecture 1: Creating a bubble popping game with canvas Introduction Bubble Popper.

Lecture 2: Setup HTML canvas for bubble popping game

Lecture 3: How to setup Game HTML and Code source code

Lecture 4: How to create bubbles on canvas Gradient Fill

Lecture 5: Source Code HTML5 Canvas Gradient Fill Code

Lecture 6: Bubble popping game Generate Bubbles

Lecture 7: Source code to create bubbles for game

Lecture 8: Game objects animations Moving Bubbles HTML5

Instructors

Laurence Svekis
Instructor, GDE, Application Developer

Rating Distribution

1 stars: 1 votes

2 stars: 2 votes

3 stars: 3 votes

4 stars: 17 votes

5 stars: 24 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!