Click, hold and drag on the white circle to move it, but don’t move it too quickly or it will reset. Move it to the black circle to complete and randomize the box placement again. I intended to have collision on the white rectangles but have so-far been unsuccessful in the implementation of that.
My goal with this project was to make a quick and easy game where you moved the ball through a series of obstacles and, upon reaching the goal, the map re-set and you could do it again. I have tried to tune the boxes so that there is always a path through them to the goal, but RNG is often a difficult thing to work with and a more careful approach of creating different ‘levels’ to cycle through may have been a more effective method.
/* Austin Garcia
Section C
aegarcia@andrew.cmu.edu
Assignment or Project
*/
var ballX = 10;
var ballY = 10;
var diameter = 10;
var goalX = 380;
var goalY = 380;
var boxNum = 15;
function drawSquares() {
noStroke();
fill(255);
rect(this.x, this.y, this.w, this.h);
};
function makeSquares() {
var squares = {
x: random(0, 200),
y: random(15, 380),
w: 10,
h: random(100),
draw: drawSquares,
}
return squares;
};
function drawBoxes() {
noStroke();
fill(255);
rect(this.x, this.y, this.w, this.h);
};
function makeBoxes() {
var boxes = {
x: random(0, 350),
y: random(15, 380),
w: random(100, 150),
h: 10,
draw: drawBoxes,
}
return boxes;
};
var boxes = [];
var squares = [];
function setup() {
createCanvas(400, 400);
for(var i = 0; i < boxNum; i++) {
var b = makeBoxes();
var s = makeSquares();
squares.push(s);
boxes.push(b);
}
}
function draw() {
background(20, 180, 0);
for(var i = 0; i < boxNum; i++) {
var b = boxes[i];
var s = squares[i];
s.draw();
b.draw();
}
// mouse circle
fill(255);
if(dist(ballX, ballY, mouseX, mouseY)< diameter & mouseIsPressed) {
ballX = mouseX;
ballY = mouseY;
}
//ball
ellipse(ballX, ballY, diameter,diameter);
//goal circle
fill(0);
ellipse(goalX, goalY, diameter*2, diameter*2);
//goal circle effect
if(dist(ballX, ballY, goalX, goalY) < 18) {
ballX = 10;
ballY = 10;
for (var i = 0; i < boxNum; i++) {
boxes[i].x = random(0, 350);
boxes[i].y = random(15, 380);
boxes[i].w = random(100, 150);
boxes[i].h = 10;
squares[i].x = random(0, 200);
squares[i].y = random(15, 380);
squares[i].w = 10;
squares[i].h = random(100);
}
}
//Attempt at getting collision to work
/* for (var i = 0; i < boxNum; i++) {
if(dist(mouseX+5, mouseY+5, boxes[i].x, boxes[i].y) > boxes[i].w & boxes[i].h) {
ballX = 10;
ballY = 10;
}
}
*/
}
function mouseReleased() {
ballX = 10;
ballY = 10;
};