Poth On Programming

Welcome to the 16th entry in my dev log series on making a simple 2d platforming game with HTML5, JS, and CSS. In this video I'll be covering many changes to the core framework of the game as well as a few new features and updates. Making a game-state manager 00:00:53 Adding a title screen 00:06:29 Loading JS files in any order 00:08:57 Separating initialization and framework 00:15:01 Improving maintainability with functions 00:21:58 Adding text box graphics 00:25:50 Controller update 00:31:24 Final thoughts 00:32:58 If you would like to support the channel with a donation or view my other projects and videos, check out my website: https://pothonprogramming.github.io

In this video I add spikes to the top of the screen, I move the score text box to the bottom and I clean up some unnecessary files. Check out my website to get the source code and play the game: https://pothonprogramming.github.io/ Also, if you want to help me make more videos, feel free to donate via PayPal or Patreon! https://www.paypal.com/paypalme/pothonprogramming?locale.x=en_US https://www.patreon.com/bePatron?u=15382655

In this somewhat longer than expected video I add a collectible item to the game with basic rectangle collision. What you'll learn in this fancy tutorial: 00:01:00 - Creating the Item class 00:03:30 - Creating the item manager 00:09:00 - Drawing the item 00:16:00 - Actually finishing the drawing of the item 00:16:45 - The rectangle collision method 00:20:00 - Using the collision method 00:26:05 - The item counter element 00:28:00 - Styling the item counter element 00:37:35 - Using the item counter 00:38:00 - Fixing the random item position code If you watch the whole thing (as long and dull as it may be) you will learn a lot of stuff. More stuff than is in the time stamps. I suggest playing the video at 1.25 x speed for maximum brain stimulation. Check out the working example on my site! https://pothonprogramming.github.io

In this magical code refactoring dev log, I run into an issue with destructuring functions out of the global object and have to figure out how to fix it. I also fix a position issue with the score counter. This video will help you understand how the "this" keyword works inside of a function and goes over an issue you may encounter when destructuring functions out of objects. A few solutions I didn't talk about are binding "this" to the destructured function, and using closures to make a local copy of "this" in your function. What you'll learn in this video: 00:00:54 - Explaining the issue 00:05:10 - A few ways to fix the issue 00:07:03 - Testing a potential oversight with self referencing 00:09:10 - My solution to the problem: private properties! 00:23:00 - Repositioning the score counter Check out the website for more projects, videos, and source code! https://pothonprogramming.github.io Join the Discord for some conversation: https://discord.gg/fTNxCXv

In this magical coding video I continue to develop Stay Down, a game I plan to publish on Itch.io. In Part 6 I start to code the platforms that are going to push our hero off the screen to a painful death. What you'll learn: - VERY BASIC PLATFORM COLLISION!!! Super basic, not game ready. - Patience (if you watch the whole video). If you like this and want to mess around with the example, check out my website: https://pothonprogramming.github.io

In this game dev tutorial / dev log I fix the weak placeholder collision detection between the player and platform and replace it with a much better, more accurate method. It's really starting to look like a game, which is cool. I hope you guys learn something and enjoy the content! Thanks for watching! What you'll learn: 00:01:30 - Spawning multiple platforms 00:06:00 - A real approach to collision with 2D platforms 00:16:00 - Adjusting player velocity when on a platform 00:27:45 - Optimizing the collision function a bit 00:32:30 - Using Downgit to get the source code Downgit: https://yehonal.github.io/DownGit/#/home Projects: https://pothonprogramming.github.io

In this video I show you how to track both the physical and in game states of your keyboard inputs, so even if a button is physically pressed, you decide if you want to use it once and stop or use it on every frame of animation. It's a pretty handy feature! What you'll learn: - Better keyboard controls Check out my website at https://pothonprogramming.github.io

In this HEFTY video, I refactor pretty much all the code I've written so far to take on a more modular approach to organizing the project. I truly keep everything out of the global scope except for one global object. In addition, I implement some game states to manage the pause and run states of Stay Down. This is boring stuff, and there's a lot of brow furrowing, but it had to be done. What you'll learn in this video: - Patience (if you watch to the end). - Game States / State Machine. Games have different states and this video shows one way of managing that. - A way to organize and structure your application in a very modular way, allowing for private and public members in each module. - How not to make a successful Rumble video. NO EDITS, BABY!!! Visit my website: https://pothonprogramming.github.io

In this HTML5 and Vanilla JS Game design tutorial, I embark on a magical journey to implement a fixed time step game loop in Stay Down, my project that might one day reach Itch.io. I also add a pausing feature! WOO! What you'll learn in PART 3: - How to make a fixed time step game loop!!! - How to make a sloppy pause feature that I'll likely fix in a future video. Visit my website at https://pothonprogramming.github.io

In part 12 of this lengthy 2d platformer game dev tutorial series, I finally add some graphics to the game. What you'll learn in this video: 00:01:00 - Making the loader 00:09:20 - Load some images 00:14:30 - Making the renderer and pulling it into the project 00:20:00 - the drawImage function in the renderer 00:23:00 - This issue is due to trying to access the image before it is loaded 00:24:00 - Drawing the images 00:27:00 - Resizing the game world 00:28:00 - Resizing the hit boxes 00:31:00 - Adjusting friction 00:32:30 - Fixing blurriness due to scaling in Chrome and Firefox 00:34:30 - Fixing anti-aliasing with Math.floor Check out the working example and get the source code at https://pothonprogramming.github.io Also, join the Discord for some good discussion!

Hey, everybody! If you are looking for a tutorial on how to make your game's display canvas scale to fit the window without breaking its aspect ratio you have come to the right place. In addition to lots of code refactoring I'll be adding this functionality to my 2D game project. I'm using HTML5 and JS, but you could use the same logic in any application to make one rectangle scale to fit inside another. What you'll see in this video: 00:00:45 - Refactoring the global object 00:03:45 - Refactoring the Game States 00:19:00 - Resizing the display canvas 00:24:00 - Testing it out Thanks for watching! Check out the site! https://pothonprogramming.github.io

In this HTML5 and Vanilla JS Game design tutorial, I embark on a magical journey to publish a very small and simple browser game to Itch.io. I also relaunch the Poth On Programming Video Log with a web cam and ZERO EDITING because time is scarce and I just want to write code and show anyone who cares. What you'll learn in PART 1: - Basic canvas setup for the game. - Some super easy class inheritance and something like prototype inheritance. - DRAW A RED SQUARE!!! - Make the red square fall and hit the ground. No keyboard movement yet, but more is coming. Visit my website at https://pothonprogramming.github.io

In this entry in my little game dev tutorial series I'm just cleaning up my code a bit with JavaScript's Destructuring Assignment syntax. This is a great way to break out the useful parts of large objects to make your code more readable with much less dot walking. You can do more with destructuring, but in this video I just use it for basic assignment. What you can glean from this video: 00:01:10 - Destructuring a BIG object 00:05:00 - Cleaning up the rest of the code 00:13:40 - Destructuring "this" Thanks for watching! Like and Subscribe for more videos and definitely check out the website for more content! https://pothonprogramming.github.io

In this exceptionally long and profoundly lengthy video, I add a tiled background to the game. By watching this video you can learn the following: Create a buffer to reduce gpu instructions and make your game run faster. Randomly place generic looking tiles in a grid from a tile set / sprite sheet. The life skill of patience, because that's what it will take to watch this whole video. Source code: https://github.com/pothonprogramming/pothonprogramming.github.io/tree/master/content/stay-down Website: https://pothonprogramming.github.io Donate on Paypal: https://www.paypal.com/paypalme/pothonprogramming Donate on Patreon: https://www.patreon.com/bePatron?u=15382655 Your donations will go towards improving the channel and keep the videos coming!

https://pothonprogramming.github.io In this enchanting video tutorial on JavaScript game programming I show you how to add custom text graphics to the game. The text is stored in a sprite sheet and each character image or glyph has its own source frame, so the program knows exactly where to blit it from. It's a lot like a tile sheet. Visit my website for more tutorials and interactive examples as well as links to the source code and Discord!

In this HTML5 and Vanilla JS Game design tutorial, I continue the magical journey to publish a very small and simple browser game to Itch.io. In this episode I added keyboard controls and jumping. What you'll learn in PART 2: - Keyboard controls! - Jumping! Visit my website at https://pothonprogramming.github.io