Build Animated Physics Game with JavaScript

Build an HTML5 canvas game with physics using HTML, CSS, and vanilla JavaScript; control interactive objects, restart with a button, use mouse controls, and trigger particle effects.

Build a modular JavaScript game using object oriented programming with a game class and a player class, linked via references, and an animation loop to draw and update movement.

Draw the player with a draw method using canvas context and arc to render a circle, filled and stroked. Position uses collision x and collision y with collision radius.

Move the player with the mouse by wiring canvas events. Capture coordinates with e.offsetX and e.offsetY, store them in game.mouse, and preserve this with an arrow function.

Implement a continuous animation loop and render the player moving toward the current mouse position at constant speed using distance ratios and the hypotenuse. Draw a line to show direction.

Link an obstacle class to game object to manage five obstacles with randomized collision X and Y within game width and height, a 60px hitbox, and a draw method.

Implement a circle packing approach to place non overlapping obstacles by randomly positioning circles and validating each against existing ones with center distance and radii checks.

Attach images to circular collision hit boxes and position them for a 3d illusion on canvas, crop sprite frames from a sheet and render with draw image to place obstacles.

Define obstacle placement rules to prevent overlaps, enforce a 100–150 pixel distance buffer, keep sprites fully visible within the game area, and randomly crop frames from the obstacle sprite sheet.

Develop a reusable collision detection method for circular objects, using collision x, collision y, and collision radius to determine collisions between the player and obstacles in the update loop.

Learn to implement collision resolution in a JavaScript game by returning collision details and pushing the player one pixel away from obstacles to create solid, sliding physics.

Animate a directional player using a 255 by 255 sprite sheet, crop individual frames with drawImage, and align the sprite to the collision circle, matching the ground shadow.

Animate the player by calculating the angle between the mouse and the player, then swap sprite sheet frames using frame x and frame y to face eight directions.

Toggle debug mode with the d key to show or hide collision areas, the player’s collision circle, and the line to the mouse, speeding physics and pathfinding testing.

Define horizontal and vertical boundaries to keep the player's collision circle inside the canvas, using the collision radius and a 260-pixel top margin to block edge movement.

Synchronize game animation with screen refresh using delta time and requestAnimationFrame, calculate delta times, and regulate frames per second for consistent gameplay.

Implement an egg class with physics-driven hatching, where the blue ball protects hatchlings from enemies by pushing eggs and larva toward safety in the mushroom forest.

Learn how to periodically spawn eggs in a JavaScript physics game using delta time and an interval timer, with randomized positions and collision margins, plus basic physics.

Explore egg physics by building a collision object array, using the spread operator to include the player and obstacles, perform collision checks, and push colliding eggs away with calculated vectors.

Sort all game objects by vertical position to create depth on a single canvas, then render by calling update and draw for eggs, obstacles, and the player.

Create an enemy class that accepts the game reference, draws its sprite with a collision circle, moves left with random speed, and reuses enemies by resetting off-screen.

Eggs hatch into larvae that move toward mushroom forest safety, protected by the player. Constructor uses game and x,y with collision x and collision y, 30-pixel radius, and 150x150 sprite.

Implement egg hatching logic by counting delta time in milliseconds to hatch after a hatch interval, replacing eggs with larvae and displaying a timer above each egg.

Explore larva sprites and collisions by randomizing animation frames from a sprite sheet, computing source coordinates, and handling hatchling and enemy collisions plus lava interactions to score in the forest.

Draws game status text with canvas fillText, left-aligning score at (25,50) while the timer stays centered, using save and restore for scoped settings. Enables debug mode to show lost hatchlings.

Trigger fireflies or sparks when the larva hides or is eaten, from a shared parent particle class. Use a particles array with object pooling for performance.

learn to simulate particle motion with fireflies and sparks in a JavaScript game, using sine and cosine for circular paths and a shared particle class with distinct update methods.

Learn to implement randomised enemy skins in a JavaScript animated physics game by cropping frames from a sprite sheet, drawing static images on a canvas, and randomizing frames on reset.

Display a win or lose overlay when score meets the winning threshold, drawing a semi-transparent background and centered messages, then restart with R while stopping new enemies.

Implement restart game by adding a player restart method that resets position, collision areas, and arrays (obstacles, enemies, hatchlings, particles) and regenerates game objects on pressing r.

Extend the enemy class with two child skins, toad and bark, to share properties while randomizing spawns, customizing frames, and images for sprite animation.

Toggle full screen with the F key using the native API to display the page, preserving correct canvas coordinates. Explore sprite-sheet animation performance and version five source code access.

Animate the player by cycling frame X across 58 frames per row on a sprite sheet, cropping with source and destination coordinates on the canvas, and updating to face directions.

Animate larva sprites by cycling frames from 0 to 38 to form a seamless loop, using the sprite sheet code and max frame 38 for crawling hatchlings.

Build an animated browser game with directional keyboard controlled characters and random obstacles using HTML, CSS, and vanilla JavaScript on a canvas, drawing objects in vertical order.

Set up the project in index.html with a canvas (id canvas one) and an overlay image. Optimize by using plain CSS for large backgrounds and GPU-backed CSS transforms with canvas.

Enhance your game world with layered background art and interactive CSS effects, centering the wrapper and aligning overlays while hover-driven leaves use keyframes and transforms with pointer-events.

Explore javascript setup for a canvas-based animated game, including image preloading with load events, object oriented programming with classes like input handler, owlbear, and game, and a modular blueprint-driven architecture.

Track keyboard input with an input handler that updates the main game object's last key on keydown and keyup, using pressed or released prefixes (P/R) for arrow keys.

Connect the owlbear to the main game, render and update it on a canvas with four-direction keyboard controls, speed limits, and boundary checks for a future animated sprite sheet.

Animate a sprite sheet on canvas by cropping frames with drawImage, cycling frame x/y for four-direction walking and idle states, with keyboard controls and depth movement.

Track delta time from requestAnimationFrame to regulate sprite sheet animation speed. Set a frame interval from FPS and apply a frame timer for global or per-player animation control.

Create a game world by implementing an object class and three subclasses bush, plant, and grass using inheritance, shared draw logic, and randomized placement on a canvas.

Sort game objects by their bottom boundary to achieve correct draw order in a 2d canvas game, using a shared array and a compare function for dynamic layering.