HTML5 Canvas create 5 Games 5 Projects Learn JavaScript

Build a two-player HTML5 canvas game with JavaScript, drawing lines, shapes, and circles, using keyboard controls and scoring. Master movement, shooting, and simple bullet avoidance with included source code.

Learn to set up an HTML5 canvas game by building an index.html, linking a game.js, and drawing solid and outlined rectangles on a 2d canvas using JavaScript.

Learn how to draw paths on the canvas by creating a path, moving to coordinates, and applying stroke and fill to render a red triangle with blue point markers.

Learn to draw circles and arcs on canvas to create a happy-face scene. Use beginPath, arc, moveTo, fill, and stroke to position eyes and a mouth on a yellow background.

animate a red dot moving across a canvas with a blue center dot using a draw function and requestAnimationFrame, and reverse the dot's direction by clicking the canvas.

Track arrow key presses with a document keydown/keyup listener, update a keys object, and move the player on the canvas by adjusting x and y based on arrow directions.

Add a second player to your html5 canvas game by creating a second player object, enabling red and blue characters to move with arrow keys and w a s d.

Set up player movement boundaries on the canvas to keep each player on their side, draw a center line, and prevent crossing while handling left, right, up, and down controls.

Add shooting by creating a bullets array, launching bullets with the space key, and drawing, moving, and removing them in the game loop with per-player cooldowns.

Implement collision detection in an HTML5 canvas JavaScript game by testing rectangle and arc intersections between two players and bullets, tracking x, y, and size to resolve hits.

Implement and display scores in your HTML5 canvas game by initializing zero scores, updating the correct player's score on hits, and rendering centered top-screen text with a 48px font.

Restart the game by resetting scores, cooldowns, and player positions with a start game function triggered on canvas clicks; reset X/Y for players, restart animation frame, and adjust collision detection.

Explore dynamic tweaks to an html5 canvas game, resizing elements and speeds based on grid size, updating scores, and adding reset on click to keep gameplay proportional.

Add an opponent brain using a mind object with a thinking toggle and a toggle button. Enable movement toward the red player with randomized, bounded movement.

Refine opponent movement logic in an HTML5 canvas game. Implement natural left-right and up-down motion with boundary checks and random direction changes, add speed variation, occasional stops, and enable shooting.

Activate opponent attack mode in the HTML5 canvas game by enabling AI shooting, adding cooldowns, increasing bullet speed, and implementing bullet avoidance for a more dynamic battleground.

Learn to fine-tune an HTML5 canvas game through playthroughs and dynamic adjustments. Tweak shooting cooldowns, implement randomization, enable bullet avoidance, and fix boundaries for a natural, harder or easier experience.

Explore how to build a browser game with an HTML5 canvas and JavaScript, covering canvas setup, player and bullet management, input handling, collision detection, and a continuous draw loop.

Develop a two-player autonomous battle on HTML5 canvas by adding two toggle buttons, duplicating minds for each player, and refining movement, bullet direction, and debugging for a playable game.

Build a basic pong game using HTML5 canvas and JavaScript, learning to animate, draw on canvas, handle keyboard input, implement collision detection and scoring, and refine game logic from scratch.

Create an HTML5 Pong game board by building an HTML page, linking a stylesheet, and initializing a 600x480 canvas with a 2D context to render a white rectangle.

Explore drawing on canvas with a draw function, creating rectangles, text, triangles, and circles using dynamic x,y positions and fill or stroke styles.

Track arrow key presses with a keys object and listen for keydown and keyup events to move a canvas rectangle by updating x and y, clearing the canvas before redraw.

Add a second paddle to the pong game as a separate player with its own key controls and dynamic size, tracking keyboard events for both players using blue and red.

Learn how to use requestAnimationFrame to create smooth, canvas-based animations in a Pong game, by structuring a draw loop, handling player movement, and updating frames.

Add collision detection for Pong HTML5 game by comparing two paddles' x, y, width, and height with a collision function, returning true on overlap and logging hits.

Create a bouncing ball in HTML5 canvas by defining a ball object with x, y, width, height, and speed, then move it and detect collisions with paddles and walls.

learn to implement final tweaks in a html5 canvas pong game: scoring, ball reset, paddle boundary checks, on-screen score display, and a reset button to center paddles and restart game.

Review of building a pong game using HTML5 canvas and JavaScript, covering canvas setup, ball and paddle movement, key handling, collision detection, and rendering.

Learn to build a bubble popping game on HTML5 canvas using JavaScript, drawing bubbles with arcs, handling mouse clicks, collision detection, and animation with requestAnimationFrame to score points.

Set up html canvas for a bubble popping game by defining the html5 doctype, creating bubble.js, configuring 646 by 486 canvas, and drawing a red circle with a blue stroke.

Learn to create bubbles on canvas by using radial gradient with two circles, color stops, and gradient fills, then fine-tune stroke and colors for a bubble look.

Generate random bubbles on an HTML5 canvas by looping a bubble count with random x, y, and sizes between 15 and 25, using a gradient-filled arc for each bubble.

Create a bubble animation by building a bubble array, generating bubbles with a bubble maker, and using requestAnimationFrame to draw and move them upward while clearing the canvas each frame.

Spawn bubbles from the bottom, remove them when they reach the top, and add dynamic speed, horizontal jitter, and random colors for a lively canvas.

Add a click event listener to the canvas and track mouse coordinates using the bounding rectangle to compute canvas-relative positions. Visualize clicks as shrinking circles that pop bubbles.

Learn to implement bubble collision detection on mouse click in an HTML5 canvas game by comparing bubble x/y positions with the click using the bubble size to detect overlaps.

Learn to implement multi-area collision detection in an HTML5 canvas game by looping through bubbles and click areas, removing hits in real time.

We add a score value in the game object and render it in a top score area, updating with each popped bubble using the bubble size.

Perform a final code review of the html5 canvas bubble popper game, adjusting bubble movement, hit circle size, random speed, and scoring for accurate collisions on the canvas.

Learn to build a catcher game from scratch using the HTML5 canvas and JavaScript, with animation, keyboard paddle control, falling bubbles, hazards, scoring, and collision detection.

Set up a blank HTML5 page and build a canvas-based game with JavaScript. Create the HTML structure, link a game1.js script, and develop the game content and interactions.

Create a canvas, get a 2d context, and draw a paddle with a dynamic tile system using a player object and a draw function.

Add keyboard event listeners for keydown and keyup to track arrow left, right, up, and down. Use requestAnimationFrame to draw the canvas and move the paddle within bounds.

Set a dynamic enemy total to drop items, spawn enemies at random x positions, store them in an enemies object and array, and render them on the canvas.

Update enemy objects with random speeds and positions, loop through the array to move them down the canvas, and regenerate off-screen with unique colors and circular shapes.

Explore HTML5 canvas and JavaScript to generate random hex colors with Math.random for colorful bubbles, add hazards with a boolean toggle, and slow pulsing red enemies for gameplay variety.

Explore collision detection in HTML5 canvas by implementing rectangle-based checks between the player paddle and falling enemies, using rectangles and arcs, updating positions, and returning a hit boolean.

Apply collision actions in an HTML5 canvas game by detecting collisions, removing collided enemies from the array with splice, and updating gameplay and scoring as you proceed.

Add scoring and lives to the player object and render a top bar showing score and remaining lives. Update the score after collisions and subtract a life for bad items.

Build a canvas game using a game object and requestAnimationFrame to start and stop play, implement game over when lives drop, and show a start screen with click to begin.

Learn to start and restart a canvas game with a clickable button or canvas click, reset scores and lives, and use collision detection with mouse coordinates.

Review the HTML5 canvas catcher game code, adjust enemies, speed, and lives to tune difficulty, manage collision scoring, and clean console messages.

Build a brick breaker game from scratch using JavaScript and HTML5 canvas across five canvases, implementing drawing, animation frames, collision detection, and keyboard and mouse controls.

Learn to create a breakout game scaffold by building a blank html file, linking breakout.js, creating an html5 canvas with a 2d context, and sizing from a grid-based game object.

Draw the player paddle on the HTML5 canvas using a draw function for Breakout, and define a dynamic player object with x, y, width, height, and grid-based positioning for movement.

Learn to track player movement in HTML5 canvas by listening for keydown and keyup, updating a keys object with key codes, and preparing for movement-based animation.

Move the paddle with arrow keys by updating the player's x position using a speed value, then use requestAnimationFrame to redraw and clear the canvas, and next explore mouse movement.

Add mouse movement controls by listening for mousemove on the document, mapping event.clientX with canvas.offsetLeft to position the paddle, accounting for paddle width and canvas bounds.

Add a bouncing ball to the canvas by creating a ball object with x, y, width, height, and direction dx, dy; update movement, draw the ball, and implement edge-bounce logic.

Learn to implement canvas collision detection between a paddle and ball, set the canvas background to black, and adjust ball speed and x-velocity based on hit position on the paddle.

Create a bricks array and start the game to build a 30-brick board. Draw bricks as rectangles positioned by dynamic x and y using grid values.

Update bricks in a breakout game by generating random hex colors with Math.random, apply a white stroke on a dark background, and remove bricks on collision while reversing the ball.

Update the bottom score and player lives, track game completion, and restart with the up arrow; bricks have random values that increase the score when removed.

Add a canvas click to start the game, implement game over when lives reach zero, reset the ball position, and pause the animation frame on game over.

Debug and fix an HTML5 canvas game by syncing keyboard and mouse controls, adjusting dynamic grid size and canvas dimensions, and refining paddle, bricks, and font sizing for responsive play.

Add bonus items to a breakout game by dropping bonus objects from broken bricks, moving them toward the paddle, awarding points on capture, and triggering win or game over.

Track and update ball dy speed in a canvas game to prevent stalling, speed up on brick hits, and keep dy away from zero when restarting clears bonus prizes.

Review the final breakout game built with HTML5 canvas and JavaScript, detailing the main game object, paddle, ball, bricks, bonuses, and dynamic collision detection for responsive play.

Set up a 640 by 480 canvas with a black background in JavaScript. Add input and a download button to draw centered text and export canvas as a data URL.

Create a matrix-style falling letters animation using canvas and JavaScript, building a 2D context, drawing green characters, and fading trails with a timed loop.

Learn to build a bouncing ball animation with HTML5 canvas and JavaScript by creating a canvas, drawing a circle with arc, and updating speed for wall bounces.

Learn to upload images to an HTML5 canvas using a file input, file reader, and drawImage. The lesson covers selecting the file, rendering it on the canvas, and resizing.

Learn to build a mini drawing app on HTML5 canvas with JavaScript, enabling pen color and width controls, drawing with mouse, and saving or downloading sketches as images.

Learn to upload an image into an HTML5 canvas from a file input, create an image object, and draw it with drawImage while resizing to the canvas width and height.

Learn to create, merge, and update arrays using join, push, apply, and splice. Understand delete versus splice, clearing contents, and how length and memory behave with nested arrays.

Construct a person object with a JavaScript constructor, join first and last names into a full name using this and the new keyword, then access properties and log results.

Learn how to clean up excess whitespace in strings using regular expressions and the JavaScript trim methods, including trim left and trim right; explore a string prototype cleaner implementation.

Master generating random numbers with min and max in JavaScript, populating and shuffling arrays, selecting random items by index, and creating incrementing arrays for html5 canvas game projects.

Explore immediately invoked function expressions in JavaScript, using both function keyword and arrow syntax, pass arguments, set defaults, and see results in the console.

Explore how JavaScript's == and === handle type conversion, comparing numbers, strings, arrays, and false values. Learn which values coerce to false or equal, and when to use strict equality.