Do It Yourself – Website Tutorials
#javascript #html5canvas #frankslaboratory
In the previous episode of the series we build flappy bird game from scratch using just plain vanilla JavaScript. In this HTML canvas game development tutorial I will show you how to add any animated sprites and repeating background.
We will also adjust player hit box, to make sure collision detection works well and couple more things to give our game final polish and make it look nice and clean.
By the end of this tutorial you will be able to take any sprite sheet and create your own unique Flappy bird game.
This video is PART 2. Part 1 available here:
HTML Canvas Game Tutorial [ Vanilla JavaScript Flappy Bird with Particle Effects & Sprites ] Gamedev: https://youtu.be/lGJ9i6CYKyQ
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
*** HTML Canvas Game Development Tutorial | Flappy Bird PART 2 – Animated Sprites & Repeating Background ***
If you liked this video I’m sure you will enjoy other videos on my channel. You can find HTML Canvas Animation Tutorials, JavaScript tutorials, animated effects and step by step animation guides, each video shows many examples of the final effect. I will help you learn modern web development techniques by building real projects you can show off on your personal website or GitHub. Code along with me and gain skills to get your first job in the industry. If I could do it you can do it too. If you decide to code along and modify the effects, share your Codepen/JS Fiddle in the comments, I want to see what you came up with.
I have pure vanilla JavaScript animation series, in each tutorial we create all different kinds of interactive animated effects from scratch. No plugins, no libraries, no frameworks. Every line of code is explained to give you hands on experience and teach you as much JavaScript as possible. If you want more creative JavaScript tutorials, HTML canvas animations, interactive animated effects to code along, video guides for beginners as well as advanced pure vanilla JavaScript, check out the playlist here:
For more creative vanilla JavaScript tutorials, CSS tricks, HTML canvas animations, front end web development and web design guides, subscribe to the channel and click the bell icon to get notified when I release a new video.
If you want to improve your Front End Web Developmnent skills, check out my CSS tutorial series where we explore animations and effects that can be done with modern CSS3 techniques:
*** HTML Canvas Game Development Tutorial | Flappy Bird PART 2 – Animated Sprites & Repeating Background ***
Music:
Business / Corporate by Mixaund | https://mixaund.bandcamp.com
Music promoted by https://www.free-stock-music.com
source