JavaScript Flappy Bird with Particles & Sprites
#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 ( • HTML Canvas Game Development Tutorial | Fl... ) 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/flapp...
https://opengameart.org/content/winte...
https://www.codeandweb.com/free-sprit...
Collision image (bang.png):
https://pixeldra.in/u/NmppP2ng
vanilla JavaScript & HTML canvas game tutorials:
/ pothonprogramming
This tutorial is part of a series - Creative coding with vanilla JavaScript and HTML canvas COMPLETE PLAYLIST:
• JavaScript Flappy Bird with Particles & Sp...
Music:
Business / Corporate by Mixaund | https://mixaund.bandcamp.com
Music promoted by https://www.free-stock-music.com
На этой странице сайта вы можете посмотреть видео онлайн JavaScript Flappy Bird with Particles & Sprites длительностью часов минут секунд в хорошем качестве, которое загрузил пользователь Franks laboratory 19 Июнь 2020, поделитесь ссылкой с друзьями и знакомыми, на youtube это видео уже посмотрели 36,793 раз и оно понравилось 997 зрителям. Приятного просмотра!
