How to Make a Game with JavaScript and HTML Canvas | Keyboard Input & Sprite Animation [Vanilla JS]

Do you like pixel art? In this episode of my game development series I will show you how to make a game with JavaScript and HTML canvas from scratch with no libraries. We will learn more about sprite animation, keyboard input and we will build custom algorithm to control how often request animation frame method serves frames of animation loop using Data.now() JavaScript method. All with vanilla JS.

We will practice JavaScript techniques that are useful for web development in general, not just for games. We are front end web developers and these exercises are here to help up us to improve our skill set and learn new things. We will focus on event listeners, array manipulation and pulling and handling data stored in an object and while doing that will learn how to create a player character and move it around canvas with keyboard.

If you want source code to my tutorials I have made some of my videos available on live coding platform Eversparked. You can watch my videos with LIVE browser preview and live code that can be copied and adjusted at any stage. I really like the project idea, I wish I had a tool like that when learning hot to code. Let me know what you think https://bit.ly/3djMrF6

You can message me on TWITTER https://twitter.com/code_laboratory
Check out some of my source code on CODEPEN https://codepen.io/franksLaboratory

Sprite sheets:
http://untamed.wild-refuge.net/rmxpresources.php?characters
Background image:
https://pixeldra.in/u/ZhZrYLJR

In the previous episode I just placed the background image in our game using CSS, this time we will do it properly and draw game background on canvas. Since we are using simple pixel art sprites we want to be able to set custom fps to request animation frame method, by default the animation will be extremely fast on most modern computers and characters will be zooming across the screen and especially sprites will be animating way too fast. There is a way to throttle sprite animation with algorithm.
We could also simply slow down our game by using custom set interval instead of using request animation frame, but let's do it the proper way and employ the best practices, I will show you an algorithm that will allow us to set FPS for our game in milliseconds, which will be consistent across all machines regardless of how strong user's computer is using data.now JavaScript method.

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:

https://www.youtube.com/watch?v=afdHgwn1XCY&list=PLYElE_rzEw_siuo-kkHh5h7Sk--6IPYNh

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:
https://www.youtube.com/watch?v=loKyT99W2s8&list=PLYElE_rzEw_t2O2DvfopIoq-diTgefVzV

#javascript #html5canvas #frankslaboratory

The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commision without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!

Видео How to Make a Game with JavaScript and HTML Canvas | Keyboard Input & Sprite Animation [Vanilla JS] канала Franks laboratory