font = loadFont("Poppins-Regular.ttf");
var transitionText = "Cheerio";
createCanvas(windowWidth, windowHeight);
p1X = windowWidth * (2 / 10);
p1Y = windowHeight * (9 / 10);
p2X = windowWidth * (8 / 10);
p2Y = windowHeight * (9 / 10);
playerSelect = new Select("players");
clouds = new Toggle("Clouds", windowWidth / 2, windowHeight / 1.625, windowWidth / 5, windowHeight / 7);
powerup = new Toggle("Powerup", windowWidth / 4, windowHeight / 1.625, windowWidth / 4.5, windowHeight / 7);
sounds = new Toggle("Sounds", windowWidth * (3 / 4), windowHeight / 1.625, windowWidth / 5, windowHeight / 7);
resizeCanvas(windowWidth, windowHeight);
resizeCanvas(windowWidth, windowHeight);
} else if (screen == 1) {
} else if (screen == 2) {
background(200, 180, 255);
resizeCanvas(windowWidth, windowHeight);
rect(0, windowHeight * (9 / 10), windowWidth, windowHeight);
strokeWeight(windowHeight / 50);
line(0, 0, windowWidth, 0);
line(0, 0, 0, windowHeight * (9 / 10));
line(windowWidth, 0, windowWidth, windowHeight * (9 / 10));
line(0, windowHeight * (8 / 15), 0, windowHeight * (9 / 10));
line(windowWidth * (1 / 25), windowHeight * (8 / 15), windowWidth * (1 / 25), windowHeight * (9 / 10));
line(windowWidth, windowHeight * (8 / 15), windowWidth, windowHeight * (9 / 10));
line(windowWidth * (24 / 25), windowHeight * (8 / 15), windowWidth * (24 / 25), windowHeight * (9 / 10));
line(0, windowHeight * (8 / 15), windowWidth * (1 / 25), windowHeight * (8 / 15));
line(windowWidth, windowHeight * (8 / 15), windowWidth * (24 / 25), windowHeight * (8 / 15));
textSize(windowWidth / 10 + (sin(frameCount / 50) * 10));
strokeWeight(windowWidth / 125);
translate(windowWidth / 2, windowHeight / 2.5 - map((sin(frameCount / 100) * 50), -50, 50, 0, 100));
rotate(map(cos(frameCount / 10) * 0.1, -1, 1, -1, 1));
text("Cheerio Soccer", 0, 0);
ellipse(0, 0, windowWidth / 5 + sin(frameCount / 50) * 50 + 25, windowWidth / 5 + sin(frameCount / 50) * 50 + 25);
ellipse(0, 0, windowWidth / 5 + cos(frameCount / 50) * 25, windowWidth / 5 + cos(frameCount / 50) * 25);
if (frameCount % 60 == 10) {
particles.push(new CheerioMoving(255, 0));
particles.push(new CheerioMoving(0, 255));
alternating = !alternating;
for (var i = 0; i < particles.length; i++) {
rect(windowWidth * (1 / 5), windowHeight / 20, windowWidth * (3 / 5), windowHeight * (18 / 20));
textSize(windowWidth / 20);
strokeWeight(windowWidth / 200);
text("There is a new version, " + "\n" + "want to try it?", windowWidth / 2, windowHeight / 4);
text("Yes!", windowWidth * (7 / 20), windowHeight * (7.35 / 10));
text("No", windowWidth * (13 / 20), windowHeight * (7.35 / 10));
if (checkArea(windowWidth * (5 / 20), windowHeight * (6 / 10), windowWidth * (9 / 20), windowHeight * (8 / 10))) {
rect(windowWidth * (5 / 20), windowHeight * (6 / 10), windowWidth * (9 / 20), windowHeight * (8 / 10));
if (checkArea(windowWidth * (11 / 20), windowHeight * (6 / 10), windowWidth * (15 / 20), windowHeight * (8 / 10))) {
rect(windowWidth * (11 / 20), windowHeight * (6 / 10), windowWidth * (15 / 20), windowHeight * (8 / 10));
function soccerScreen() {
textAlign(CENTER, CENTER);
background(180, 180, 255);
textSize(windowWidth / 10);
text(p1Score, windowWidth * (1 / 10), windowHeight * (1 / 5));
text(p2Score, windowWidth * (9 / 10), windowHeight * (1 / 5));
rect(0, windowHeight * (9 / 10), windowWidth, windowHeight);
strokeWeight(windowHeight / 50);
line(0, 0, windowWidth, 0);
line(0, 0, 0, windowHeight * (9 / 10));
line(windowWidth, 0, windowWidth, windowHeight * (9 / 10));
line(0, windowHeight * (8 / 15), 0, windowHeight * (9 / 10));
line(windowWidth * (1 / 25), windowHeight * (8 / 15), windowWidth * (1 / 25), windowHeight * (9 / 10));
line(windowWidth, windowHeight * (8 / 15), windowWidth, windowHeight * (9 / 10));
line(windowWidth * (24 / 25), windowHeight * (8 / 15), windowWidth * (24 / 25), windowHeight * (9 / 10));
line(0, windowHeight * (8 / 15), windowWidth * (1 / 25), windowHeight * (8 / 15));
line(windowWidth, windowHeight * (8 / 15), windowWidth * (24 / 25), windowHeight * (8 / 15));
ellipse(p1X, p1Y - (windowHeight / 30), windowWidth / 40, windowHeight / 15);
ellipse(p2X, p2Y - (windowHeight / 30), windowWidth / 40, windowHeight / 15);
ellipse(0, 0, windowWidth / 5 + sin(frameCount / 50) * 50 + 25, windowWidth / 5 + sin(frameCount / 50) * 50 + 25);
ellipse(0, 0, windowWidth / 5 + cos(frameCount / 50) * 25, windowWidth / 5 + cos(frameCount / 50) * 25);
if (frameCount % 200 == 10) {
particles.push(new Cloud(2, windowWidth * -0.5, windowHeight * (random(1, 15) / 40)));
particles.push(new Cloud(-2, windowWidth * 1.5, windowHeight * (random(1, 15) / 40)));
alternating = !alternating;
for (var i = 0; i < particles.length; i++) {
if (keyIsDown(LEFT_ARROW)) {
if (keyIsDown(RIGHT_ARROW)) {
if (keyIsDown(UP_ARROW)) {
if (ballX > p2X - (windowWidth / 45)) {
if (p2X < windowWidth * (22 / 25)) {
if (ballX < p2X + (windowWidth / 45)) {
if (p2X < windowWidth * (22 / 25)) {
if (p1Y > windowHeight * (9 / 10)) {
p1Y = windowHeight * (9 / 10);
if (p2Y > windowHeight * (9 / 10)) {
p2Y = windowHeight * (9 / 10);
if (ballY < windowHeight * (9 / 10)) {
ballY = (windowHeight * (9 / 10)) + 1;
if (ballX > windowWidth) {
ellipse(ballX, ballY - (windowHeight / 25), windowWidth / 45, windowWidth / 45);
if (((p1X - ballX) * (p1X - ballX)) + ((p1Y - ballY) * (p1Y - ballY)) < windowWidth * 1.5) {
ballXVel += ((ballX - p1X) / 10) + p1XVel;
ballYVel += ((ballY - p1Y) / 10) + (p1YVel);
if (((p2X - ballX) * (p2X - ballX)) + ((p2Y - ballY) * (p2Y - ballY)) < windowWidth * 1.5) {
ballXVel += ((ballX - p2X) / 10) + p2XVel;
ballYVel += ((ballY - p2Y) / 10) + (p2YVel);
if (ballX < windowWidth * (1 / 25) && ballY > windowHeight * (9 / 15)) {
transitionText = "Goal!";
if (!animation && !kickoff)
ballXVel = random(-1.5, 1.5) * 5;
p1X = windowWidth * (2 / 10);
p1Y = windowHeight * (9 / 10);
p2X = windowWidth * (8 / 10);
p2Y = windowHeight * (9 / 10);
print(kickoff + ", " + animation);
if (ballX > windowWidth * (24 / 25) && ballY > windowHeight * (9 / 15)) {
transitionText = "Goal!";
if (!animation && !kickoff)
ballXVel = random(-1.5, 1.5) * 5;
p1X = windowWidth * (2 / 10);
p1Y = windowHeight * (9 / 10);
p2X = windowWidth * (8 / 10);
p2Y = windowHeight * (9 / 10);
if (ballX < windowWidth * (1 / 25) && ballY < windowHeight * (9 / 15) && ballY > windowHeight * (7.8 / 15)) {
if (ballX > windowWidth * (24 / 25) && ballY < windowHeight * (9 / 15) && ballY > windowHeight * (7.8 / 15)) {
function selectScreen() {
textAlign(CENTER, CENTER);
textSize(windowWidth / 10 + (sin(frameCount / 50) * 10));
strokeWeight(windowWidth / 125);
text("Options", windowWidth / 2, windowHeight / 8);
if (checkArea(windowWidth * (12 / 30), windowHeight * (42 / 56), windowWidth * (18 / 30), windowHeight * (52 / 56)))
rect(windowWidth * (12 / 30), windowHeight * (42 / 56), windowWidth * (18 / 30), windowHeight * (52 / 56));
textSize(windowWidth / 25);
text("One Player", windowWidth / 4, windowHeight / 2.35);
text("Multiplayer", windowWidth * (3 / 4), windowHeight / 2.35);
textSize(windowWidth / 18);
text("Start", windowWidth / 2, windowHeight * (46 / 56));
playerSelect.setPos(windowWidth / 2, windowHeight / 2.25, windowWidth / 7, windowHeight / 12);
if (checkArea(windowWidth * (12 / 30), windowHeight * (42 / 56), windowWidth * (18 / 30), windowHeight * (52 / 56)))
function mousePressed() {
if (screen == 0 && !newVersion) {
function checkArea(x1, y1, x2, y2) {
if (mouseX > x1 && mouseY > y1 && mouseX < x2 && mouseY < y2)
function mouseReleased() {
if (checkArea(windowWidth * (5 / 20), windowHeight * (6 / 10), windowWidth * (9 / 20), windowHeight * (8 / 10))) {
window.open("https://nimblevalley.github.io/cheeriosoccer/");
if (checkArea(windowWidth * (11 / 20), windowHeight * (6 / 10), windowWidth * (15 / 20), windowHeight * (8 / 10))) {
if (screen == 1 && checkArea(windowWidth * (12 / 30), windowHeight * (42 / 56), windowWidth * (18 / 30), windowHeight * (52 / 56))) {
function Toggle(id, x, y, w, h) {
this.update = function() {
if (checkArea(this.x - this.w / 2, this.y - this.h / 2, this.x + this.w / 2, this.y + this.h / 2))
if (checkArea(this.x - this.w / 2, this.y - this.h / 2, this.x + this.w / 2, this.y + this.h / 2) && mouseIsPressed && cool > 15) {
this.active = !this.active;
this.render = function() {
strokeWeight(windowWidth / 200);
textSize(windowWidth / 20);
textAlign(CENTER, CENTER);
text(this.id, this.x, this.y / 1.03);
this.innerW = windowWidth / 25;
this.render = function() {
strokeWeight(windowWidth / 300);
rect(this.x - (this.w / 2), this.y - (this.h / 2), this.x + (this.w / 2), this.y + (this.h / 2));
strokeWeight(windowWidth / 125);
rect(map(this.x2, 0, this.w - this.innerW, this.x - (this.w / 2), (this.x + (this.w / 2)) - this.innerW), this.y - (this.h / 2), map(this.x2, 0, this.w - this.innerW, this.x - (this.w / 2), (this.x + (this.w / 2)) - this.innerW) + this.innerW, this.y + (this.h / 2));
this.setPos = function(x, y, width, height) {
this.update = function() {
if (checkArea(this.x - (this.w / 2), this.y - (this.h / 2), this.x + (this.w / 2), this.y + (this.h / 2)) && mouseIsPressed && cool > 10) {
this.active = !this.active;
if (checkArea(this.x - (this.w / 2), this.y - (this.h / 2), this.x + (this.w / 2), this.y + (this.h / 2))) {
if (this.x2 < this.w - this.innerW)
this.x2 += windowWidth / 100;
this.x2 = this.w - this.innerW;
this.x2 -= windowWidth / 100;
if (this.id == "players")
multiplayer = this.active;
transitionY = windowWidth / -5;
if (abs(transitionY - windowHeight) < 30) {
if (transitionY > (windowHeight * 2) + windowWidth / 5) {
strokeWeight(windowWidth / 5);
for (var i = 0; i < 6; i++) {
line(windowWidth * (i / 5), transitionY, windowWidth * (i / 5), transitionY - windowHeight);
strokeWeight(windowWidth / 100);
textSize(windowWidth / 5 + (sin(frameCount / 5) * 50));
text(transitionText, windowWidth / 2, transitionY - (windowHeight / 1.5));