Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Piano Tiles
ID	4687070145495040
Created	4 years ago, 1616031278657
Updated	4 years ago, 1636521521070
Code	/** Recreating Piano Tiles, but without music (which you probably have noticed). In order to be posted on the top 3 leaderboard, you need to have spin-off proof. Huge thanks to 1001programmer1001 for helping me solve a background issue, JackRobert2k04 for discovering several bugs and improving gameplay, and Eye Studios Inc. (JJ, aleli) for requesting the Filipino language. I have achieved one of my goals on KA: learning programming. However, my other goal to collaborate with other programmers is yet to be achieved. I believe that with collaboration, comes amazing programs. It would be great if you subscribe: https://www.khanacademy.org/computer-programming/i/5657327166341120 / //{ var currentScene = 3; var currentMenu; var startGame = false; var endGame = false; var loseType = null; //forgot-press or wrong-press var score = 0; var leader = { names: [ "CatEditor", "wolf", "Im a duck hello", "Hunibii", "Creech(lil active)", "Im a dood hello", "₱ⱤØ₲Ɽ₳₥₥ł₦₲ ₭ł₦₲", "FoxyN🦊", "քʀօӼɨʍǟ #RivalsFTW", "Karanjot Singh {Read Bio}", "The Slim Reaper", "joe song#Ravenclaw4thewin#TEE", "JT", "The Multiverse Hero", "Cake and Cookies", "(っ◔◡◔)っ♥ Ani:3^w^ ♥", "Canada Goose #FrostineFTW", "User", "LC[Vortan]#vortanFTW", "Lightshadow2576", "brendenkibler", "ⓉⓤⓡⓣⓛⓔⓂ①②", "3van7iu(Vortan)", "The Lich King", "~Sonata~", "Franky the M@h Master", ], pict: [ getImage("avatars/duskpin-seed"), getImage("avatars/duskpin-sapling"), getImage("creatures/BabyWinston"), getImage("avatars/purple-pi-pink"), getImage("avatars/starky-sapling"), getImage("creatures/Hopper-Cool"), getImage("creatures/Hopper-Cool"), getImage("creatures/Hopper-Cool"), getImage("avatars/duskpin-sapling"), getImage("avatars/aqualine-ultimate"), getImage("creatures/Winston"), getImage("creatures/OhNoes"), getImage("avatars/piceratops-ultimate"), getImage("creatures/Hopper-Cool"), getImage("avatars/starky-tree"), getImage("avatars/starky-tree"), getImage("avatars/starky-sapling"), getImage("avatars/leafers-seed"), getImage("avatars/piceratops-seed"), getImage("avatars/purple-pi-teal"), getImage("avatars/primosaur-ultimate"), getImage("avatars/aqualine-ultimate"), getImage("avatars/piceratops-tree"), getImage("avatars/robot_male_2"), getImage("avatars/leaf-grey"), getImage("avatars/starky-sapling") ], score: [ 122, 96, 82, 81, 79, 76, 74, 70, 63, 61, 61, 59, 59, 59, 55, 52, 52, 51, 50, 48, 47, 46, 46, 44, 40, 39 ] }; var language = "English"; var chgLan = function(english, filipino) { if (language === "English") { return english; } else if (language === "Filipino") { return filipino; } }; var button = function (config) { this.x = config.x; this.y = config.y \|\| 435; this.w = config.w \|\| 100; this.h = config.h \|\| 65; this.shape = config.shape \|\| "ellipse"; this.opacity = 55; this.size = 1; this.anmSpeed = config.anmSpeed \|\| 0.015; this.pressed = false; }; //END GAME BUTTONS var replayButton = new button({ x: 200 - 115 / 2, y: 410, w: 105, h: 70, shape: "rect", anmSpeed: 0.75 }); var menuButton = new button({ x: (200 - 115 / 2) - 75, y: 410 + 70 / 2, w: 70, h: 70, shape: "ellipse" }); var leaderButton = new button({ x: (200 - 115 / 2 + 105) + 75, y: 410 + 70 / 2, w: 70, h: 70, shape: "ellipse" }); //MENU BUTTONS var homeButton = new button({ x: 0, shape: "rect" }); var musicButton = new button({ x: 100, shape: "rect" }); var leaderBoardButton = new button({ x: 200, shape: "rect" }); var settingsButton = new button({ x: 300, shape: "rect" }); //PANEL BUTTONS var playButton = new button({ x: 140, y: 55, w: 120, h: 35, shape: "rect" }); var lrnMrButton = [new button({ x: 270, y: 247, w: 85, h: 40, shape: "rect" }), new button({ x: 270, y: 359, w: 85, h: 40, shape: "rect" })]; var closeButton = [new button({ x: 340 / 2, y: 265, w: 60, h: 40, shape: "rect" }), new button({ x: 340 / 2, y: 377, w: 60, h: 40, shape: "rect" })]; var mscPlayButton = [new button({ x: 275, y: 65, w: 75, h: 40, shape: "rect" }), new button({ x: 275, y: 165, w: 75, h: 40, shape: "rect" }), new button({ x: 275, y: 265, w: 75, h: 40, shape: "rect" })]; var selectButton = [new button({ x: 227, y: 86, w: 37, h: 37 }), new button({ x: 227, y: 186, w: 37, h: 37 }), new button({ x: 227, y: 286, w: 37, h: 37 })]; var openButton = [new button({ x: 345, y: 20 + 75/2, w: 50, h: 50 }), new button({ x: 345, y: 105 + 75/2, w: 50, h: 50 })]; var CloseButton = new button ({ x: 330, y: 135, w: 40, h: 40 }); var englishButton = new button({x: 80, y: 210, w: 15, h: 15}); var filipinoButton = new button({x: 80, y: 250, w: 15, h: 15}); button.prototype.isMouseInside = function () { if (this.shape === "rect") { return mouseX >= this.x && mouseX <= this.x + this.w && mouseY >= this.y && mouseY <= this.y + this.h; } else if (this.shape === "ellipse") { return this.w / 2 >= dist(mouseX, mouseY, this.x, this.y); } }; button.prototype.endGame = function (type) { //BUTTON BACKGROUND if (this.shape === "ellipse") { if (this.isMouseInside()) { fill(255, 255, 255, 65); this.size += this.anmSpeed; if (this.size < 0.8) { this.anmSpeed = 0.015; } if (this.size >= 1.2) { this.anmSpeed = -this.anmSpeed; } } else { noFill(); this.size = 1; } stroke(31, 116, 254); strokeWeight(3 this.size); ellipse(this.x, this.y, this.w * this.size, this.h * this.size); } else if (this.shape === "rect") { if (this.isMouseInside()) { fill(77, 144, 255); this.y += this.anmSpeed; if (this.y < 400) { this.anmSpeed = -this.anmSpeed; } if (this.y > 410) { this.anmSpeed = -this.anmSpeed; } } else { fill(31, 116, 254); this.y = 410; } rectMode(CENTER); rect(this.x + this.w / 2 * this.size, this.y + this.h / 2 * this.size, this.w * this.size, this.h * this.size); ellipse(this.x, this.y + this.h / 2 * this.size, 50 * this.size, this.h * this.size); ellipse(this.x + this.w * this.size, this.y + this.h / 2 * this.size, 50 * this.size, this.h * this.size); } //ELEMENT if (type === "menu") { strokeWeight(4.5 * this.size); line(this.x - 17 * this.size, this.y - 10 * this.size, this.x + 15 * this.size, this.y - 10 * this.size); line(this.x - 17 * this.size, this.y, this.x + 15 * this.size, this.y); line(this.x - 17 * this.size, this.y + 10 * this.size, this.x + 15 * this.size, this.y + 10 * this.size); } else if (type === "restart") { textAlign(CENTER, CENTER); fill(255, 255, 255); textSize(45 * this.size); text("▷", this.x + (this.w / 2 + 5) * this.size, this.y + this.h / 2 * this.size); } else if (type === "leaderBoard") { rectMode(CORNER); noFill(); strokeWeight(3.5); rect(this.x - 16.5 * this.size, this.y - 3 * this.size, 15 * 0.75 * this.size, 25 * 0.75 * this.size); rect(this.x - 16.5 * this.size + 15 * 0.75 * this.size, this.y - 3 * this.size - 20 * 0.75 * this.size, 15 * 0.75 * this.size, 45 * 0.75 * this.size); rect(this.x - 16.5 * this.size + 30 * 0.75 * this.size, this.y - 3 * this.size - 10 * 0.75 * this.size, 15 * 0.75 * this.size, 35 * 0.75 * this.size); } }; button.prototype.menu = function (type, lanChange, colour) { //BUTTON BACKGROUND fill(247, 247, 247); noStroke(); rectMode(CORNER); rect(this.x, this.y, this.w, this.h); if (this.isMouseInside() \|\| currentMenu === type) { if (this.opacity < 175) { this.opacity += 8; } if (this.opacity >= 175 && this.opacity < 255) { this.opacity += 15; } fill(colour, this.opacity); } else { if (this.opacity > -5) { this.opacity -= 10; } fill(colour, this.opacity); } noStroke(); rectMode(CORNER); rect(this.x, this.y, this.w, this.h); if (this.isMouseInside() \|\| currentMenu === type) { noStroke(); } else { stroke(235, 235, 235); strokeWeight(1.5); } fill(colour); ellipse(this.x + this.w / 2, this.y + 5, 50, 50); if (this.isMouseInside() \|\| currentMenu === type) { fill(235, 235, 235); } else { fill(0, 0, 0); } //TEXT textFont(createFont("fantasy"), 17); textAlign(CENTER, CENTER); text(lanChange, this.x + this.w / 2, this.y + 45); //PICTURE ELEMENTS if (type === "Home") { fill(255, 255, 255); stroke(235, 235, 235); strokeWeight(1.5); rect(this.x + 40, this.y + 12, 20, 6); //lowest layer rect(this.x + 47.5, this.y - 2, 3, 2); //candle ellipse(this.x + this.w / 2, this.y - 8, 4, 6); //candle fire triangle(this.x + 43, this.y + 11, this.x + 49, this.y + 11, this.x + 46, this.y + 6); triangle(this.x + 51, this.y + 11, this.x + 57, this.y + 11, this.x + 54, this.y + 6); noFill(); strokeWeight(3); rect(this.x + 34, this.y, 30, 11, 16); //middle layer } else if (type === "Music") { fill(235, 235, 235); stroke(colour); strokeWeight(2); ellipse(this.x + 55, this.y + 3, 14, 18); //large baloon ellipse(this.x + 45, this.y + 1, 19, 24); //small baloon stroke(235, 235, 235); line(this.x + 55, this.y + 11, this.x + 56, this.y + 18); //large baloon tie line(this.x + 45, this.y + 11, this.x + 47, this.y + 18); //small baloon tie fill(colour); textFont(createFont("cursive Bold"), 10); text("(", this.x + 40, this.y - 1); //bubble } else if (type === "LeaderBoard") { //upper ribbon pushMatrix(); translate(this.x + 45, this.y - 3); rotate(-25); noFill(); stroke(235, 235, 235); strokeWeight(2); ellipse(0, 0, 6, 10); popMatrix(); pushMatrix(); translate(this.x + 54, this.y - 3); rotate(25); noFill(); stroke(235, 235, 235); strokeWeight(2); ellipse(0, 0, 6, 10); popMatrix(); noStroke(); fill(235, 235, 235); rect(this.x + 41, this.y + 3, 18, 15); //box rect(this.x + 39, this.y - 1, 21, 5, 15); //upper box fill(colour); rect(this.x + 47, this.y - 1, 5, 19); //vertical ribbon rect(this.x + 41, this.y + 4, 18, 2); //horizontal ribbon } else if (type === "Settings") { noStroke(); fill(235, 235, 235); triangle(this.x + 40, this.y + 16, this.x + 60, this.y + 16, this.x + this.w / 2, this.y - 6); //main hat ellipse(this.x + this.w / 2, this.y + 16, 20, 7); //bottom ellipse fill(colour); ellipse(this.x + this.w / 2, this.y - 5, 10, 10); //top cover ellipse(this.x + 51, this.y + 14, 8, 7); //hat covers ellipse(this.x + 43, this.y + 8, 8, 7); ellipse(this.x + 51, this.y + 5, 5, 5); fill(235, 235, 235); ellipse(this.x + this.w / 2, this.y - 6, 7, 7); } }; var drawMenuButtons = function () { homeButton.menu("Home", chgLan("Home", "Bahay"), color(42, 167, 244)); musicButton.menu("Music", chgLan("Music", "Musika"), color(254, 72, 157)); leaderBoardButton.menu("LeaderBoard", chgLan("LeaderBoard", "LeaderBoard"), color(138, 32, 164)); settingsButton.menu("Settings", chgLan("Settings", "Mga setting"), color(65, 169, 76)); }; button.prototype.panel = function (type) { if (type === "home-play") { if (this.isMouseInside()) { fill(235, 235, 235, 50); } else { noFill(); } stroke(235, 235, 235); rect(this.x, this.y, this.w, this.h, 15); fill(255, 255, 255); textFont(createFont("sans-serif"), 22); text(chgLan("Play", "Maglaro"), this.x + this.w / 2, this.y + this.h / 2); } else if (type === "learn-more" \|\| type === "music-play") { if (this.isMouseInside()) { fill(97, 176, 255); } else { fill(66, 160, 255); } rect(this.x, this.y, this.w, this.h); ellipse(this.x, this.y + this.h / 2, this.h, this.h); ellipse(this.x + this.w, this.y + this.h / 2, this.h, this.h); fill(235, 235, 235); textAlign(CENTER, CENTER); if (type === "learn-more") { var size; if (language === "English") { size = 15; } else if (language === "Filipino") { size = 12; } textFont(createFont("sans-serif"), size); text(chgLan("Learn More", "Matuto Nang Higit Pa"), this.x + this.w / 2, this.y + this.h / 2); } else { textFont(createFont("sans-serif"), 18); text(chgLan("Play", "Maglaro"), this.x + this.w / 2, this.y + this.h / 2); } } else if (type === "close") { if (this.isMouseInside()) { fill(104, 118, 247, 150); } else { fill(65, 81, 224, 150); } noStroke(); rect(this.x, this.y, this.w, this.h, 5); fill(235, 235, 235); textFont(createFont("sans-serif"), 30); textAlign(CENTER, CENTER); text("v", this.x + this.w / 2, this.y + this.h / 2 - 3); } else if (type === "select") { if (this.isMouseInside()) { fill(237, 237, 237); } else { noFill(); } if (!this.pressed) { stroke(66, 160, 255); } else { stroke(6, 168, 0); } strokeWeight(2); ellipse(this.x, this.y, this.w, this.h); if (!this.pressed) { fill(66, 160, 255); } else { fill(6, 168, 0); } textAlign(CENTER, CENTER); textSize(22); text("✔", this.x, this.y); } else if (type === "settings-open") { if (this.isMouseInside()) { fill(201, 201, 201); } else { noFill(); } ellipse(this.x, this.y, this.w, this.h); fill(0, 43, 112); textAlign(CENTER, CENTER); textFont(createFont("fantasy"), 40); text(">", this.x + 2, this.y); } }; button.prototype.notification = function(type, lan) { if (type === "close") { if (this.isMouseInside()) { fill(181, 181, 181); } else { noFill(); } noStroke(); ellipse(this.x, this.y, this.w, this.h); fill(112, 112, 112); textFont(createFont("sans-serif"), 30); textAlign(CENTER, CENTER); text("x", this.x, this.y - 1); } else if (type === "language") { if (this.isMouseInside() \|\| language === lan) { fill(140, 140, 140); } else { noFill(); } stroke(0, 0, 0); ellipse(this.x, this.y, this.w, this.h); } }; var tiles = function (config) { this.x = config.x; this.y = config.y; this.w = 100; this.h = config.h \|\| 500 / 3; this.colour = config.colour \|\| color(255, 0, 0); this.lane = floor(random(3)); this.speed = 5; this.pressed = false; this.drawEnd = false; this.limit = null; //yPos limit this.anmTime = 0; //animate time }; var playTiles = [new tiles({ x: 0, y: 500 - 500 / 3, colour: color(0, 0, 0) }), new tiles({ x: 100, y: 500 - 1000 / 3, colour: color(0, 0, 0) }), new tiles({ x: 200, y: 500 - 1500 / 3, colour: color(0, 0, 0) }), new tiles({ x: 300, y: 500 - 2000 / 3, colour: color(0, 0, 0) })]; var endGameTiles = [new tiles({ x: 0, y: 500 - 500 / 3 }), new tiles({ x: 100, y: 500 - 500 / 3 }), new tiles({ x: 200, y: 500 - 500 / 3 }), new tiles({ x: 300, y: 500 - 500 / 3 }), new tiles({ x: 0, y: 500 - 1000 / 3 }), new tiles({ x: 100, y: 500 - 1000 / 3 }), new tiles({ x: 200, y: 500 - 1000 / 3 }), new tiles({ x: 300, y: 500 - 1000 / 3 }), new tiles({ x: 0, y: 500 - 1500 / 3 }), new tiles({ x: 100, y: 500 - 1500 / 3 }), new tiles({ x: 200, y: 500 - 1500 / 3 }), new tiles({ x: 300, y: 500 - 1500 / 3 }), new tiles({ x: 0, y: 500 - 2000 / 3 }), new tiles({ x: 100, y: 500 - 2000 / 3 }), new tiles({ x: 200, y: 500 - 2000 / 3 }), new tiles({ x: 300, y: 500 - 2000 / 3 })]; tiles.prototype.isMouseInside = function () { return mouseX >= this.x && mouseX <= this.x + this.w && mouseY >= this.y && mouseY <= this.y + this.h; }; var anmForgotPrs = function() { for (var i = 0; i < playTiles.length; i++) { if (playTiles[i].y >= 500 - 500/3) { if (i === 0) { playTiles[0].limit = 500 - 500/3; playTiles[1].limit = 500 - 1000/3; playTiles[2].limit = 0; playTiles[3].limit = 500 - 2000/3; } if (i === 1) { playTiles[0].limit = 500 - 2000/3; playTiles[1].limit = 500 - 500/3; playTiles[2].limit = 500 - 1000/3; playTiles[3].limit = 0; } if (i === 2) { playTiles[0].limit = 0; playTiles[1].limit = 500 - 2000/3; playTiles[2].limit = 500 - 500/3; playTiles[3].limit = 500 - 1000/3; } if (i === 3) { playTiles[0].limit = 500 - 1000/3; playTiles[1].limit = 0; playTiles[2].limit = 500 - 2000/3; playTiles[3].limit = 500 - 500/3; } } if (playTiles[i].y > playTiles[i].limit) { playTiles[i].y -= 1; } else { playTiles[i].anmTime += 0.15/playTiles.length; } } }; tiles.prototype.animateEnd = function(type) { if (type === "play") { if (loseType === "forgot-press") { anmForgotPrs(); if (this.y > 325) { for (var i = 0; i < 7; i++) { if (floor(this.anmTime) === 0 + i * 2) { fill(0, 0, 0); } else if (floor(this.anmTime) === 1 + i * 2) { noFill(); } } if (this.anmTime >= 7) { fill(0, 0, 0); } } else { if (this.pressed) { fill(94, 162, 191, 100); } else { fill(this.colour); } } } else if (loseType === "wrong-press") { if (this.pressed) { fill(94, 162, 191, 100); } else { fill(this.colour); } } } else if (type === "end-game") { if (loseType === "wrong-press") { this.anmTime += 0.15; for (var i = 0; i < 7; i++) { if (floor(this.anmTime) === 0 + i * 2) { fill(255, 0, 0); } else if (floor(this.anmTime) === 1 + i * 2) { noFill(); } } if (this.anmTime >= 7) { noFill(); } } } }; tiles.prototype.draw = function (type) { //CHANGE TILES COLOUR if (type === "play") { if (!endGame) { if (this.pressed) { fill(94, 162, 191, 100); } else { fill(this.colour); } } else { this.animateEnd(type); } } else if (type === "end-game") { this.animateEnd(type); } noStroke(); rect(this.x, this.y, this.w, this.h, 10); }; tiles.prototype.drawStart = function () { var size; if (language === "English") { size = 30; } else if (language === "Filipino") { size = 20; } if (!startGame && this.y < 400) { textAlign(CENTER, CENTER); fill(255, 255, 255); textSize(size); text(chgLan("START", "SIMULAN"), this.x + this.w / 2, this.y + this.h / 2); } }; tiles.prototype.placeTile = function () { if (this.lane === 0) { this.x = 0; } else if (this.lane === 1) { this.x = 100; } else if (this.lane === 2) { this.x = 200; } else if (this.lane === 3) { this.x = 300; } }; tiles.prototype.animate = function (gamePlay) { //ANIMATE for (var i = 0; i < 250; i++) { if (score === i * 5) { this.speed += 0.0035 * i; } } if (startGame && !endGame) { this.y += this.speed; } //REPLACE var replacePos; for (var i = 0; i <= 3; i++) { if (score >= 35 * i && score < 35 * (i + 1)) { replacePos = 500 + 10 * (i + 1); } } if (this.y > replacePos) { this.y = -this.h; if (gamePlay) { this.placeTile(); this.pressed = false; //reset } } }; //EARLY RANDOMIZATION for (var i = 0; i < playTiles.length; i++) { playTiles[i].lane = floor(random(3)); if (i === 0) { while (playTiles[i].lane === playTiles[3].lane) { playTiles[i].lane = floor(random(3)); } } if (i > 0) { while (playTiles[i].lane === playTiles[i - 1].lane) { playTiles[i].lane = floor(random(3)); } } playTiles[i].placeTile(); } var panel = function (config) { this.x = config.x \|\| 10; this.y = config.y; this.w = config.w \|\| 380; this.h = config.h \|\| 90; //HOME SCENE this.currentMusic = "1. Canon"; this.anm = "down"; //up, down this.textY = null; //htpPanel text //LEADERBOARD SCENE this.yPos = 0; }; var titlePanel = new panel({ y: 110, h: 75 }); var htpPanel = new panel({ y: 195, h: 100 }); var aboutPanel = new panel({ y: 307, h: 100 }); var plyPanel = new panel({ x: -10, y: 0, w: width + 20, h: 100 }); var musicPanel = [new panel({ y: 20 }), new panel({ y: 120 }), new panel({ y: 220 })]; var topPanel = new panel({}); var leaderPanel = [new panel({}), new panel({}), new panel({}), new panel({}), new panel({}), new panel({}), new panel({}), new panel({}), new panel({}), new panel({}), new panel({}), new panel({}), new panel({}), new panel({}), new panel({}), new panel({}), new panel({}), new panel({}), new panel({}), new panel({}), new panel({}), new panel({}), new panel({}), new panel({}), new panel({}), new panel({})]; var faqPanel = new panel({ y: 20, h: 75 }); var languagePanel = new panel({ y: 105, h: 75 }); var versionPanel = new panel({ y: 190, h: 75 }); panel.prototype.isMouseInside = function () { return mouseX >= this.x && mouseX <= this.x + this.w && mouseY >= this.y && mouseY <= this.y + this.h; }; panel.prototype.home = function (elmName) { var size; if (language === "English") { size = 23; } else if (language === "Filipino") { size = 19; } //BACKGROUND if (this.isMouseInside()) { fill(240, 240, 240); } else { fill(247, 247, 247); } noStroke(); rect(this.x, this.y, this.w, this.h, 15); //ELEMENTS if (elmName === "play") { //BACKGROUND fill(66, 139, 255); rect(this.x, this.y, this.w, this.h, 15); //CHANGE MUSIC TITLE var music = ["1. Canon", "2. Faded", chgLan("3. Happy New Year", "3.Maligayang Bagong Taon")]; var mscSize = 35; for (var i = 0; i < selectButton.length; i++) { if (selectButton[i].pressed) { this.currentMusic = music[i]; if (this.currentMusic === "3.Maligayang Bagong Taon") { mscSize = 30; } else { mscSize = 35; } } } //CONTENT fill(255, 255, 255); textFont(createFont("fantasy"), mscSize); textAlign(CENTER, CENTER); text(this.currentMusic, 200, this.y + 30); playButton.panel("home-play"); } else if (elmName === "title") { //TEXT fill(0, 43, 112); textFont(createFont("fantasy"), size); textAlign(CORNER, CENTER); text(chgLan("Presenting to you Piano Tiles!", "Paghaharap sa iyo ng Mga Piano Tile!"), this.x + 60, this.y + 25); fill(143, 143, 143); textFont(createFont("cursive"), 13); text(chgLan("Developed by Kevin", "Binuo ni Kevin"), this.x + 60, this.y + 50); //PICTURE: PIANO TILES LOGO noFill(); stroke(8, 0, 97); rect(this.x + 14, this.y + 14, 35, 35, 5); fill(8, 0, 97); rect(this.x + 15, this.y + 15, 17, 17); rect(this.x + 32, this.y + 32, 17, 17); } else if (elmName === "how-to-play") { var yDiff; if (language === "English") { yDiff = 30; } else if (language === "Filipino") { yDiff = 20; } //TITLE fill(0, 43, 112); textFont(createFont("fantasy"), size); textAlign(CORNER, CENTER); text(chgLan("Read to know how to play", "Basahin upang malaman kung paano maglaro"), this.x + 60, this.y + 30 - yDiff, 300, 50); //PICTURE fill(101, 16, 204); ellipse(this.x + 14 + 35 / 2, this.y + 14 + 35 / 2, 35, 35); fill(235, 235, 235); textAlign(CENTER, CENTER); text("?", this.x + 15 + 35 / 2, this.y + 13 + 35 / 2); //BUTTON AND TEXT if (this.anm === "down" && this.h < 110) { lrnMrButton[0].panel("learn-more"); } else if (this.anm === "up" && this.h > 135) { fill(56, 56, 56); textFont(createFont("sans-serif"), 15); textAlign(CORNER, CORNER); text(chgLan("Tap on the black tiles as they appear from the top of the screen while avoiding the rest.", "Tapikin ang mga itim na tile bilang lilitaw mula sa tuktok ng screen habang iniiwasan ang natitira."), 70, this.textY, 300, 50); closeButton[0].panel("close"); } } else if (elmName === "about") { //TITLE fill(0, 43, 112); textFont(createFont("fantasy"), size); textAlign(CORNER, CENTER); text(chgLan("View the details of this game", "Tingnan ang mga detalye ng larong ito"), this.x + 60, this.y + 30); //PICTURE fill(31, 184, 54); ellipse(this.x + 14 + 35 / 2, this.y + 14 + 35 / 2, 35, 35); fill(235, 235, 235); textAlign(CENTER, CENTER); text("i", this.x + 14 + 35 / 2, this.y + 13 + 35 / 2); //BUTTON AND TEXT if (this.anm === "down") { lrnMrButton[1].panel("learn-more"); } else if (this.anm === "up" && this.h > 135) { fill(56, 56, 56); textFont(createFont("sans-serif"), 15); textAlign(CORNER, CORNER); text(chgLan("Launched on 2021, this game is the modest recreation of Piano Tiles 2, which was originally launched on August 19, 2015.", "Inilunsad noong 2021, ang larong ito ay ang katamtaman na libangan ng Piano Tiles 2, na orihinal na inilunsad noong Agosto 19, 2015."), 70, 320, 300, 50); closeButton[1].panel("close"); } } }; var animatePanel = function () { htpPanel.textY = htpPanel.y + 65; if (htpPanel.anm === "down") { if (aboutPanel.anm === "down") { //ANIMATE PANEL if (titlePanel.y < 110) { titlePanel.y += 5; } else { titlePanel.y = 110; } if (htpPanel.y < 195) { htpPanel.y += 5; } else { htpPanel.y = 195; } if (aboutPanel.y < 307) { aboutPanel.y += 5; } else { aboutPanel.y = 307; } if (htpPanel.h > 100) { htpPanel.h -= 5; } else { htpPanel.h = 100; } if (aboutPanel.h > 100) { aboutPanel.h -= 5; } else { aboutPanel.h = 100; } //ANIMATE BUTTON if (lrnMrButton[0].y < 247) { lrnMrButton[0].y += 5; } else { lrnMrButton[0].y = 247; } } else { //ANIMATE PANEL if (titlePanel.y > 70) { titlePanel.y -= 5; } else if (titlePanel.y < 70) { titlePanel.y += 5; } else { titlePanel.y = 70; } if (htpPanel.y > 155) { htpPanel.y -= 5; } else if (htpPanel.y < 155) { htpPanel.y += 5; } else { htpPanel.y = 155; } if (aboutPanel.y > 262) { aboutPanel.y -= 5; } else { aboutPanel.y = 262; } if (htpPanel.h > 100) { htpPanel.h -= 5; } else { htpPanel.h = 100; } if (aboutPanel.h < 145) { aboutPanel.h += 5; } else { aboutPanel.h = 145; } //ANIMATE BUTTON if (lrnMrButton[0].y > 207) { lrnMrButton[0].y -= 5; } else { lrnMrButton[0].y = 207; } closeButton[0].y = 265; } } else { if (aboutPanel.anm === "down") { //ANIMATE PANEL if (titlePanel.y > 65) { titlePanel.y -= 5; } else if (titlePanel.y < 65) { titlePanel.y += 5; } else { titlePanel.y = 65; } if (htpPanel.y > 150) { htpPanel.y -= 5; } else if (htpPanel.y < 150) { htpPanel.y += 5; } else { htpPanel.y = 150; } if (aboutPanel.y < 307) { aboutPanel.y += 5; } else { aboutPanel.y = 307; } if (htpPanel.h < 145) { htpPanel.h += 5; } else { htpPanel.h = 145; } if (aboutPanel.h > 100) { aboutPanel.h -= 5; } else { aboutPanel.h = 100; } //ANIMATE BUTTON if (closeButton[0].y < 265) { closeButton[0].y += 5; } else { closeButton[0].y = 265; } } else { //ANIMATE PANEL if (titlePanel.y > 25) { titlePanel.y -= 5; } else { titlePanel.y = 25; } if (htpPanel.y > 105) { htpPanel.y -= 5; } else { htpPanel.y = 105; } if (aboutPanel.y > 262) { aboutPanel.y -= 5; } else { aboutPanel.y = 262; } if (htpPanel.h < 145) { htpPanel.h += 5; } else { htpPanel.h = 145; } if (aboutPanel.h < 145) { aboutPanel.h += 5; } else { aboutPanel.h = 145; } //ANIMATE BUTTON if (closeButton[0].y > 220) { closeButton[0].y -= 5; } else { closeButton[0].y = 220; } } } }; panel.prototype.music = function (num, music) { var size; if (language === "English") { size = 27; } else if (language === "Filipino") { size = 25; } //BACKGROUND if (this.isMouseInside()) { fill(240, 240, 240); } else { fill(247, 247, 247); } noStroke(); rect(this.x, this.y, this.w, this.h, 15); if (this.isMouseInside()) { fill(242, 163, 7); } else { fill(249, 166, 2); } rect(this.x, this.y, 80, this.h, 15); rect(this.x + 10, this.y, 70, this.h); //cover //TEXT fill(235, 235, 235); textFont(createFont("sans-serif"), 30); textAlign(CENTER, CENTER); text(num, this.x + 20, this.y + 25); fill(33, 33, 33); textFont(createFont("fantasy"), size); textAlign(CORNER, CORNER); text(music[num - 1], this.x + 90, this.y + 35 * size/27); //BUTTON mscPlayButton[num - 1].panel("music-play"); selectButton[num - 1].panel("select"); }; panel.prototype.leaderBoard = function(type, num) { if (type === "leaderboard") { pushMatrix(); translate(0, this.yPos); var y = 110 + 100 * num; var panelColour; var textX, textSize, textColour; var profileX, profileSize; var nameSize; this.y = this.yPos + y; this.h = 80; if (num === 0) { panelColour = color(255, 204, 150); textX = this.x + 25; textSize = 45; textColour = color(255, 255, 255); profileX = this.x + 96; profileSize = 37; nameSize = textSize - 13; } else { if (this.isMouseInside()) { panelColour = color(240, 240, 240); } else { panelColour = color(247, 247, 247); } textX = this.x + 20; if (num < 3) { textSize = 37; textColour = color(255, 255, 255); } else { textSize = 34; textColour = color(130, 130, 130); } profileX = this.x + 95; profileSize = 35; if (leader.names[num] === "₱ⱤØ₲Ɽ₳₥₥ł₦₲ ₭ł₦₲") { nameSize = textSize - 18; } else if (leader.names[num] === "քʀօӼɨʍǟ #RivalsFTW" \|\| leader.names[num] === "Karanjot Singh {Read Bio}") { nameSize = textSize - 16; } else if (leader.names[num] === "joe song#Ravenclaw4thewin#TEE") { nameSize = textSize - 20; } else if (leader.names[num] === "(っ◔◡◔)っ♥ Ani:3^w^ ♥") { nameSize = textSize - 17; } else if (leader.names[num] === "Canada Goose #FrostineFTW") { nameSize = textSize - 18; } else { nameSize = textSize - 13; } } //BACKGROUND fill(panelColour); noStroke(); rect(this.x, y, this.w, 80, 15); //LEFT SIDE COVER AND NUMBER if (num === 0) { fill(249, 166, 2); rect(this.x, y, 60, 80, 15); rect(this.x + 20, y, 40, 80); triangle(this.x + 60, y, this.x + 60, y + 80, this.x +80, y); } else if (num === 1 \|\| num === 2) { var colour; if (num === 1) { colour = color(0, 96, 225); } else { colour = color(192, 86, 72); } fill(colour); rect(this.x, y, 45, 80, 15); rect(this.x + 20, y, 25, 80); triangle(this.x + 45, y, this.x + 45, y + 80, this.x + 65, y); } fill(textColour); textAlign(CORNER, CENTER); textFont(createFont("fantasy"), textSize); text(num + 1, textX, y + 40); //USER PROFILE PICTURES, NAMES AND SCORES fill(0, 43, 112); textFont(createFont("fantasy"), nameSize); textAlign(CORNER, CENTER); text(leader.names[num], this.x + 120, y - 10, 200, 80); fill(0, 56, 145); textAlign(CENTER, CENTER); textFont(createFont("fantasy"), textSize - 13); text(leader.score[num], this.x + 315, y - 10, 50, 80); noFill(); stroke(0, 56, 145); ellipse(profileX, y + 35, profileSize, profileSize); imageMode(CENTER); image(leader.pict[num], profileX, y + 35, profileSize - 10, profileSize - 10); popMatrix(); } else if (type === "top") { //BACKGROUND noStroke(); fill(146, 91, 240); rect(0, leaderPanel[0].yPos, width, 150); //TEXT fill(255, 255, 255); textFont(createFont("fantasy"), 35); text("Pianist LeaderBoard", 200, leaderPanel[0].yPos + 70); textAlign(CORNER, CENTER); fill(222, 222, 222); textFont(createFont("sans-serif"), 12); text(chgLan("Press the UP or DOWN key to scroll.", "Pindutin ang UP o Down key upang mag-scroll."), 20, leaderPanel[0].yPos + 20); } }; panel.prototype.settings = function(elmName, lanChange) { //BACKGROUND if (this.isMouseInside()) { fill(240, 240, 240); } else { fill(247, 247, 247); } rect(this.x, this.y, this.w, this.h, 15); //TEXT fill(0, 43, 112); textAlign(CORNER, CENTER); textFont(createFont("fantasy"), 23); text(lanChange, this.x + 65, this.y + this.h/2); //ELEMENTS if (elmName === "FAQ & Support") { fill(231, 84, 128); rect(this.x + 23, this.y + 25, 28, 17); triangle(this.x + 28, this.y + 42, this.x + 38, this.y + 42, this.x + 25, this.y + 50); } else if (elmName === "Language") { fill(240, 94, 35); ellipse(this.x + 36, this.y + 39, 32, 32); fill(230, 230, 230); textFont(createFont("serif"), 9); textAlign(CENTER, CENTER); text("文", this.x + 32, this.y + 37); textSize(15); text("A", this.x + 40, this.y + 41); } else if (elmName === "Version") { fill(12, 176, 18); textFont(createFont("serif Bold"), 35); text("i", this.x + 31, this.y + this.h/2); fill(0, 43, 112); textAlign(CENTER, CENTER); textFont(createFont("monospace"), 23); text("2.0", 345, this.y + this.h/2); } }; var notification = function (config) { this.x = 200; this.y = 200; this.w = 325; this.h = 200; this.open = false; }; var faqNotif = new notification({}); var languageNotif = new notification({}); var downNotif = new notification({}); var upNotif = new notification({}); notification.prototype.draw = function(elmName) { var title; if (this.open) { //BACKGROUND fill(0, 0, 0, 75); rectMode(CORNER); rect(0, 0, width, height); //MAIN RECT fill(247, 247, 247); noStroke(); rectMode(CENTER); rect(this.x, this.y, this.w, this.h, 15); strokeWeight(1); stroke(0, 0, 0); line(this.x - this.w/2 + 1, this.y - 30, this.x + this.w/2 - 1, this.y - 30); //CONTENT if (elmName === "faq-and-support") { title = "Oh Noes!"; //PARAGRAPH fill(0, 0, 0); textAlign(CORNER, CENTER); textFont(createFont("sans-serif"), 17); text(chgLan("Your request to open FAQ & Support\nis denied because it is currently\nunavailable.", "Ang iyong kahilingan upang buksan\nang FAQ & Suporta ay tinanggihan\nsapagkat ito ay kasalukuyang hindi\nmagagamit."), this.x - 135, this.y + 30); } else if (elmName === "language") { title = chgLan("Language", "Wika"); //LANGUAGE BUTTONS englishButton.notification("language", "English"); filipinoButton.notification("language", "Filipino"); fill(0, 0, 0); textAlign(CORNER, CENTER); textFont(createFont("sans-serif"), 19); text("English (US)", 100, 210); text(chgLan("Filipino", "Pilipino"), 100, 250); } fill(0, 0, 0); textAlign(CORNER, CENTER); textFont(createFont("fantasy"), 30); text(title, this.x - 135, this.y - 65); //CLOSE BUTTON CloseButton.notification("close"); } }; notification.prototype.leadMove = function(direction) { fill(176, 7, 176, 150); ellipse(355, 386, 43, 43); fill(255, 255, 255); textSize(32); if (direction === "down") { text("⬇", 355, 386); } else if (direction === "up") { text("⬆", 355, 385); } }; var highScore = 0; var drawBest = false; var drawNewBest = function() { var size; if (language === "English") { size = 18; } else if (language === "Filipino") { size = 15; } if (drawBest) { fill(0, 128, 255); rectMode(CENTER); rect(325, 222, 80, 45); ellipse(325 - 40, 222, 35, 45); ellipse(325 + 40, 222, 35, 45); fill(230, 230, 230); textFont(createFont("fantasy"), size); text(chgLan("NEW BEST", "BAGONG PINAKA"), 326, 223); } }; var gradient = { background: 0, // will become an image as drawBackgound is ran panel: 0 }; var drawBackground = function () { imageMode(CORNER); if (gradient.background === 0) { // if VAR is 0 run that code once var r = 242; var g = 162; var b = 238; for (var i = 0; i < 500; i += 15) { r -= 4; g += 2; b += 0.75; noStroke(); fill(r, g, b); rect(0, 0 + i, width, 15); } gradient.background = get(); // after running it once change VAR from 0 to the current background } else { // when VAR is not 0 it is an image image(gradient.background, 0, 0); // call that image at 0 0 provided imageMode is the usual } }; var decoration = function (config) { this.x = config.x \|\| random(10, 290); this.y = config.y \|\| random(200, 600); this.size = config.size \|\| random(20, 60); this.opacity = config.opacity \|\| random(10, 30); this.speed = config.speed \|\| random(1); }; decoration.prototype.move = function () { //ANIMATE if (this.y > 505) { this.y -= 5; } else { this.y -= this.speed; } if (this.y < -10) { this.y = 500; } //DRAW noStroke(); fill(255, 255, 255, 25); ellipse(this.x, this.y, this.size, this.size); }; decoration.prototype.pop = function () { this.opacity += this.speed; if (this.opacity > 30) { this.speed = random(-2, -1); } if (this.opacity < random(-35, -25)) { this.speed = random(0.5, 1); } noStroke(); fill(255, 255, 255, this.opacity); ellipse(this.x, this.y, this.size, this.size); }; var bubbles = [new decoration({}), new decoration({}), new decoration({}), new decoration({}), new decoration({}), new decoration({}), new decoration({}), new decoration({}), new decoration({}), new decoration({}), new decoration({}), new decoration({}), new decoration({}), new decoration({}), new decoration({}), new decoration({}), new decoration({}), new decoration({}), new decoration({}), new decoration({}), new decoration({}), new decoration({}), new decoration({}), new decoration({}), new decoration({})]; var bigEllipse = [new decoration({ x: 200, y: 200, size: 150 }), new decoration({ x: 320, y: 175, size: 115 }), new decoration({ x: 315, y: 400, size: 155 }), new decoration({ x: 100, y: 395, size: 100 }), new decoration({ x: 75, y: 95, size: 115 })]; var endSceneCover = new decoration({ opacity: 250 }); var star = { x: [90, 167, 244], y: [125, 120, 125], colour: [color(91, 88, 138), color(91, 88, 138), color(91, 88, 138)], size: 0.9 }; var drawStar = function (which, num) { var x, y, colour; if (which === "music-scene") { x = musicPanel[num].x + 30; y = musicPanel[num].y + 65; star.size = 1; colour = color(255, 200, 49); noStroke(); } else if (which === "end-game-scene") { x = star.x[num]; y = star.y[num]; star.size = 0.9; colour = star.colour[num]; } fill(colour); beginShape(); vertex(x, y); vertex(x + 25 * star.size, y + 10 * star.size); if (which === "music-scene") { vertex(x + 32 * star.size, y + 25 * star.size); vertex(x + 38 * star.size, y + 25 * star.size); } if (which === "end-game-scene") { vertex(x + 35 * star.size, y + 35 * star.size); } vertex(x + 45 * star.size, y + 10 * star.size); if (which === "music-scene") { vertex(x + 50 * star.size, y + 5); vertex(x + 50 * star.size, y - 5); } if (which === "end-game-scene") { vertex(x + 70 * star.size, y); } vertex(x + 45 * star.size, y - 10 * star.size); vertex(x + 35 * star.size, y - 35 * star.size); vertex(x + 25 * star.size, y - 10 * star.size); vertex(x, y); endShape(); }; var detectEndGame = function () { //when player fails to press the tile before it reaches the bottom //when player touches the screen without tiles: inside mousePressed function for (var i = 0; i < playTiles.length; i++) { if (!playTiles[i].pressed && playTiles[i].y > 500 - 500/3 + 60) { endGame = true; loseType = "forgot-press"; } } }; var restart = false; var launchRestart = function () { if (restart) { startGame = false; endGame = false; loseType = null; score = 0; drawBest = false; //TILES var yPos = [500 - 500 / 3, 500 - 500 / 3, 500 - 500 / 3, 500 - 500 / 3, 500 - 1000 / 3, 500 - 1000 / 3, 500 - 1000 / 3, 500 - 1000 / 3, 500 - 1500 / 3, 500 - 1500 / 3, 500 - 1500 / 3, 500 - 1500 / 3, 500 - 2000 / 3, 500 - 2000 / 3, 500 - 2000 / 3, 500 - 2000 / 3]; for (var i = 0; i < playTiles.length; i++) { playTiles[i].lane = floor(random(3)); if (i === 0) { while (playTiles[i].lane === playTiles[3].lane) { playTiles[i].lane = floor(random(3)); } } if (i > 0) { while (playTiles[i].lane === playTiles[i - 1].lane) { playTiles[i].lane = floor(random(3)); } } playTiles[i].placeTile(); playTiles[i].y = yPos[i * 5]; playTiles[i].colour = color(0, 0, 0); playTiles[i].speed = 5; playTiles[i].pressed = false; playTiles[i].anmTime = 0; } for (var i = 0; i < endGameTiles.length; i++) { endGameTiles[i].y = yPos[i]; endGameTiles[i].colour = color(255, 0, 0); endGameTiles[i].speed = 5; endGameTiles[i].pressed = false; endGameTiles[i].drawEnd = false; endGameTiles[i].anmTime = 0; } endSceneCover.opacity = 255; currentScene = 1; restart = false; } }; //} VARIABLES //{ var sceneTemplate = function (scene, menu, type) { currentScene = scene; background(255, 255, 255); drawBackground(); if (menu) { drawMenuButtons(); currentMenu = type; } }; var endGameScene = function () { sceneTemplate(2, false); //HIGHcSCORE if (score > highScore) { highScore = score; drawBest = true; } drawNewBest(); //DECORATIONS for (var i = 0; i < bigEllipse.length; i++) { bigEllipse[i].pop(); } //STARS if (score >= 35 && score < 50) { star.colour[0] = color(230, 149, 0); } else if (score >= 50 && score < 70) { star.colour[0] = color(230, 149, 0); star.colour[1] = color(230, 149, 0); } else if (score >= 70) { star.colour[0] = color(230, 149, 0); star.colour[1] = color(230, 149, 0); star.colour[2] = color(230, 149, 0); } for (var i = 0; i < star.x.length; i++) { drawStar("end-game-scene", i); } //TEXT fill(255, 255, 255); textAlign(CENTER, CENTER); textFont(createFont("serif", 20)); text("Piano Tiles", 200, 60); fill(25, 19, 135); textFont(createFont("sans-serif"), 110); text(score, 204, 222); fill(255, 255, 255); text(score, 200, 220); fill(0, 0, 0); textSize(25); text(chgLan("Best Score: ", "Pinakamataas na puntos: ") + highScore, 200, 295); //BUTTONS fill(247, 247, 247); rectMode(CORNER); ellipse(200, 375, width, 40); rect(0, 375, width, 125); replayButton.endGame("restart"); menuButton.endGame("menu"); leaderButton.endGame("leaderBoard"); //COVER if (endSceneCover.opacity > -5) { endSceneCover.opacity -= 8; } noStroke(); fill(255, 255, 255, endSceneCover.opacity); rect(0, 0, width, height); //RESTART launchRestart(); }; var playScene = function () { sceneTemplate(1, false); launchRestart(); //DECORATIONS for (var i = 0; i < bigEllipse.length; i++) { bigEllipse[i].pop(); } for (var i = 0; i < bubbles.length; i++) { bubbles[i].move(); } //TILES for (var i = 0; i < playTiles.length; i++) { //DRAW playTiles[i].draw("play"); //RANDOMIZE TILES POSITION if (playTiles[i].y > 500) { playTiles[i].lane = floor(random(3)); if (i === 0) { while (playTiles[i].lane === playTiles[3].lane) { playTiles[i].lane = floor(random(3)); } } if (i > 0) { while (playTiles[i].lane === playTiles[i - 1].lane) { playTiles[i].lane = floor(random(3)); } } } //ANIMATE AND REPLACE playTiles[i].animate(true); } playTiles[0].drawStart(); for (var i = 0; i < endGameTiles.length; i++) { endGameTiles[i].animate(false); if (endGameTiles[i].drawEnd) { endGameTiles[i].draw("end-game"); } } //OTHERS //WHITE LINES for (var i = 1; i <= 3; i++) { stroke(255, 255, 255); strokeWeight(1); line(100 * i, 0, 100 * i, 500); } //SCORE textAlign(CENTER, CENTER); textFont(createFont("sans-serif"), 60); fill(255, 0, 0); text(score, 200, 50); //END GAME detectEndGame(); //CHANGE SCENE AFTER END GAME if (endGame) { for (var i = 0; i < playTiles.length; i++) { if (loseType === "forgot-press" && playTiles[i].anmTime > 7) { endGameScene(); } } for (var i = 0; i < endGameTiles.length; i++) { if (loseType === "wrong-press" && endGameTiles[i].anmTime > 7) { endGameScene(); } } } }; var homeScene = function () { sceneTemplate(3, true, "Home"); titlePanel.home("title"); htpPanel.home("how-to-play"); aboutPanel.home("about"); plyPanel.home("play"); animatePanel(); }; var musicScene = function () { sceneTemplate(4, true, "Music"); for (var i = 0; i < musicPanel.length; i++) { musicPanel[i].music(i + 1, ["Canon", "Faded", chgLan("Happy New Year", "Maligayang Bagong Taon")]); drawStar("music-scene", i); } }; var leaderScene = function () { sceneTemplate(5, true, "LeaderBoard"); topPanel.leaderBoard("top"); for (var i = 0; i < leaderPanel.length; i++) { leaderPanel[i].leaderBoard("leaderboard", i); } drawMenuButtons(); if (leaderPanel[0].yPos === 0) { downNotif.leadMove("down"); } else if (leaderPanel[0].yPos === -1590) { upNotif.leadMove("up"); } //UI if (keyIsPressed) { for (var i = 0; i < leaderPanel.length; i ++) { var limit = ((leaderPanel.length - 2) * -100) - 90; if (keyCode === 40) { if (leaderPanel[i].yPos > limit) { leaderPanel[i].yPos -= 7; } else { leaderPanel[i].yPos = limit; } } else if (keyCode === 38) { if (leaderPanel[i].yPos < 0) { leaderPanel[i].yPos+= 7; } else { leaderPanel[i].yPos = 0; } } } } }; var settingsScene = function () { sceneTemplate(6, true, "Settings"); faqPanel.settings("FAQ & Support", chgLan("FAQ & Support", "FAQ & Suporta")); languagePanel.settings("Language", chgLan("Laguage", "Wika")); versionPanel.settings("Version", chgLan("Version", "Bersyon")); for (var i = 0; i < openButton.length; i++) { openButton[i].panel("settings-open"); } faqNotif.draw("faq-and-support"); languageNotif.draw("language"); }; //} SCENES //{ draw = function () { //DRAW if (currentScene === 1) { playScene(); } else if (currentScene === 2) { endGameScene(); } else if (currentScene === 3) { homeScene(); } else if (currentScene === 4) { musicScene(); } else if (currentScene === 5) { leaderScene(); } else if (currentScene === 6) { settingsScene(); } //RESET POSITION if (currentScene !== 3) { htpPanel.anm = "down"; aboutPanel.anm = "down"; } if (currentScene !== 5) { for (var i = 0; i < leaderPanel.length; i++) { leaderPanel[i].yPos = 0; } } }; mousePressed = function () { if (currentScene === 1) { //EARLY GAME if (playTiles[0].isMouseInside() && !endGame) { startGame = true; if (!playTiles[0].pressed) { score += 1; } playTiles[0].pressed = true; } //GAME PLAY for (var i = 0; i < playTiles.length; i++) { if (playTiles[i].isMouseInside() && startGame && !endGame) { if (!playTiles[i].pressed) { score += 1; } playTiles[i].pressed = true; } } //DETECT END //when player touches the screen without tiles if ((playTiles[0].isMouseInside() \|\| playTiles[1].isMouseInside() \|\| playTiles[2].isMouseInside() \|\| playTiles[3].isMouseInside())) { endGame = false; } else { if (startGame && !endGame) { endGame = true; if (loseType !== "forgot-press") { loseType = "wrong-press"; } //ANIMATE TILE if (startGame && endGame && loseType === "wrong-press") { for (var i = 0; i < endGameTiles.length; i++) { if (endGameTiles[i].isMouseInside()) { if (!endGameTiles[0].drawEnd && !endGameTiles[1].drawEnd && !endGameTiles[2].drawEnd && !endGameTiles[3].drawEnd && !endGameTiles[4].drawEnd && !endGameTiles[5].drawEnd && !endGameTiles[6].drawEnd && !endGameTiles[7].drawEnd && !endGameTiles[8].drawEnd && !endGameTiles[9].drawEnd && !endGameTiles[10].drawEnd && !endGameTiles[11].drawEnd && !endGameTiles[12].drawEnd && !endGameTiles[13].drawEnd && !endGameTiles[14].drawEnd && !endGameTiles[15].drawEnd) { endGameTiles[i].drawEnd = true; } } } } } } } }; mouseClicked = function () { if (currentScene === 2) { if (replayButton.isMouseInside() && endGame) { restart = true; } else if (menuButton.isMouseInside()) { musicScene(); } else if (leaderButton.isMouseInside()) { leaderScene(); } } else if (currentScene >= 3 && currentScene <= 6) { if (!faqNotif.open && !languageNotif.open) { if (homeButton.isMouseInside()) { homeScene(); } else if (musicButton.isMouseInside()) { musicScene(); } else if (settingsButton.isMouseInside()) { settingsScene(); } else if (leaderBoardButton.isMouseInside()) { leaderScene(); } } if (currentScene === 3) { if (playButton.isMouseInside()) { playScene(); if (endGame) { restart = true; } } if (lrnMrButton[0].isMouseInside() && htpPanel.anm === "down") { htpPanel.anm = "up"; } else if (lrnMrButton[1].isMouseInside() && aboutPanel.anm === "down") { aboutPanel.anm = "up"; } if (closeButton[0].isMouseInside() && htpPanel.anm === "up") { htpPanel.anm = "down"; } else if (closeButton[1].isMouseInside() && aboutPanel.anm === "up") { aboutPanel.anm = "down"; } } else if (currentScene === 4) { for (var i = 0; i < mscPlayButton.length; i++) { if (mscPlayButton[i].isMouseInside()) { playScene(); if (endGame) { restart = true; } } } if (selectButton[0].isMouseInside()) { selectButton[0].pressed = true; selectButton[1].pressed = false; selectButton[2].pressed = false; } else if (selectButton[1].isMouseInside()) { selectButton[1].pressed = true; selectButton[0].pressed = false; selectButton[2].pressed = false; } else if (selectButton[2].isMouseInside()) { selectButton[2].pressed = true; selectButton[0].pressed = false; selectButton[1].pressed = false; } } else if (currentScene === 6) { if (openButton[0].isMouseInside() && !faqNotif.open && !languageNotif.open) { faqNotif.open = true; } else if (openButton[1].isMouseInside() && !faqNotif.open && !languageNotif.open) { languageNotif.open = true; } else if (CloseButton.isMouseInside()) { faqNotif.open = false; languageNotif.open = false; } else if (englishButton.isMouseInside() && languageNotif.open) { language = "English"; } else if (filipinoButton.isMouseInside() && languageNotif.open) { language = "Filipino"; } } } }; //} ANIMATION AND UI
Folds	17,1346,1347,1563,1564,1717
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgL342NupCAw
Votes	221
Spin-Offs	0
Type	PJS
Width	400
Height	500
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Kevin W
Author Name	KevinWijaya15
Author ID	kaid_80690558755794815547379
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739366381552
Updated	10 months ago, 1739366443205
Source Deleted	unknown