Arrow keys for blue (on multiplayer mode), wasd for red (Improved version of Soccer by Mason)
xxxxxxxxxx
function preload() {
//vid.hide();
font = loadFont("Poppins-Regular.ttf");
}
var p1X;
var p1Y;
var p2X;
var p2Y;
var p1XVel = 0;
var p1YVel = 0;
var p2XVel = 0;
var p2YVel = 0;
var ballX = 0;
var ballY = 0;
var ballXVel = 0;
var ballYVel = 0;
var jumping1 = false;
var jumping2 = false;
var cool = 0;
var screen = 0;
var p1Score = 0;
var p2Score = 0;
var kickoff = false;
var transitionText = "Cheerio";
var nextScreen = 0;
var cool = 0;
var particles = [];
var alternating = false;
var multiplayer = false;
var playersSelect;
var clouds;
var powerup;
var sounds;
var animation = false;
var transitionY = 0;
var newVersion = false;
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
p1X = windowWidth * (2 / 10);
p1Y = windowHeight * (9 / 10);
p2X = windowWidth * (8 / 10);
p2Y = windowHeight * (9 / 10);
ballX = windowWidth / 2;
ballY = 0;
textAlign(CENTER);
background(200);
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);
}
function draw() {
cool++;
cursor("default");
textFont(font);
resizeCanvas(windowWidth, windowHeight);
if (screen == 0) {
resizeCanvas(windowWidth, windowHeight);
homeScreen();
} else if (screen == 1) {
selectScreen();
} else if (screen == 2) {
soccerScreen();
}
if (animation) {
transition();
}
}
function homeScreen() {
background(200, 180, 255);
resizeCanvas(windowWidth, windowHeight);
//Background
noStroke();
fill(50, 200, 0);
rect(0, windowHeight * (9 / 10), windowWidth, windowHeight);
strokeWeight(windowHeight / 50);
stroke(0);
line(0, 0, windowWidth, 0);
line(0, 0, 0, windowHeight * (9 / 10));
line(windowWidth, 0, windowWidth, windowHeight * (9 / 10));
stroke(255);
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));
stroke(0);
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));
stroke(200);
strokeWeight(windowWidth / 125);
fill(0);
push();
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);
pop();
noStroke();
fill(255, 255, 0, 100);
ellipse(0, 0, windowWidth / 5 + sin(frameCount / 50) * 50 + 25, windowWidth / 5 + sin(frameCount / 50) * 50 + 25);
fill(255, 255, 0, 200);
ellipse(0, 0, windowWidth / 5 + cos(frameCount / 50) * 25, windowWidth / 5 + cos(frameCount / 50) * 25);
if (frameCount % 60 == 10) {
if (alternating)
particles.push(new CheerioMoving(255, 0));
else
particles.push(new CheerioMoving(0, 255));
alternating = !alternating;
}
for (var i = 0; i < particles.length; i++) {
if (particles[i].x < 0)
particles.splice(i, 1);
particles[i].update();
particles[i].render();
}
if (newVersion) {
stroke(0);
fill(200, 200, 200);
rect(windowWidth * (1 / 5), windowHeight / 20, windowWidth * (3 / 5), windowHeight * (18 / 20));
textSize(windowWidth / 20);
stroke(255);
fill(0);
rectMode(CORNERS);
strokeWeight(windowWidth / 200);
noFill();
stroke(0);
fill(0, 0, 0, 0);
if (checkArea(windowWidth * (5 / 20), windowHeight * (6 / 10), windowWidth * (9 / 20), windowHeight * (8 / 10))) {
fill(0, 0, 0, 50);
cursor("pointer");
}
rect(windowWidth * (5 / 20), windowHeight * (6 / 10), windowWidth * (9 / 20), windowHeight * (8 / 10));
fill(0, 0, 0, 0);
if (checkArea(windowWidth * (11 / 20), windowHeight * (6 / 10), windowWidth * (15 / 20), windowHeight * (8 / 10))) {
fill(0, 0, 0, 50);
cursor("pointer");
}
rect(windowWidth * (11 / 20), windowHeight * (6 / 10), windowWidth * (15 / 20), windowHeight * (8 / 10));
}
rectMode(CORNER);
}
function soccerScreen() {
textAlign(CENTER, CENTER);
clear();
noStroke();
background(180, 180, 255);
fill(0);
textSize(windowWidth / 10);
text(p1Score, windowWidth * (1 / 10), windowHeight * (1 / 5));
text(p2Score, windowWidth * (9 / 10), windowHeight * (1 / 5));
rectMode(CORNERS);
fill(50, 200, 0);
rect(0, windowHeight * (9 / 10), windowWidth, windowHeight);
strokeWeight(windowHeight / 50);
stroke(0);
line(0, 0, windowWidth, 0);
line(0, 0, 0, windowHeight * (9 / 10));
line(windowWidth, 0, windowWidth, windowHeight * (9 / 10));
stroke(255);
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));
stroke(0);
line(0, windowHeight * (8 / 15), windowWidth * (1 / 25), windowHeight * (8 / 15));
line(windowWidth, windowHeight * (8 / 15), windowWidth * (24 / 25), windowHeight * (8 / 15));
noFill();
stroke(255, 0, 0);
ellipseMode(CENTER);
ellipse(p1X, p1Y - (windowHeight / 30), windowWidth / 40, windowHeight / 15);
stroke(0, 0, 255);
ellipse(p2X, p2Y - (windowHeight / 30), windowWidth / 40, windowHeight / 15);
noStroke();
fill(255, 255, 0, 100);
ellipse(0, 0, windowWidth / 5 + sin(frameCount / 50) * 50 + 25, windowWidth / 5 + sin(frameCount / 50) * 50 + 25);
fill(255, 255, 0, 200);
ellipse(0, 0, windowWidth / 5 + cos(frameCount / 50) * 25, windowWidth / 5 + cos(frameCount / 50) * 25);
//CLOUDS
if (clouds.active) {
if (frameCount % 200 == 10) {
if (random(0, 1) > 0.5)
particles.push(new Cloud(2, windowWidth * -0.5, windowHeight * (random(1, 15) / 40)));
else
particles.push(new Cloud(-2, windowWidth * 1.5, windowHeight * (random(1, 15) / 40)));
alternating = !alternating;
}
for (var i = 0; i < particles.length; i++) {
if (particles[i].done) {
particles.splice(i, 1);
}
particles[i].update();
particles[i].render();
}
}
noFill();
if (keyIsDown(65)) {
p1XVel -= 0.5;
}
if (keyIsDown(68)) {
p1XVel += 0.5;
}
if (multiplayer) {
if (keyIsDown(LEFT_ARROW)) {
p2XVel -= 0.5;
}
if (keyIsDown(RIGHT_ARROW)) {
p2XVel += 0.5;
}
}
if (keyIsDown(87)) {
if (!jumping1) {
p1YVel = -9;
jumping1 = true;
}
}
if (multiplayer) {
if (keyIsDown(UP_ARROW)) {
if (!jumping2) {
p2YVel = -9;
jumping2 = true;
}
}
} else {
if (ballX > p2X - (windowWidth / 45)) {
if (p2X < windowWidth * (22 / 25)) {
p2XVel += 0.5;
}
if (!jumping2) {
jumping2 = true;
p2YVel = -9;
}
}
if (ballX < p2X + (windowWidth / 45)) {
if (ballXVel > 0) {
if (p2X < windowWidth * (22 / 25)) {
p2XVel += 0.5;
}
} else {
p2XVel -= 0.5;
}
}
}
if (p1Y > windowHeight * (9 / 10)) {
jumping1 = false;
p1YVel = 0;
p1Y = windowHeight * (9 / 10);
}
if (p2Y > windowHeight * (9 / 10)) {
jumping2 = false;
p2YVel = 0;
p2Y = windowHeight * (9 / 10);
}
if (jumping1 == true) {
p1YVel += 0.25;
p1Y += p1YVel;
} else {
p1yVel = 0;
}
if (jumping2 == true) {
p2YVel += 0.25;
p2Y += p2YVel;
} else {
p2YVel = 0;
}
p1X += p1XVel;
p2X += p2XVel;
p1XVel *= 0.9;
p2XVel *= 0.9;
if (ballY < windowHeight * (9 / 10)) {
ballYVel += 0.1;
} else {
ballY = (windowHeight * (9 / 10)) + 1;
ballYVel *= -(1 / 2);
}
ballY += ballYVel;
stroke(255);
if (ballY < 0) {
bally = 0;
ballYVel *= -1;
}
if (ballX < 0) {
ballx = 0;
ballXVel *= -1;
}
if (ballX > windowWidth) {
ballx = windowWidth;
ballXVel *= -1;
}
ellipse(ballX, ballY - (windowHeight / 25), windowWidth / 45, windowWidth / 45);
if (((p1X - ballX) * (p1X - ballX)) + ((p1Y - ballY) * (p1Y - ballY)) < windowWidth * 1.5) {
ballX += p1XVel * 1;
ballY += p1YVel * 1;
ballXVel += ((ballX - p1X) / 10) + p1XVel;
//if (cool > 15) {
cool = 0;
ballYVel += ((ballY - p1Y) / 10) + (p1YVel);
//}
}
if (((p2X - ballX) * (p2X - ballX)) + ((p2Y - ballY) * (p2Y - ballY)) < windowWidth * 1.5) {
ballX += p2XVel * 1;
ballY += p2YVel * 1;
ballXVel += ((ballX - p2X) / 10) + p2XVel;
//if (cool > 15) {
cool = 0;
ballYVel += ((ballY - p2Y) / 10) + (p2YVel);
//}
}
if (ballYVel < -15) {
ballYVel = -15;
}
if (ballXVel < -15) {
ballXVel = -15;
}
if (ballXVel > 15) {
ballXVel = 15;
}
ballXVel *= 0.995;
ballX += ballXVel;
cool++;
if (ballX < windowWidth * (1 / 25) && ballY > windowHeight * (9 / 15)) {
transitionText = "Goal!";
ballXVel = 0;
ballYVel = 0;
p1XVel = 0;
p2XVel = 0;
p1YVel = 0;
p2YVel = 0;
if (!animation && !kickoff)
transition();
if (kickoff) {
p2Score++;
ballX = windowWidth / 2;
ballY = 0;
ballXVel = random(-1.5, 1.5) * 5;
ballYVel = 0;
p1X = windowWidth * (2 / 10);
p1Y = windowHeight * (9 / 10);
p2X = windowWidth * (8 / 10);
p2Y = windowHeight * (9 / 10);
p1XVel = 0;
p2XVel = 0;
p1YVel = 0;
p2YVel = 0;
kickoff = false;
}
}
print(kickoff + ", " + animation);
if (ballX > windowWidth * (24 / 25) && ballY > windowHeight * (9 / 15)) {
transitionText = "Goal!";
ballXVel = 0;
ballYVel = 0;
p1XVel = 0;
p2XVel = 0;
p1YVel = 0;
p2YVel = 0;
if (!animation && !kickoff)
transition();
if (kickoff) {
p1Score++;
ballX = windowWidth / 2;
ballY = 0;
ballXVel = random(-1.5, 1.5) * 5;
ballYVel = 0;
p1X = windowWidth * (2 / 10);
p1Y = windowHeight * (9 / 10);
p2X = windowWidth * (8 / 10);
p2Y = windowHeight * (9 / 10);
p1XVel = 0;
p2XVel = 0;
p1YVel = 0;
p2YVel = 0;
kickoff = false;
}
}
if (ballX < windowWidth * (1 / 25) && ballY < windowHeight * (9 / 15) && ballY > windowHeight * (7.8 / 15)) {
ballYVel *= -1;
ballY += ballYVel * 1.5;
}
if (ballX > windowWidth * (24 / 25) && ballY < windowHeight * (9 / 15) && ballY > windowHeight * (7.8 / 15)) {
ballYVel *= -1;
ballY += ballYVel * 1.5;
}
}
function selectScreen() {
textAlign(CENTER, CENTER);
textSize(windowWidth / 10 + (sin(frameCount / 50) * 10));
stroke(175);
strokeWeight(windowWidth / 125);
fill(0);
text("Options", windowWidth / 2, windowHeight / 8);
rectMode(CORNERS);
fill(200);
if (checkArea(windowWidth * (12 / 30), windowHeight * (42 / 56), windowWidth * (18 / 30), windowHeight * (52 / 56)))
fill(150);
rect(windowWidth * (12 / 30), windowHeight * (42 / 56), windowWidth * (18 / 30), windowHeight * (52 / 56));
fill(0);
textSize(windowWidth / 25);
if (!multiplayer)
stroke(225);
else
stroke(175);
text("One Player", windowWidth / 4, windowHeight / 2.35);
if (multiplayer)
stroke(225);
else
stroke(175);
text("Multiplayer", windowWidth * (3 / 4), windowHeight / 2.35);
stroke(175);
textSize(windowWidth / 18);
text("Start", windowWidth / 2, windowHeight * (46 / 56));
rectMode(CORNERS);
stroke(225);
playerSelect.setPos(windowWidth / 2, windowHeight / 2.25, windowWidth / 7, windowHeight / 12);
playerSelect.update();
playerSelect.render();
clouds.update();
clouds.render();
powerup.update();
powerup.render();
sounds.update();
sounds.render();
if (checkArea(windowWidth * (12 / 30), windowHeight * (42 / 56), windowWidth * (18 / 30), windowHeight * (52 / 56)))
cursor("pointer");
}
function mousePressed() {
if (screen == 0 && !newVersion) {
nextScreen = 1;
transition();
}
}
function clickAccept() {
screen = 2;
}
function checkArea(x1, y1, x2, y2) {
if (mouseX > x1 && mouseY > y1 && mouseX < x2 && mouseY < y2)
return true;
else
return false;
}
function mouseReleased() {
if (newVersion) {
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))) {
newVersion = false;
}
}
if (screen == 1 && checkArea(windowWidth * (12 / 30), windowHeight * (42 / 56), windowWidth * (18 / 30), windowHeight * (52 / 56))) {
nextScreen = 2;
particles = [];
if (sounds.active) {}
transition();
}
}
function Toggle(id, x, y, w, h) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.id = id;
this.active = false;
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))
cursor("pointer");
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;
cool = 0;
}
}
this.render = function() {
rectMode(CORNERS);
fill(0);
//noStroke();
//rect(this.x - this.w / 2, this.y - this.h / 2, this.x + this.w / 2, this.y + this.h / 2);
if (this.active)
fill(255);
else
fill(150);
strokeWeight(windowWidth / 200);
textSize(windowWidth / 20);
textAlign(CENTER, CENTER);
text(this.id, this.x, this.y / 1.03);
}
}
function Select(id) {
this.x2 = 0;
this.active = false;
this.id = id;
this.innerW = windowWidth / 25;
this.render = function() {
rectMode(CORNERS);
strokeWeight(windowWidth / 300);
fill(175);
rect(this.x - (this.w / 2), this.y - (this.h / 2), this.x + (this.w / 2), this.y + (this.h / 2));
strokeWeight(windowWidth / 125);
stroke(100);
fill(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.x = x;
this.y = y;
this.w = width;
this.h = 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;
cool = 0;
}
if (checkArea(this.x - (this.w / 2), this.y - (this.h / 2), this.x + (this.w / 2), this.y + (this.h / 2))) {
cursor("pointer");
}
if (this.active) {
if (this.x2 < this.w - this.innerW)
this.x2 += windowWidth / 100;
else
this.x2 = this.w - this.innerW;
} else {
if (this.x2 > 0)
this.x2 -= windowWidth / 100;
else
this.x2 = 0;
}
if (this.id == "players")
multiplayer = this.active;
}
}
function transition() {
if (!animation) {
kickoff = false;
animation = true;
transitionY = windowWidth / -5;
}
transitionY += 25;
if (abs(transitionY - windowHeight) < 30) {
screen = nextScreen;
kickoff = true;
}
if (transitionY > (windowHeight * 2) + windowWidth / 5) {
animation = false;
kickoff = false;
}
strokeWeight(windowWidth / 5);
for (var i = 0; i < 6; i++) {
if (i % 2 == 0)
stroke(255, 0, 0);
else
stroke(0, 0, 255);
line(windowWidth * (i / 5), transitionY, windowWidth * (i / 5), transitionY - windowHeight);
}
strokeWeight(windowWidth / 100);
stroke(150);
fill(0);
textSize(windowWidth / 5 + (sin(frameCount / 5) * 50));
text(transitionText, windowWidth / 2, transitionY - (windowHeight / 1.5));
}