Video Tutorial | 'Angry Birds' Game With AI
In this video we cover how we can create our own version of angry birds game using AI
Video
In the below video, we go through the process of playing our version of the ‘Angry Birds‘ game developed using AI.
Premise
There are multiple versions of the Angry Birds game available now. However, in this tutorial, we try to use AI and replicate a basic level from the Angry Birds game, which contains
A Red Bird
Multiple Pigs
Wooden Structure
Sounds From The Original Game
Background
Projectile And Collision Functions
Dotted Line Marking Projectile
This game isn’t a result of a single prompt and is a sum of multiple components stiched together. These components were created by AI.
Details Of Creating The Bird, Pigs, Slingshot & Background
It is possible to provide images in various formats to tools like Grok, ChatGPT, and Perplexity, while asking them to understand the image, and then try to replicate it as an SVG. I tried the two prompts below
This prompt was purely AI understanding based - “Refer to Angry Birds Game and Create the Red Bird.“
Use this image (I uploaded an image) and create a replica of this image as a SVG. Make sure to add details, features and textures and try to have it as close to the image as possible.
The first prompt was not returning desired results however the second did. I used perplexity and chatGPT to get them to create the SVG. If you remember the flappy bird game, I used ChatGPT there as well. It seems to understand the creation of images better amongst the three.
I also tried getting the SVG directly online. One of the files returned the exact SVG but it was way too complicated to be processed using AI to create the game around it.
The same process was followed to get the slignshot as well as the pigs. I created the wooden structure using Ai directly without giving it any reference.
Building the Game
This interactive SVG-based game, inspired by Angry Birds, is a web application built using HTML, SVG, CSS, and JavaScript to create a dynamic and engaging experience. The game features a slingshot mechanism to launch a projectile (a bird) at structures and pigs, with physics-based mechanics, audio effects, and a user interface for audio control. Below is a 500-word summary of its development.
The HTML structure forms the backbone, including audio elements for background music, launch, hit, and rubber band stretch sounds, and a settings panel with sliders for volume control. The core visual component is an SVG canvas with a viewBox of 0 0 800 400, ensuring responsiveness across devices. The SVG contains definitions (<defs>) for reusable elements like gradients, patterns, and icons, alongside game objects such as the sky, hills, trees, structures, pigs, projectile, slingshot, power meter, and UI buttons (play and settings).
CSS ensures the game is visually appealing and responsive. The SVG fills the viewport, with a light blue background and styles for interactive elements like the rubber band and buttons. The settings panel is styled as a floating, shadowed div with sliders, toggled via the settings button. Cursor styles enhance interactivity, and absolute positioning keeps the panel unobtrusive.
The SVG content is meticulously designed. A linear gradient creates a vibrant sky, while layered paths form hills. Trees are composed of rectangles (trunks) and ellipses (foliage). Six structures, each a U-shaped arrangement of rectangles, and six pigs, detailed with ellipses and paths, serve as targets. The projectile, a stylized bird, uses complex SVG shapes for visual fidelity. The slingshot includes a static frame and a dynamic rubber band path. A power meter and trajectory dots provide visual feedback during aiming.
JavaScript drives the game’s interactivity and physics. It handles mouse events for dragging the projectile, updating the rubber band’s quadratic Bezier curve and the power meter’s width based on pull distance. Trajectory dots predict the projectile’s parabolic path, calculated using initial velocity and gravity (g=200). On release, the projectile follows a physics-based trajectory, with velocity components (vx, vy) derived from the pull angle and power. Collisions with structures and pigs use AABB (axis-aligned bounding box) detection, triggering destruction animations with SVG transforms and opacity changes. A “poof” effect enhances visual feedback. Gravity simulation ensures unsupported structures and pigs fall, with destruction on ground impact. Audio is managed via event listeners, with volume sliders updating in real-time.
The game initializes a gravity simulation on load, checking support dependencies for structures and pigs. Animation loops use requestAnimationFrame for smooth updates. The projectile resets after halting or going out of bounds, ensuring replayability. Audio toggling and volume control add immersion, with error handling for playback issues.
This game combines SVG’s vector graphics for scalability, CSS for styling, and JavaScript for physics and interactivity, creating a cohesive and engaging experience. The modular structure allows for potential expansions, such as additional levels or features, while maintaining browser compatibility.
Promts To Create The Game
Below are the exact prompts to create the Angry Birds-inspired game, divided into HTML, CSS, and JavaScript sections for a structured build process.
HTML Prompts
Create the Base HTML Structure:
Create an HTML file for an SVG-based game inspired by Angry Birds. Include four audio elements for background music, launch sound, hit sound, and rubber band stretch sound (use placeholder MP3 filenames: 'angry_birds_background-music.mp3', 'angry_bird_launch.mp3', 'angry_bird_hit.mp3', 'rubber-band-stretch.mp3'). Add a settings panel div with sliders (range inputs, min=0, max=1, step=0.01) for controlling each audio’s volume, initially hidden. Include a full-screen SVG element with a viewBox of '0 0 800 400' and preserveAspectRatio='xMidYMid slice'. Add a meta viewport tag for responsiveness.
Define SVG Elements:
In the SVG, add a <defs> section with: a linear gradient ('skyGradient') transitioning vertically from #a9d6e5 to #dbe9b7, #fff, and #fdf3b4; a pattern ('leafPattern') with a green leaf path; a gray semi-transparent circle ('poof') for destruction effects; and icons for play (triangle), pause (two bars), and settings (gear). Draw a sky rectangle, three layered hill paths (colors #a3b98a, #8aa763, #5a7a3c), a ground rectangle at y=340 (fill #4a6a2c), five green trees (rectangular trunks, elliptical foliage), six U-shaped structures (three rectangles each, IDs 'structure1' to 'structure6'), six pigs (ellipses/paths, IDs 'pig1' to 'pig6', varying scales/positions), a bird projectile (complex SVG shapes, ID 'projectile', at x=155, y=300, scale=0.1), a slingshot (frame path and rubber band path with ID 'rubberBand'), a power meter rectangle (ID 'powerMeter'), play and settings buttons (rectangles with icon refs, IDs 'playButton', 'settingsButton'), and a group for trajectory dots (ID 'trajectoryDots').
CSS Prompts
Style the Page and SVG:Style the HTML to set html and body to 100vw and 100vh, with no margins/padding and a background of #a9d6e5. Ensure the SVG fills the viewport (display: block; width: 100vw; height: 100vh). Apply cursor: pointer to elements with IDs 'rubberBand', 'projectile', 'playButton', and 'settingsButton'. Style the settings panel (ID 'settingsPanel') as a white, bordered, shadowed div (position: absolute, top: 75px, left: 81px, padding: 10px, initially display: none, Arial font). Style its labels and range inputs (block display, 150px wide sliders). Ensure responsiveness with preserveAspectRatio and viewport meta tag.
JavaScript Prompts
Initialize Game State and Audio:
In JavaScript, select SVG, rubberBand, projectile, powerMeter, trajectoryDots, audio elements (IDs: 'backgroundMusic', 'launchSound', 'hitSound', 'rubberBandStretch'), playButton, playButtonIcon, settingsButton, and settingsPanel. Initialize variables: isDragging=false, initialBirdPos={x:155, y:300}, startPoint, rubberBandControlPoint, birdControlPoint, center={x:170, y:320}, rubberBandRadius=120, birdRadius=50, isAnimating=false, startTime, vx, vy, g=200, e=0.5, groundY=340, velocityThreshold=1, isAudioEnabled=false. Define arrays for structures (IDs 'structure1' to 'structure6', with x, y, width=30, height=30, hit, destroyed, supportedBy, isFalling, fallStart, fallY) and pigs (IDs 'pig1' to 'pig6', with x, y, scale, height, fallY, isFalling, destroyed, supportedBy). Set initial audio volumes (background=0.5, others=1.0) and pause all audio.
Implement Audio and UI Interactions:
Add event listeners: toggle isAudioEnabled on playButton click, switching playButtonIcon between '#playIcon' and '#pauseIcon', playing/pausing backgroundMusic. Toggle settingsPanel display on settingsButton click. Update audio volumes on input for bgVolume, launchVolume, hitVolume, and stretchVolume. Calculate projectile’s bounding box center (scale=0.1) and initialize control points (rubberBandControlPoint, birdControlPoint, startPoint) at initialBirdPos adjusted by scaled offsets.
Create Trajectory Dots:
Create 7 trajectory dots (SVG circles, r=3, fill='#d32b2b', opacity=1, initially hidden) in trajectoryDots group. Update dots during dragging to follow a parabolic path based on pull distance (max 50), angle, and baseSpeed=370, with spacing from 10 to 30, radius from 1 to 3, and opacity from 0.3 to 1. Hide dots when not dragging.
Handle Slingshot Mechanics:
On mousedown for rubberBand or projectile, if not animating, set isDragging=true, record startPoint from SVG coordinates, and play rubberBandStretch if isAudioEnabled. On mousemove, if dragging, constrain rubberBandControlPoint (radius=120) and birdControlPoint (radius=50) around center, update rubberBand’s Bezier path, projectile’s transform, and powerMeter’s width (max 60). On mouseup, if dragging, set isAnimating=true, calculate vx, vy from pull distance (max power=1, baseSpeed=370), play launchSound, pause rubberBandStretch, reset rubberBandControlPoint, and start animation. On mouseleave, if dragging, reset control points and pause rubberBandStretch.
Implement Physics and Animations:
Animate projectile using requestAnimationFrame, updating position with parabolic motion (vx, vy, g=200). Detect AABB collisions with structures and pigs, applying restitution (e=0.5), playing hitSound, and triggering destruction animations (translate/scale, opacity fade, poof effect). Simulate gravity for unsupported structures/pigs (fallY=340), destroying pigs on ground impact. Reset projectile to (155, 300) when halted (speed<1, y≥groundY-10) or out of bounds (x<0, x>800, y>groundY) and no objects are falling. Initialize gravity simulation on load to check support dependencies.
Code:
You can download the game using the link below and build on it, and make it better.
Link: https://drive.google.com/drive/folders/1bzthP1trZkBa8TNKhrE5DCcwnK3mtdcz?usp=sharing
Do drop a like and subscribe to my YouTube channel if the videos and posts help.