Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS AWS Certified Developer - Associate CompTIA Security+
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee

This course includes:

  • 4.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
Development Game Development HTML5

Javascript 2D Game Development w/ HTML5 Canvas - Snake Game

Javascript for Front End Web App Development - HTML5 Canvas & CSS3 - 2D game development - create the game from scratch
Rating: 3.7 out of 53.7 (2 ratings)
14 students
Created by DigiFisk (Programming is fun)
Last updated 10/2020
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • How to create a completely dynamic Snake game app with Javascript, HTML5 canvas and css
  • How to design the game logic for the game and implement it as code
  • How to improve your web app development, web game development & javascript skills
  • How to improve your logical problem solving skills
  • How to improve your front end design and development skills
  • How to take your theoretical knowledge of Javascript to the next level by using it to build real world things.
  • How to get into real world web development and programming, in general.
  • The ins and outs of 2D web game development - create this game, and you'll equip yourself with the tools to create any other 2D web game you want.
  • HTML5 canvas and how to use it to create 2D graphics for your games, websites and more.
  • How to manipulate your 2D graphics using Javascript, HTML5 canvas methods and Javascript DOM.
  • How to make things move in your game using Javascript.
  • How to create sophisticated mobile-friendly (responsive) designs using CSS3.
  • How to check for collision check in 2D web game development
  • How to make scores and buttons work.

Course content

4 sections • 33 lectures • 4h 34m total length

  • Preview08:15

  • Preview09:14
  • Create your canvas and design it with CSS3
    11:06
  • Create your score board and buttons
    04:28

  • Connecting HTML and script/JS files
    06:04
  • An introduction to variables and assigning values
    09:59
  • Mathematical operators and alerts
    09:52
  • Conditional statements - if else statement
    06:13
  • Conditional statements - Switch case
    07:12
  • Loops - For loop
    06:31
  • Arrays - 1 dimensional arrays
    06:37
  • Arrays - 2 dimensional arrays
    05:08
  • An introduction to functions (function definition and calls)
    10:42
  • Intro to DOM - getElementById and InnerText
    10:48
  • Intro to DOM - adding click events to buttons
    09:06
  • More Event listeners Part 1
    08:12
  • More Event listeners Part 2
    04:39
  • Objects oriented programming with Javascript - part 1
    09:58
  • Objects oriented programming with Javascript - part 2
    05:07
  • Objects oriented programming with Javascript - part 3
    05:07
  • HTML5 canvas - Step 1 & 2 - Getting the canvas and creating the drawing object
    08:27
  • Drawing a line (also explanation on canvas dimensions and pixel points)
    08:50
  • Drawing & coloring a shape with poly lines (a path)
    09:12
  • Drawing & coloring a circle and arcs
    09:18

  • Retrieve the elements we need manipulated - Javascript DOM
    04:46
  • Create the global variables needed in the game
    09:00
  • Create the events - what happens when you click a button or move an arrow?
    03:54
  • Get the new button to work - start the game & draw the snake - part 1
    09:55
  • Get the new button to work - start the game & draw the snake - part 2
    11:40
  • Change the direction of the snake - make the arrow keys work
    14:17
  • Make the snake move
    08:32
  • Did the snake eat the apple? Scores?
    11:19
  • Check for collision - wall collision & body collision
    11:10

Requirements

  • You can come to this course with absolutely no coding knowledge. I explain everything you need to create your very first web app.
  • A PC or laptop to practice what I teach

Description

Practice makes perfect. Start your journey into becoming a professional front end web developer here!

At DigiFisk, we like making learning fun. Our courses are interactive and fun with a ton of practical elements to it. We've decided to take it a step further with our Web app development practice series. 

Once you learn the syntax of a programming language, the next logical step is to start creating software and apps. But that's where most students get stuck. Problem solving isn't as easy as learning a bunch of syntaxes. 

But we aim to make it easy for you. 

In this course, you'll learn how to build your own Snake Game App from the ground up with just HTML5 canvas, Javascript and CSS  in just a couple of hours. 

You can be a complete beginner to HTML, CSS and Javascript, and you'll learn the basics of everything, and create a portfolio-worthy Snake game at the end, to boot! 

This is the perfect course for web development beginners, but if you know the basics, then this practical course would be the next step in your web development journey. If you're a seasoned programmer who wants to create a new project to add to your portfolio, then this course is perfect for you. So, there's something for everyone in this course.


What will you learn in this course? 


You'll learn:

1. How to create a completely dynamic Snake game app with Javascript, HTML5 canvas and css

2. How to create the HTML5 structures of this game. 

3. How to make the game pretty with CSS & CSS3 (design, design, design!) 

4. How to make the game playable (solve problems) with logic and algorithm, i.e Javascript 

5. How to improve your front end design and development skills

6. How to improve your logical problem solving skills

7. How to take your theoretical knowledge of Javascript to the next level by using it to build real world things.

8. How to get into real world web development and programming, in general.

9. The ins and outs of 2D web game development - create this game, and you'll equip yourself with the tools to create any other 2D web game you want.

10. HTML5 canvas and how to use it to create 2D graphics for your games, websites and more.

11. How to manipulate your 2D graphics using Javascript, HTML5 canvas methods and Javascript DOM.

12. How to make things move in your game using Javascript.

13. How to create sophisticated mobile-friendly (responsive) designs using CSS3.

14. How to check for collision check in 2D web game development

15. How to make scores and buttons work.

and so much more! 

By the end of the course, you'll be know how to create 2d web games like a pro. You could even try creating other web apps and games to test your knowledge. 


Who is this game for?

This game is for you if:

1. You want to learn web development/web app development the fun way

2. You know the basics of web development and want to move to the practical applications of it.

3. You're a web designer who wants to get into web development and Javascript fast.

4. You love learning by creating, and don't like to listen to hours of theory, this course is for you

5. You're completely new to programming and you want to get started by creating a fun project

6. You'd like to start creating your portfolio of web projects


How is this course designed? 

I've made this course as easy to understand as possible. I've structured it in such a way that each section will handle one of the 3 languages covered here. 

Introduction: Every professional developer writes algorithms before creating a software or game. We'll be writing the a step by step algorithm for our game, and I'll be explaining what we'll do in every step. 

Module 1: I'll also be teaching you how to create the bare bones of the app with HTML5. The result will be a page with all the elements we need in our game, devoid any colors or design elements. 

Module 2: In this 3 hour module, you'll learn the basics of Javascript, everything from variables to objects. Then, we'll delve into the basics of HTML5 canvas and how to use it in your games.

Module 3: This would be the meat of the course. We'll be delving into Javascript & HTML5 canvas code of our game in this module, and I'll teach you how to make the game playable (let the user draw on the canvas and display the game results) in here. 

Module 4: In this module, let's make our game pretty with CSS and CSS3! You'll learn a lot about responsive web development, aligning elements the right way to make them look good, and so much more.  


This course is for you if:

1. If you like learning by doing rather than hours of boring theoretical lectures. 

2. If you're a complete newbie to the world of web development, or just programming in general, and would like to start creating software with the help of a beginner-friendly course. You'll learn the basics of everything used in this project (HTM5, CSS3, Javascript, HTML canvas).  I'll be explaining every single line of code I'll be using in this course, so you won't feel lost. 

3. If you have the passion for programming, and know the basics of HTML5 and CSS, but you're stuck on the practical aspects of it. Turn your theoretical knowledge into practical knowledge with our course. 

4. If you want to delve into the exciting world of front end web app development, this course will take you a couple steps further in the right direction.  

5. If you're a Javascript web developer who just wants to try out a new project. Our course welcomes coders of every level, from absolute beginners, to pros.

So, what are you waiting for? Get this course today, and begin your journey into the wonderful world of web development and game development!

Who this course is for:

  • This course is for people who want to learn web development/web app development the fun way
  • This course is also for people who've learned the basics and want to move on to practical programming
  • If you love learning by creating, and don't like to listen to hours of theory, this course is for you
  • If you're completely new to programming and you want to get started by creating a fun project
  • If you'd like to start creating your portfolio of web projects

Instructor

DigiFisk (Programming is fun)
Hands-on practical training | Programming courses
DigiFisk (Programming is fun)
  • 4.4 Instructor Rating
  • 1,387 Reviews
  • 74,944 Students
  • 18 Courses

Welcome to DigiFisk! 


I am Aarthi Elumalai, the founder of DigiFisk.


Here at DigiFisk, we aim to make programming fun and interactive for students.


If you're tired of boring theoretical classes, then you've come to the right place.


We start off with basics/beginner courses in a particular programming language or field, and continue on with a number of real-world project-based classes to equip you to thrive in the real world.


Our lectures tend to be very detailed. We leave nothing out, so beginners and advanced programmers alike can learn something from each of our courses.


Enjoy your journey into the fascinating world of programming with DigiFisk! We'll see you inside. :)

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.