JavaScript Game Development Step by Step

Explore HTML canvas basics, adding and manipulating elements on the canvas, and using JavaScript objects and core functions needed to build games.

Access and define an HTML canvas, get a 2d context with JavaScript, and render Hello world with fillText at 150, 250 using 30px Calibri.

Draw on the canvas using fillText and strokeText for text, moveTo and lineTo with stroke for lines, and fillRect with fillStyle to create colored rectangles.

Learn to manage canvas states with save and restore, creating checkpoints to revert properties like fillStyle and text styles without rewriting dozens of attributes in game drawing.

Explore JavaScript objects by defining a car object with properties such as speed, height, and seats, and access them using dot notation and console.log for debugging, essential for building games.

Learn to draw a canvas object by using its properties like x, y, width, height, and color; save and restore canvas state while rendering a square from a car object.

Explore the utility of JavaScript functions as reusable code blocks, learn to declare and call functions like myFun, pass parameters such as length and breadth, and return the area.

Explore how the setInterval() function drives a game loop by repeatedly drawing elements at fixed milliseconds, where lowering the interval increases fps.

Learn how to implement player inputs in JavaScript for canvas games, handling mouse down/up and keyboard events with onkeydown and keyCode to support snake and breakout gameplay.

Begin building a snake game through 16 videos, from setting up the project and repository files to finishing the game, with the snake eating food and scoring.

Begin a JavaScript game project by setting up the snake game logic, referencing components, and testing the build as you prepare to implement the main game objects.

Declare the snake body and food objects, with fixed width and height, using x and y for multiple parts; the snake grows as its head eats food.

Initialize the snake as a list of three body segments and place the food at random positions, then implement a function that runs on game start to reset all positions.

Discover how to draw a snake and its food on a canvas by rendering each snake bone with color, distinguishing the head, using draw_snake functions.

Add keyboard input to control the snake by mapping arrow keys (left, up, right, down) to directions and updating the direction variable via a keyboard event function.

Update the snake position by moving the head in current direction and letting the body follow positions. Start from the back and propagate coordinates forward to reflect the move.

Build a main game loop that clears and redraws the canvas every second, updates the snake's position, and moves it via user input, with speed controlled by the interval.

Implement boundary conditions by wrapping the snake head to the opposite edge when it crosses any canvas side (right, left, top, bottom), updating on every move with a dedicated function.

Introduce an eden flag to spawn food for the snake game, define its color and size, place it at a random position, and render it on the canvas when needed.

Detect collisions between the snake head and food; on hit, remove the food, grow the snake by adding a new head in the travel direction, and generate new food.

Define and test the de-escalation function that detects when the snake head collides with food using four conditions; upon collision, increase the snake length and generate a new random food.

Implement a game over condition where the snake head collides with its body, checking the snake list and stopping the interval.

Implement a game over condition by detecting collisions between the snake's head and body. End the game when a collision occurs, using absolute differences for accuracy.

Implement a scoring system that increases the score on each snake head collision and displays it in the top-right corner, with future updates adding a start prompt.

Implement the initial screen and start logic for a JavaScript snake game: use canvas mouse down to start, guard against multiple restarts with a running flag, and prevent opposite-direction crashes.

Add a timer to control the snake's speed, adjust game physics naming, and explore extending the game with level progression and ideas for a bigger future project.

Learn to build your own Burger King step by step in JavaScript game development, section 3, with 15 files and 215 videos detailing a six-row dial puzzle.

Create a new file and initialize a canvas for building your JavaScript game. Define the script, set initial properties, and verify it works.

Declare the ball and base as the main game objects, set canvas width and height as constants, and define the ball as a circle with x, y, radius, and color.

Draw a ball and a base on the canvas using arc, beginPath, and fill, set positions and radius, and initialize both objects for a basic game setup.

Add two attributes on the base object for left and right input, then update the base position based on those inputs and enforce 0–400 boundaries.

Implement on key down and on key up handlers for left and right arrows to move the base only while pressed, and plan an interval function in the next video.

Move the base in a JavaScript game by handling left and right input, updating the base position, and redrawing the scene in an update loop.

Learn to implement continuous ball movement in javascript game development by updating its x and y velocity, apply boundary checks to bounce off walls, and prepare for ball-base interactions.

Implement collision between the ball and the base, reversing the ball's velocity on contact, using the ball's radius for circle-based checks, and laying groundwork for a virtual function.

Learn to draw the enemy tiles in a JavaScript game by building a grid of dice tiles, managing row-wise x/y positions, setting colors, and implementing draw functions for collision-ready rendering.

Explore collision detection in a JavaScript game between the ball (circle) and rectangular tiles, remove collided tiles, and reverse the ball’s direction, as groundwork for later scoring and win conditions.

Add a scoring and lives system: initialize score at zero, increase it when the ball hits, display it bottom left, and end the game when lives drop below zero.

Implement a game over condition by checking lives, stopping the interval with a rate variable, and planning a restart and on-screen end message while leveraging the existing scoring mechanism.

Add a start screen and restart behavior, fix multiple intervals that speed up the game, and implement game over conditions with lives, so players experience a basic, progressively challenging game.

Increase game difficulty over time by increasing the ball speed after each hit, using velocity signs and hit counts to raise the challenge in a JavaScript breakout game.

Track mouse movement inside the canvas to make two eyes follow the cursor by updating eye positions. Draw eye walls and circles and handle mousemove events with fill and stroke.

Learn to build a JavaScript shooter game by implementing a shooter that fires bullets at enemies on a canvas, and drawing the shooter and projectiles with simple shapes.

learn to implement a shooter mechanic by using a timer to fire bullets from the shoulder, manage bullet speed, and update positions.

Add a pause screen to your JavaScript game, using the spacebar to toggle pause and control updates when paused, with examples in snake and breakout.

Learn to add sound to a JavaScript shooter game by creating a sound object and playing it on bullet fire. Explore simple preload handling and free hosting for your game.

Build a JavaScript game from scratch with falling cupcakes, a catcher, and a jump function powered by basic physics; set up by cloning repo and preparing image and sound assets.

Load all game resources by creating image objects for background, blood, catchers, tiles, and food, reference the canvas, and start the game when all images load.

Declare three game objects: tile, food (cupcake), and catcher, with tile width 50 and height 20, food speed, and catcher properties including position, jump, on air, speed, and gravity.

Declare and initialize global game variables such as score, level, and animation, then use onload to start the game by populating food and tile lists.

Define a universal draw object function to render tiles on the canvas. Iterate the tile list and pass each tile's image, x, y, width, and height to draw.

In this video, learn to draw the catcher and background, set up the main update loop to clear and redraw, and render tiles for a cupcake game.

Learn to add an animation to the catcher in your JavaScript game by toggling an animation state, rendering a blinking red catcher, and displaying captured objects.

In this lecture, learners implement catcher movement for a JavaScript game by handling arrow key down and key up events, updating speed, and constraining the catcher within canvas boundaries.

Implement a jump function for the catcher by updating the keydown handling and adjusting the y position using a jump unit to reach a defined height.

Add jumping animation to the cupcake catcher in the JavaScript game, drawing a different catcher image while jumping and updating the draw logic to reflect the jump.

Generate cupcakes at regular frame intervals by incrementing a food timer, randomly selecting an x-position from the food drop list, and adding cupcakes to the food list for later drawing.

Draws cupcakes from the food list at intervals, updates their vertical position with a speed attribute, and removes off-canvas items to save memory; prepares for future collisions.

Define three collision functions for food catcher, food tile, and catcher tile to manage collisions using x, y, width, and height, enabling game interactions.

Handle collisions between food and the catcher to increase the score and remove the cupcake with splice, then detect food–tile collisions to remove tiles and preview gravity later.

Implement gravity for the cupcake catcher by checking tile collisions, updating the catcher's safe status, and stopping at the canvas bottom while preparing to speed up game levels.

Build a dynamic scoring and level system that speeds up falling food as the score grows, while decreasing the level on even scores and displaying live score and level.

Initialize a false game over variable and set it true when the catcher falls. Create a game over function to draw a blood blur and show 'game over' with restart.

Implement a click to start or restart feature by handling canvas mouse down, clearing intervals when needed, and drawing a start prompt with a background while restarting the game.

Add sound to your cupcake catch game by defining a sound constructor, creating eat and drop sounds, and playing them on collision and game over to enhance gameplay.

Learn to add a pause screen to a browser canvas game by using the spacebar to toggle pause, draw a 'game paused' stroke text, and manage the canvas state.

Learn to publish your game on free GitHub pages by installing git, using Git Bash on Windows, creating a repository, editing the index with your game, and pushing changes online.