Have you ever found yourself captivated by the simple yet addictive charm of a Bubble Shooter game? You’re not alone! Bubble Shooter 2 has enthralled countless players with its engaging gameplay and vibrant visuals. But what if you could peek behind the curtain and see how it all works? Better yet, what if you could download the source code for free and make your version? Let’s dive into the fascinating world of Bubble Shooter 2 source code and see how you can get started.
Understanding Bubble Shooter 2
Gameplay Mechanics
At its core, Bubble Shooter 2 is all about shooting colored bubbles to form groups of three or more. These groups then pop, earning you points and clearing the screen. The goal is to clear all bubbles with a limited number of shots, requiring both strategy and quick reflexes.
Key Features
- Multiple Levels: Each has increasing difficulty in keeping players hooked.
- Power-Ups: Special bubbles that explode, change color, or multiply points.
- Smooth Controls: Easy-to-use aiming and shooting mechanics.
- Vibrant Graphics: Eye-catching colors and animations.
User Interface and Design
The game’s interface is designed to be intuitive. Menus are straightforward, with large buttons and clear labels. The design is both functional and aesthetically pleasing, enhancing the overall gaming experience.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div align='center'>
<link rel="stylesheet" type="text/css"
href="https://rawgit.com/nicholas-maltbie/BubbleShooterJS/master/bubblestyle.css">
</link>
<canvas id="game-canvas" style='maring:0 auto; background: #eee' width="480" height="320"></canvas>
<script type='application/javascript'
src="https://rawgit.com/nicholas-maltbie/BubbleShooterJS/master/grid.js">
</script>
<script type='application/javascript'
src="https://rawgit.com/nicholas-maltbie/BubbleShooterJS/master/ball.js">
</script>
<script type='application/javascript'
src="https://rawgit.com/nicholas-maltbie/BubbleShooterJS/master/shooter.js">
</script>
<script type='application/javascript'
src="https://rawgit.com/nicholas-maltbie/BubbleShooterJS/master/manager.js">
</script>
</script>
</div>
</body>
<script src="javascript.js"></script>
</html>
JavaScript
//Game canvas and context
var canvas = document.getElementById("game-canvas");
var ctx = canvas.getContext("2d");
var rectangle = canvas.getBoundingClientRect();
var mouse = {};
var game_grid = null;
var game_width = canvas.width;
var game_height = canvas.height;
var fixed = false;
/*
window.addEventListener('resize', function (e) {
game_width = canvas.width
game_height = canvas.height
})
*/
var defaultZ = canvas.style.zIndex
var initial_colors = ['red', 'blue', '#eddd2d', '#54e202']
var add_colors = ['#00d8ff', 'magenta', '#c46907']
var game_colors = initial_colors.slice(0)
mouse.x = 0;
mouse.y = 0;
mouse.down = 0;
mouse.prev_down = 0;
mouse.held = 0;
//setup mouse listener
document.addEventListener('mousemove', mouse_move, false)
canvas.addEventListener('mousedown', function(evt) {mouse.down = 1}, false)
canvas.addEventListener('mouseup', function(evt) {mouse.down = 0; click_buttons(evt)}, false)
document.addEventListener('touchmove', touch_move, false)
canvas.addEventListener('touchstart', function(evt) {mouse.down = 1; touch_move(evt)}, false)
canvas.addEventListener('touchend', function(evt) {mouse.down = 0; click_buttons(evt)}, false)
//setup rescale listener
window.onresize = function(evt) {rescale()};
var delay = 10 //delay between frames, 10 ms
//Get start time
var prev_time = new Date().getTime()
//List of all things to draw on the screen.
var game_objects = {}
var object_layers = {}
var buttons = {}
var layers = []
var added = 0
var sf = 1
//Max elapsed time per frame
var max_elapsed = 25
//call setup function
setup()
function get_color()
{
return game_colors[Math.floor(Math.random() * game_colors.length)];
}
function touch_move(e)
{
var touch = e.touches[0];
rectangle = canvas.getBoundingClientRect();
var x = touch.clientX - rectangle.left;
var y = touch.clientY - rectangle.top;
mouse.x = x / sf;
mouse.y = y / sf;
}
//function to track mouse movement
function mouse_move(e)
{
rectangle = canvas.getBoundingClientRect();
var x = e.clientX - rectangle.left;
var y = e.clientY - rectangle.top;
mouse.x = x / sf;
mouse.y = y / sf;
}
function click_buttons(evt) {
if(mouse.down == 0 && mouse.prev_down == 1) {
button_ids = Object.keys(buttons);
for(var index = 0; index < button_ids.length; index++) {
button = buttons[button_ids[index]]
if (button.intersect(mouse.x, mouse.y)) {
button.fn()
}
}
}
}
//Adds a button to the screen
function add_button(button, layer=0)
{
id = add_object(button, layer)
buttons[id] = button
return id
}
//Removes a button from the screen
function remove_button(id)
{
console.log(id)
if(id in buttons) {
remove_object[id]
delete buttons[id]
}
}
//Adds an object and returns the object's id
function add_object(object, layer=0)
{
game_objects[added] = object
object.id = added
object.layer = layer;
//check if the layer exists, if not create it
if (!(layer in object_layers)) {
object_layers[layer] = {}
layers.push(layer);
layers.sort(function(a, b) {
aNum = parseInt(a)
bNum = parseInt(b);
if (aNum == bNum)
return 0
if (aNum > bNum)
return 1
return 0
})
}
//Add object to layer
object_layers[layer][object.id] = 0
added += 1
return object.id
}
//Removes an object from the draw hash table
function remove_object(id)
{
//find object layer and delete it from layer
for (var index = 0; index < layers.length; index++) {
layer = layers[index]
if(id in object_layers[layer]) {
delete object_layers[layer][id]
}
}
//remove object from game_objects
return delete game_objects[id]
}
//resets the game
function reset()
{
game_colors = initial_colors.slice(0);
game_manager.remove_self()
ball_shooter.remove_self()
game_grid.remove_self()
//add ball shooter
ball_shooter = new shooter(game_width / 2, game_height - 20, 10, 75, 400, get_color);
add_object(ball_shooter, -1)
ball_shooter.load(get_color);
//Create game grid
game_grid = new grid(22, 10, 1, 14, 10);
//add game grid
add_object(game_grid)
//add a ball to the grid
game_grid.add_rows(get_color, 5)
game_manager = new manager(ball_shooter, game_grid)
add_object(game_manager, 10)
}
//draw function
function draw()
{
//clear canvas at start of frame
clear();
//get current time
var date = new Date()
var time = date.getTime()
//calculate elapsed (in seconds)
var elapsed = (time - prev_time) / 1000.0
elapsed = Math.min(elapsed, max_elapsed)
//iterate over the game objects and draw them all
//start out at layer 0, then progress up
layers.forEach( function(layer) {
//get keys
object_keys = Object.keys(object_layers[layer])
for(var index = 0; index < object_keys.length; index++)
{
if (object_keys[index] in game_objects)
game_objects[object_keys[index]].draw(elapsed)
}
})
//update mouse
mouse.prev_down = mouse.down
if (mouse.down)
{
mouse.held += elapsed
}
else
{
mouse.held = 0
}
//update previous time
prev_time = time
}
function rescale() {
canvas.width = game_width
canvas.height = game_height
sf = 1
canvas.style.zIndex = defaultZ
canvas.style.position = 'relative'
ctx.scale(1, 1)
canvas.style.left = 0
canvas.style.top = 0
if(fixed) {
width = window.innerWidth;
height = window.innerHeight;
temp_sf = Math.min(width / canvas.width, height / canvas.height)
sf = temp_sf
canvas.width = canvas.width * sf
canvas.height = canvas.height * sf
ctx.scale(sf, sf)
canvas.style.position = 'fixed'
canvas.style.zIndex = '999'
canvas.style.left = window.innerWidth / 2 - canvas.width / 2
canvas.style.top = window.innerHeight / 2 - canvas.height / 2
}
}
//This function will clear the canvas between frames
function clear()
{
ctx.clearRect(0, 0, game_width, game_height);
}
var ball_shooter
var game_grid
var game_manager
//setup the scene
function setup()
{
//add ball shooter
ball_shooter = new shooter(game_width / 2, game_height - 20, 10, 75, 400, get_color);
add_object(ball_shooter, -1)
ball_shooter.load(get_color);
//Create game grid
game_grid = new grid(22, 10, 1, 14, 10);
//add game grid
add_object(game_grid)
//add a ball to the grid
game_grid.add_rows(get_color, 5)
game_manager = new manager(ball_shooter, game_grid)
add_object(game_manager, 10)
rescale()
}
function draw_button(x, y, content, gap=10, text_size=30, border_radius = 10,
border_thickness=3, font="Comic Sans MS", fill='#eee', text_color='red',
fill_hover='#ccc', text_hover='#ddd', fill_down='#aaa', text_down='#bbb',
border='black', text_border='red')
{
ctx.textAlign = "center";
pressed = false
ctx.font = text_size + "px " + font;
var retry = content
var box_width = ctx.measureText(retry).width
if(mouse.x >= x - box_width / 2 - gap &&
mouse.x <= x - box_width / 2 + box_width + gap &&
mouse.y >= y && mouse.y <= y + text_size + gap)
{
fill = fill_hover
text_color = text_hover
if(mouse.down) {
fill = fill_down
text_color = text_down
}
if(mouse.prev_down && !mouse.down)
{
pressed = true;
}
}
ctx.fillStyle = fill;
fillRoundRect(x - box_width / 2 - gap, y,
box_width + gap * 2, text_size + gap, border_radius)
ctx.fillStyle = border
roundRect(x - box_width / 2 - gap, y,
box_width + gap * 2, text_size + gap, border_radius, border_thickness)
ctx.fillStyle = text_color
ctx.fillText(retry, x, y + text_size)
ctx.fillStyle = text_border
ctx.lineWidth = 1
ctx.strokeText(retry, x, y + text_size)
return pressed;
}
function fillRoundRect(x, y, w, h, radius)
{
var r = x + w;
var b = y + h;
ctx.beginPath();
ctx.lineWidth="4";
ctx.moveTo(x+radius, y);
ctx.lineTo(r-radius, y);
ctx.quadraticCurveTo(r, y, r, y+radius);
ctx.lineTo(r, y+h-radius);
ctx.quadraticCurveTo(r, b, r-radius, b);
ctx.lineTo(x+radius, b);
ctx.quadraticCurveTo(x, b, x, b-radius);
ctx.lineTo(x, y+radius);
ctx.quadraticCurveTo(x, y, x+radius, y);
ctx.fill();
}
function roundRect(x, y, w, h, radius, thickness=4)
{
var r = x + w;
var b = y + h;
ctx.beginPath();
ctx.lineWidth=thickness;
ctx.moveTo(x+radius, y);
ctx.lineTo(r-radius, y);
ctx.quadraticCurveTo(r, y, r, y+radius);
ctx.lineTo(r, y+h-radius);
ctx.quadraticCurveTo(r, b, r-radius, b);
ctx.lineTo(x+radius, b);
ctx.quadraticCurveTo(x, b, x, b-radius);
ctx.lineTo(x, y+radius);
ctx.quadraticCurveTo(x, y, x+radius, y);
ctx.stroke();
}
setInterval(draw, delay)
Download Link👇
Where to Find Bubble Shooter 2 Source Code
Open Source Platforms
Websites like GitHub and SourceForge often host game source codes. A quick search can yield plenty of results.
Developer Communities
Forums and communities dedicated to game development are great places to find shared source codes. Sites like Reddit and Stack Overflow can be gold mines.
Educational Resources
Many online courses and tutorials offer source codes as part of their teaching material. Platforms like Udemy or Coursera are worth checking out.
How to Download Bubble Shooter 2 Source Code
Step-by-Step Guide
- Find a Reliable Source: Use trusted websites to avoid malware.
- Download the Files: Follow the download instructions provided.
- Extract the Files: Use software like WinRAR or 7-Zip to unpack the files.
- Open in an IDE: Use an Integrated Development Environment like Visual Studio Code to start exploring the code.
Necessary Tools and Software
You’ll need an IDE, a version control system like Git, and possibly a graphics editor for any visual changes.
Common Issues and Solutions
- Compatibility Problems: Ensure your software versions match those used in the source code.
- Missing Files: Double-check the download source for completeness.
- Understanding the Code: Look for documentation or comments within the code to guide you.
Legal Considerations
Open Source Licenses
Always check the license attached to the source code. It defines what you can and can’t do with it.
Intellectual Property Rights
Respect the original creator’s rights. Even if the code is free, there may be restrictions on commercial use.
Responsible Usage
Use the source code ethically. Give credit where it’s due and contribute back to the community if you make significant improvements.
Customizing Bubble Shooter 2
Basic Modifications
Change colors, adjust the number of levels, or tweak the scoring system. Small changes can make a big difference.
Adding New Features
Introduce new bubble types, power-ups, or even multiplayer modes to enhance gameplay.
Improving Graphics and Sound
Upgrade the game’s look and feel with better graphics and sound effects. Tools like Photoshop and Audacity can help.
Integrating Bubble Shooter 2 into Your Projects
Use Cases in Web Development
Embed the game into a website as a fun addition for visitors. It can boost engagement and user retention.
Mobile App Integration
Turn your customized Bubble Shooter 2 into a mobile app. Platforms like Android Studio can be invaluable for this.
Enhancing User Experience
Consider user feedback and continually update the game to improve user experience. Engaged users are happy users!
Tips for Beginners
Starting with Simple Changes
Don’t overwhelm yourself. Start with basic modifications and gradually move to more complex changes.
Utilizing Online Tutorials
There are countless tutorials available online. Websites like YouTube and Khan Academy can be very helpful.
Joining Developer Forums
Become part of a community. Forums provide support, inspiration, and feedback.
Advanced Customization Techniques
AI and Machine Learning Enhancements
Integrate AI to make the game smarter and more challenging. It’s a great way to dive into AI and ML.
Multiplayer Functionality
Add the ability for players to compete against each other. This can significantly increase the game’s replay value.
Performance Optimization
Ensure your game runs smoothly on all devices. Optimize code and graphics to reduce load times and prevent crashes.
Testing and Debugging
Common Bugs in Bubble Shooter 2
Be on the lookout for issues like unresponsive controls or scoring errors.
Debugging Tools and Techniques
Use debugging tools provided by your IDE. Breakpoints and logs can help track down issues.
Ensuring Cross-Platform Compatibility
Test your game on different devices and operating systems to ensure a smooth experience for all users.
Publishing Your Customized Game
Platforms for Distribution
For distribution, platforms like Google Play, Apple’s App Store, or Steam are considered.
Marketing Strategies
Use social media, gaming forums, and blogs to promote your game. Building a community around your game can lead to a loyal player base.
Monetization Options
Incorporate ads, in-app purchases, or a premium version to generate revenue.