Game Mechanics

Object instantiation is the process of creating a concrete instance of a class or object template in memory during program execution. When an object is instantiated, memory is allocated and its properties are initialized with defined values. Each instance maintains its own independent state and behavior while following the structure defined by its constructor or prototype.

Example: Shooting a Bullet

When the player shoots, a new bullet is created at a spawn point (the tip of the gun). The bullet’s x and y values are set to this spawn position.

• Create a new bullet object and push it into an array.
• Update its position every frame using its speed.
• Draw it on the canvas.
• If it moves out of bounds (beyond canvas width/height), remove it from the array.

Deleting off-bound bullets prevents unnecessary memory usage and keeps the game loop efficient.

Parallax scrolling is a visual technique used in 2D games and web design where multiple background layers move at different speeds to create an illusion of depth. Objects that are farther away (like mountains) move slower, while closer objects (like trees or foreground elements) move faster. This speed difference simulates perspective and makes a flat scene feel more dynamic and immersive.

Method to Implement Parallax Scrolling

• Create multiple background layers (e.g.buildings, sky, mountains, trees).
• Assign each layer a different movement speed (far layers = slower, near layers = faster).
• Update each layer’s position inside the game loop or scroll event.
• Reset the layer position when it moves off-screen to create a continuous scrolling effect.
• Render layers in order from farthest to nearest to maintain depth illusion.

The key concept is multiplying the main camera or scroll movement by a speed factor (between 0 and 1) for distant layers. For example, if the player moves 10 pixels, a far background layer might move only 3 pixels, while a closer layer might move 8 pixels.

This system implements a basic 3D wireframe engine using JavaScript and the HTML5 Canvas API, without relying on WebGL. Each shape is defined by a vertex array (3D coordinates) and an edge index array that determines how vertices are connected to form a wireframe structure.

Rendering Pipeline

1. Rotation: Vertices are rotated using trigonometric rotation formulas (XZ & XY plane rotation in this case) to create continuous animation.
2. Translation: The object is translated along the Z-axis so it remains in front of the virtual camera.
3. Perspective Projection: A focal length formula is applied to simulate depth:

                       x' = (f * x) / z
                       y' = (f * y) / z
                           

   This makes distant points appear smaller, producing a realistic 3D effect.
4. Screen Mapping: Projected coordinates (range -1 to 1) are converted into canvas pixel coordinates.

Animation Loop

At a fixed FPS, the canvas is cleared, vertices are transformed and projected, and lines are drawn between connected vertex pairs. A button dynamically switches between different predefined geometries by updating the active vertex and edge arrays.

Overall, this demonstrates the fundamental concepts of a 3D graphics pipeline: geometric modeling, transformation, perspective projection, and rasterization — all implemented manually.

Procedural Animation: Procedural animation is a technique in computer graphics and game development where the motion, behavior, and interactions of objects are generated dynamically using algorithms instead of being pre-recorded or hand-drawn. Unlike traditional animation, where every frame is created manually, procedural animation allows objects to respond to changing conditions, user input, physics, or other objects in real-time. This makes the movement more flexible, adaptive, and realistic. It is widely used for simulating natural phenomena, particle systems, character motion, and interactive effects in games and simulations.

Equation to move an object toward an angle θ:
newX = x + Math.cos(angle) * speed
newY = y + Math.sin(angle) * speed
Where: x and y are the current coordinates of the object, angle is the direction toward the target, and speed is how fast the object moves.

Example: Moving an object toward the pointer:
dx = pointerX - objectX
dy = pointerY - objectY
angle = Math.atan2(dy, dx)
objectX += Math.cos(angle) * speed
objectY += Math.sin(angle) * speed
This makes the object follow the pointer smoothly, adjusting its path dynamically as the pointer moves.

👈Touch the canvs to make the object move towards the point

Ragdoll simulation is a technique used in physics-based animation to create realistic character movement. Usually, games implement ragdolls using a skeletal system made of bones connected by joints and controlled by a physics engine. These bones are constrained so that the character behaves like a flexible body when external forces are applied.

If proper physics constraints are not applied to a ragdoll, the movement can look unstable and floppy, similar to a drunk person

Implementation

In this implementation, the ragdoll is represented using simple particles called joints instead of a full bone system. Each joint stores its current and previous position and represents parts of the body such as the head, neck, hands, torso, and legs. Lines are drawn between these joints to visually represent the connections between body parts.

The motion of the joints is calculated using Verlet Integration. The new position is computed from the current and previous positions while applying gravity. Distance constraints are repeatedly solved between connected joints to maintain fixed lengths, which act like bones and keep the ragdoll structure intact.

Ground constraints prevent joints from passing through the floor and apply damping to reduce bouncing. The head joint can also be dragged with the mouse, allowing the user to interact with the ragdoll and observe how the connected joints react to the movement.

👈Touch the canvas to move the ragdoll

Particle effects are a technique used in computer graphics to simulate complex natural phenomena by using a large number of small visual elements called particles. Instead of rendering a single detailed object, many small particles are generated and animated to collectively create the illusion of effects such as fire, smoke, rain, explosions, and fireworks.

Each particle usually has properties such as position, velocity, color, and lifetime. These properties change over time to create motion and visual variation. By updating and drawing many particles every frame, complex dynamic effects can be produced with relatively simple rules.

Fireworks as a Particle Effect

Fireworks are a common example of particle effects. A firework typically begins as a single projectile that travels upward. Once it reaches a certain height, it explodes and generates many particles that spread outward in different directions.

Each particle represents a small glowing fragment of the explosion. The particles move away from the center, gradually slow down, fade in brightness, and eventually disappear after their lifetime ends. Different colors can also be assigned to particles to create visually appealing bursts of light.

By combining motion, color variation, and particle lifetimes, a realistic firework explosion can be simulated. This approach allows complex visual effects to be created using many simple particles working together.

👈Touch the canvas for fireworks