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

Опубликовано: 17 Октябрь 2024
на канале: Franks laboratory

73,915

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   / code_laboratory
Check out some of my source code on CODEPEN https://codepen.io/franksLaboratory

Sprite sheets:
http://untamed.wild-refuge.net/rmxpre...
ALTERNATIVE BACK UP FILES since the original site is down, let me know when the site is back up please
https://www.frankslaboratory.co.uk/do...
https://www.frankslaboratory.co.uk/do...
Backup link: https://ibb.co/Pj24jSz

Background image:
https://pixeldra.in/u/ZhZrYLJR
https://www.frankslaboratory.co.uk/do...
https://ibb.co/jzY654g

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:

   • Image into Interactive Particles - HT...

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:
   • CSS Login Form Animation With Wave Pl...

#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!