HTML Canvas Game Tutorial [ Vanilla JavaScript Flappy Bird with Particle Effects & Sprites ] Gamedev

#javascript #htmlcanvas #frankslaboratory
In this week's HTML canvas game tutorial we will build vanilla JavaScript Flappy bird game from scratch with particle effects and sprites. No frameworks and no libraries. First we will start with a solid good quality base game skeleton and then I'll show you how to add some extra features like particle effects, scrolling backgrounds and in the SECOND PART (https://youtu.be/WUPIvrUPDdQ) how to include any sprites you want so you can make the game unique.
I discovered this amazing artist who's name I cant pronounce. On their website you can find all different kinds of high resolution SVG cartoon sprite sheets and game graphics. He offers some free example sprites which we will use today for our game, but if you want to build something more unique for your coding portfolio look through his paid collections as well. It's very reasonably priced for the great quality he offers.
http://bevouliin.com/

Some of you asked me if its possible to incorporate generative art particle effects we build in this series into our games. We can include anything we want. It's one of the things I like the most about creative coding. Take different techniques you've learned and combine them together to create something new. We will start with an easy one, I will give Flappy bird a trail of particles coming from its tail and I will make it cycle through rainbow colors. I will also show you very easy way to control speed of sprite animation separately for each element in the game, how to handle score count and how to create endlessly scrolling backgrounds. While doing that we will practice vanilla JavaScript coding techniques that can be used for any project, not just for games. We will learn more about ES6 classes, array manipulation, event listeners, callback functions, const and let ES6 variables and modulus operator.

RELEVANT LINKS:
Sprites:
http://bevouliin.com/
https://opengameart.org/content/flappy-dragon-sprite-sheets
https://opengameart.org/content/winter-platformer-game-tileset
https://www.codeandweb.com/free-sprite-sheet-packer

Collision image (bang.png):
https://pixeldra.in/u/NmppP2ng

vanilla JavaScript & HTML canvas game tutorials:
https://www.youtube.com/PothOnProgramming

This tutorial is part of a series - Creative coding with vanilla JavaScript and HTML canvas COMPLETE PLAYLIST:
https://www.youtube.com/watch?v=lGJ9i6CYKyQ&list=PLYElE_rzEw_siuo-kkHh5h7Sk--6IPYNh

Music:
Business / Corporate by Mixaund | https://mixaund.bandcamp.com
Music promoted by https://www.free-stock-music.com

Видео HTML Canvas Game Tutorial [ Vanilla JavaScript Flappy Bird with Particle Effects & Sprites ] Gamedev канала Franks laboratory