Summary of Vertical Platformer Game Tutorial with JavaScript and HTML Canvas

This is an AI generated summary. There may be inaccuracies.
Summarize another video · Purchase summarize.tech Premium

00:00:00 - 01:00:00

This tutorial demonstrates how to create a vertical platformer game using JavaScript and HTML canvas. The video shows how to set up the project, write code to reference the canvas element and draw on it, and create a script to delete the script tags when the file is saved.

00:00:00 In this video, the author demonstrates how to create a vertical platformer game using JavaScript and HTML canvas. First, they set up the project and add a canvas element. Then, they write code to reference the canvas element and draw on it. Finally, they create a script to delete the script tags when the file is saved.
00:05:00 This tutorial shows how to create a vertical platformer game in JavaScript and HTML using the canvas element. The code is saved in a separate file called index.js. The first step is to set up the canvas context, which is done by consoling out the context to index.js. The next step is to draw a rectangle on the canvas using C dot fillrect. If the width or height of the rectangle is not the same as the canvas size, it will be automatically resized. The last step is to upload the game to a live URL.
00:10:00 This video tutorial explains how to create a vertical platformer game using JavaScript and HTML Canvas. You'll first need to choose a domain and host, and then register and migrate your website. You'll then name and manage your website, and see how your game is rendered on your website.
00:15:00 In this tutorial, the author demonstrates how to create a simple vertical platformer game using JavaScript and HTML canvas. They explain how to create a player, and how to animate the player downwards.
00:20:00 In this video, the author explains how to create a vertical platformer game using JavaScript and HTML canvas. They first explain how to create a Y position variable and then show how to create an object-oriented player class and a Draw method within that class. The author then explains how to change the coordinates of a player during an update method.
00:25:00 In this video, the author demonstrates how to add gravity to a player in a vertical platformer game using JavaScript and HTML canvas. The author shows how to use a const variable to define the gravity value, and how to use it within the update method of the player object. This gravity value affects the player's position and velocity, and makes the player fall downwards.
00:30:00 This tutorial demonstrates how to create a vertical platformer game using JavaScript and HTML canvas. The player's y velocity is controlled by the gravity effect, and the player is stopped when they hit the bottom of the canvas. If the bottom of the player is still above the canvas, the player's y velocity is increased. If the bottom of the player is below the canvas, the player's y velocity is decreased.
00:35:00 This tutorial explains how to create a vertical platformer game with JavaScript and HTML canvas. The tutorial covers how to listen for key presses and react accordingly, as well as how to create a gravity effect.
00:40:00 This tutorial explains how to create a vertical platformer game using JavaScript and HTML Canvas. The author first explains how to set up event listeners to track which keys are pressed down and which are not, and how to affect the player's velocity based on which key is pressed down. Next, the author explains how to add a background Sprite to the game. Finally, the author explains how to plop the background Sprite into the game.
00:45:00 The author demonstrates how to create a vertical platformer game in JavaScript and HTML using Canvas. The game's player sprite is initially created and assigned an image source and position. A background sprite is then created and assigned the same image source and position, with a conditional being added to the sprite's draw method to prevent an error if the image source hasn't been loaded yet.
00:50:00 This tutorial covers how to create a vertical platformer game using JavaScript and HTML5 canvas. First, the player's background image is scaled up to take up the full screen, then translated down to fit on the screen. Next, the player's sprites are updated with the new background, and finally, the background is translated up again to fit on the top of the sprites.
00:55:00 The video demonstrates how to create a vertical platformer game using JavaScript and HTML canvas. The player can stand on top of or collide with tiles drawn on a map, which is created using a map editor. To create the game's platforms, the player can jump up through them and land on top of them. Collision blocks are turned on and off using a layer, and platform collisions are coded differently to make sure the player falls through the platforms correctly.

01:00:00 - 02:00:00

This video tutorial explains how to create a vertical platformer game using JavaScript and HTML canvas. First, the author explains how to set up the collision map and export it as a JavaScript file. Next, they demonstrate how to create a 2D array from a 1D array of floor collisions data. Finally, they show how to loop through this array to draw collision blocks on the screen.

01:00:00 The author explains how to create a vertical platformer game with JavaScript and HTML canvas. They explain how to create a collision map and export it as a JavaScript map file. They create a const to store the collision map.
01:05:00 The author demonstrates how to create a 2D array from a 1D array of floor collisions data.
01:10:00 This YouTube video walks viewers through the process of creating a vertical platformer game using JavaScript and HTML canvas. The video first shows how to create an own 2D array to store the game's floor collisions, and then goes on to show how to loop through this array to draw collision blocks. Finally, the video explains how to refactor the code into separate files to make it more readable and maintainable.
01:15:00 The video demonstrates how to use a collision block in a vertical platformer game, and how to position it within the game. The Collision block class is imported into index.js, and the row index of the current row and column is used to determine where the collision block will be placed.
01:20:00 In this tutorial, the author explains how to create a vertical platformer game using JavaScript and HTML canvas. They use arrays to store the X and Y coordinates of each collision block, and then use these coordinates to place the blocks on the screen. They also render the background and the player after each collision block update.
01:25:00 The video tutorial explains how to render floor and platform collisions in a game using JavaScript and HTML canvas. Afterwards, the tutorial explains how to code collision detection for jumping with players.
01:30:00 In this video, the author demonstrates how to make a vertical platformer game with JavaScript and HTML canvas. First, they delete player 2 from the game and then delete the render function for player 2. Next, they move player 1 over to the right and center it out. They pass all of their collision blocks through to their player class, and then add a method called apply gravity to their player class. When they call update, they add on to player X position and apply gravity to pull player down towards the ground. Finally, they start detecting for vertical collision, and when they're done, they delete the conditionals and the L statement. This makes the code more clear.
01:35:00 This tutorial explains how to create a vertical platformer game with JavaScript and HTML canvas. The first part of the tutorial covers collision detection, and the second part covers player movement.
01:40:00 This tutorial explains how to create a vertical platformer game using JavaScript and HTML canvas. The collision function is refactored into a collision function to make the code more readable. If there is a collision between the player and the collision block, the player is stopped moving.
01:45:00 In this video, the author teaches how to create a vertical platformer game using JavaScript and HTML canvas. First, the player falls down and is stuck in one place due to their velocity being set to zero. Next, the player is moved to the top of the collision block minus their height, in order to ensure they will not pass through the collision blocks. Finally, the author discusses how to check for horizontal collisions, and how to take them into account when applying gravity.
01:50:00 In this tutorial, the author shows how to create a vertical platformer game using JavaScript and HTML canvas. They first explain how to set the player's velocity, and then they discuss how to create and use sprites. Next, they explain how to use collision detection between the player and the floor platforms. Finally, they show how to use sprite animation to create a player character that changes between different states.
01:55:00 In this video, the author explains how to properly draw a player using JavaScript and HTML Canvas. First, they reference the idle dot PNG file, which displays no changes. When they refresh the page, the player falls off the edge of the canvas. The author fixes the issue by deleting the player's draw method in player.js and calling the parent's draw method instead. They then add a background overlay to player.js and watch as the player moves smoothly and doesn't touch the ground. Next, the author explains how to crop the image and loop through the frames to create an animation.

02:00:00 - 03:00:00

The video explains how to create a vertical platformer game using JavaScript and HTML canvas. The player's position is based on the position of a hitbox, which is subtracted from the main player image's position. Vertical collisions are detected and the player is moved to the correct location. The video also explains how to add animations for the player's idle and run states.

02:00:00 In this video, the author illustrates how to create an animation effect with a vertical platformer game using JavaScript and HTML canvas. They first create an idle PNG sprite sheet with 8 different images of the player in an idle state. Then, they crop a specific section of the sprite sheet and move the crop box over to the next position to create the illusion of animation. Finally, they loop through the process to create the animation.
02:05:00 The video demonstrates how to create a vertical platformer game with JavaScript and HTML canvas, by setting up frame rates for different sprites, and implementing a update method for sprites. When the player moves, the crop box for the player sprite is moved to update the frame displayed.
02:10:00 The video explains how to create a vertical platformer game with JavaScript and HTML canvas. The player's frame rate is slowed down using a frame buffer, and the background sprite's scale is set to 1 so it matches the player's size.
02:15:00 In this video, the creator demonstrates how to create a vertical platformer game with JavaScript and HTML Canvas. They first discuss how to set up scaling for the player's image, and then add a hitbox to the player sprite to determine where collisions will happen. Next, they update the player's hitbox and frame update code. Finally, they draw out the hitbox and show it in action.
02:20:00 In this tutorial, the author explains how to create a vertical platformer game using JavaScript and HTML canvas. They use a hitbox to position the player on top of the game's environment, and then use collision detection to ensure that the player does not fall off the platform.
02:25:00 This tutorial teaches how to create a vertical platformer game with JavaScript and HTML canvas. The player's position is based on the position of a hitbox, which is subtracted from the main player image's position. Vertical collisions are detected and the player is moved to the correct location.
02:30:00 In this video, the author demonstrates how to create a vertical platformer game using JavaScript and HTML Canvas. They first discuss how to subtract distances between two points, and then use this information to create a collision block that moves the player to the perfect position. They also add in an idle animation and a running animation, and update the player's position in index.js.
02:35:00 The author demonstrates how to create a vertical platformer game with JavaScript and HTML Canvas by creating a player object, animating it, and using a for loop to create image objects for each animation. Next, they add a switch Sprite method to the player class, and use it to swap between the idle and run sprites when the player presses a key.
02:40:00 This video demonstrates how to create a vertical platformer game with JavaScript and HTML canvas. The video covers the creation of the game's player and idle state sprites, and how to adjust the game's animation speed. Finally, the video demonstrates how to add in a run animation.
02:45:00 In this tutorial, the author shows how to create a vertical platformer game using JavaScript and HTML Canvas. They first add in a jump animation, and then add in a fall animation. If the player is not going up or down, they switch to the jump sprite. If the player is falling, they switch to the fall sprite. If the player jumps, they check to see if the Y velocity is greater than zero, and if so, they switch to the jump sprite. If the player is not falling, they check to see if the Y velocity is less than zero, and if so, they switch to the fall sprite. Finally, they add in gravity and collision detection code, and show how to swap between sprites.
02:50:00 In this tutorial, the author demonstrates how to create a vertical platformer game using JavaScript and HTML canvas. They explain how to remove hitboxes and add animations for sprites. In addition, they show how to determine which idle animation to call based on player velocity and last direction.
02:55:00 This tutorial covers creating a vertical platformer game using JavaScript and HTML canvas. The author demonstrates how to create a jump left animation and how to handle player collisions.

03:00:00 - 03:40:00

This tutorial demonstrates how to create a vertical platformer game using JavaScript and HTML canvas. The player class is created and collision detection is implemented. The author also shows how to use a camera and how to make the player attack.

03:00:00 This tutorial shows how to create a vertical platformer game with JavaScript and HTML canvas. The player class is created and collision detection is implemented.
03:05:00 In this video, the author demonstrates how to create a vertical platformer game using JavaScript and HTML canvas. He shows how to create a collision block for the player's platform, and how to slow the game down so that the player always collides with one of the platform's collision blocks.
03:10:00 The author demonstrates how to create a vertical platform game with JavaScript and HTML Canvas, by editing how high the player jumps, Gravity, and camera positioning.
03:15:00 This tutorial teaches how to create a vertical platformer game using JavaScript and HTML Canvas. The tutorial starts by creating a const called "camera box right side" which will be equal to the camera boxes. Next, a conditional is created to check if the right side of the camera box is greater than or equal to the right side of the canvas. If this condition is met, the translate method is called to translate the canvas leftwards. If the condition is not met, the should pan camera to the left method is called. Finally, the player's dot should pin camera to the right method is called if necessary.
03:20:00 The video tutorial demonstrates how to create and use a vertical platformer game using JavaScript and HTML canvas. The main code file contains declarations for the camera and the player, as well as the animation function. The code then moves the player and the camera around the scene, translating as needed. If the player moves too far to the right, the panning code is activated to prevent the player from getting lost. The final code section updates the player's position and camera angle if they collide with a goal post.
03:25:00 In this tutorial, the author demonstrates how to create a vertical platformer game using JavaScript and HTML canvas. They explain how to prevent the camera from panning all the way to the left or right, how to pan the camera based on a condition, and how to check for horizontal camera collision. Finally, they show how to manage player movement if the camera collides with the right side of the screen.
03:30:00 In this tutorial, the author explains how to create a vertical platformer game using JavaScript and HTML canvas. They explain how to use a camera box and panning to move the camera around, and then explain how to use a variable to keep track of the game's background image height.
03:35:00 The video tutorial demonstrates how to create a vertical platformer game using JavaScript and HTML Canvas. The player character jumps up and down, and when the bottom of the camera box reaches the bottom of the viewable area, the game pans the camera up. The player can control the character's velocity, and if the player falls off the bottom of the screen, the game pans the camera down to the bottom of the game scene.
03:40:00 This tutorial shows how to set up a camera in a game, how to create movement for the player, and how to make the player attack.