Mock Up of the game prior to coding.
const { Bodies, Engine, World, Constraint, MouseConstraint, Mouse } = Matter;
var circles = [];
// define number of possible colors of bubbles
// drag to sort bubbles
// -----------------------
// Animate them onto the screen
// Hookup colors to API
let world;
let engine;
let mouseConstraint;
//3
var colors = [
[88, 191, 219],
[245, 66, 114],
[131, 207, 33],
[232, 192, 30],
[208, 154, 230]
];
let floor;
let leftWall;
let rightWall;
let floorTop;
function updateGravity() {
world.gravity.x = 0;
world.gravity.y = 0;
for (let circle of circles) {
circle.body.frictionAir = 0.2;
}
}
function gravityTimer() {
world.gravity.x = 0;
world.gravity.y = 10;
}
function setup() {
const canvas = createCanvas(windowWidth, windowHeight);
engine = Engine.create();
world = engine.world;
noStroke();
setTimeout(updateGravity, 5000);
setTimeout(gravityTimer, 90000);
//set up mouse
mouseConstraint = MouseConstraint.create(engine);
World.add(world, mouseConstraint);
floor = Bodies.rectangle(windowWidth / 2, windowHeight, windowWidth, 30, {
isStatic: true
});
floorTop = Bodies.rectangle(windowWidth / 2, 0, windowWidth, 30, {
isStatic: true
});
leftWall = Bodies.rectangle(0, windowHeight / 2, 30, windowWidth, {
isStatic: true
});
rightWall = Bodies.rectangle(windowWidth, windowHeight / 2, 30, windowWidth, {
isStatic: true
});
World.add(world, leftWall);
World.add(world, rightWall);
World.add(world, floor);
World.add(world, floorTop);
for (var i = 0; i < 40; i++) {
var colorIndex = Math.floor(random(colors.length));
var x = random(width);
var y = random(height / 3);
var d = random(20, 150);
var c = color(
colors[colorIndex][0],
colors[colorIndex][1],
colors[colorIndex][2]
);
var s = random(0.2, 3);
circles[i] = new DrawCircle(x, y, d, c, s);
}
}
var selectedCircle;
function mousePressed() {
for (var i = 0; i < circles.length; i++) {
circles[i].selected = false;
let d = dist(mouseX, mouseY, circles[i].xPos, circles[i].yPos);
if (d < 30) {
selectedCircle = i;
circles[selectedCircle].selected = true;
console.log("circle clicked");
}
}
}
function mouseDragged() {
circles[selectedCircle].yPos = mouseY;
circles[selectedCircle].xPos = mouseX;
}
function draw() {
background(0);
// rectMode(CENTER);
// rect(leftWall.position.x, leftWall.position.y, 30, 868);
Engine.update(engine);
for (var i = 0; i < circles.length; i++) {
circles[i].display();
}
}
function DrawCircle(x, y, d, c, s, selected) {
this.selected = selected;
this.xPos = x;
this.yPos = y;
this.diameter = 60;
this.color = c;
this.body = Bodies.circle(x, y, 30);
World.add(world, this.body);
}
DrawCircle.prototype = {
constructor: DrawCircle,
display: function () {
fill(this.color);
if (this.selected == true) {
stroke(255);
} else {
noStroke();
}
ellipse(
this.body.position.x,
this.body.position.y,
this.diameter,
this.diameter
);
},
function() {
if (this.yPos - this.diameter / 2 > height) {
this.yPos = -this.diameter / 2;
}
}
};
