Viewing Program

Program Data

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

Title	Breakout
ID	6637034814324736
Created	5 years ago, 1582047223239
Updated	5 years ago, 1582229777197
Code	//Breakout //INFORMATION //{ /** BRIEF DESCRIPTION */ / Breakout was released in 1976. This game is similar to Pong, except instead of trying to deflect the ball to the other side, your goal is to destroy all the blocks present. / /* CHANGES */ / * This version of Breakout is a bit more modern and has a few different gamemodes, but the basic gameplay is still the same. / /* CONTROLS (also seen on how screen) */ / * LEFT or a to move left * RIGHT or d to move right / /* CREDITS */ / * Breakout was created by Steve Wozniak (and Steve Jobs?) * Collisions based on Image Breakout by Google * Other credits are attributed beside their respective pieces of code. (I apologise if I have gotten certain pieces of information wrong or if I have ruined certain aspects of the original game for you.) (I also apologies to other people who have also remade Breakout for probably copying the idea of remaking Breakout.) / / A little note that I may keep working on this project as I have a few other ideas for this, so it is not fully finished. I plan on further developing on this in the future. This could be a basic layout on what the full version may have in the future (if I finish it). For now, enjoy what is there. / / I've been programming 39-40 months, and I have learned 90-100% of Intro to JS. I would prefer to be placed in the Advanced bracket. / //} //CODE STARTS HERE //{ /* SOME STARTING CODE / //{ //Smooth graphics smooth(); //No stroke noStroke(); //Frame rate frameRate(60); //rectMode rectMode(CORNER); //angleMode angleMode = "degrees"; //imageMode imageMode(CENTER); //Key variables var typed = false; //Are you pressing a key? / I saw this from Tesla Runner's (Elijah Daniels) program, "The Platformer Game" Link: https://www.khanacademy.org/computer-programming/the-platformer-game/6103108695 / var keys = []; keyPressed = function() { keys[keyCode] = true; typed = true; }; //Pressing keys keyReleased = function() { keys[keyCode] = false; typed = false; }; //Not pressing keys //Mouse variables var clicked = false; //Mouse being clicked mouseClicked = function() { clicked = true; }; //} / IMAGES / //{ //Pixel art function var pixelArt = function(args) { //Get some properties / SOME INFORMATION ON VARIABLES: colourPalette should be an object ({}). It should look something like this: { "1": color(0), "2": color(0), ... etc } Each key in the object should be a number in quotes (because your layout will be a multidimensional array with numbers in it, so using the numbers to access the object will make getting the correct colours easier) and the values should be colours. Since pixelLayout will look something like this: [ [0, 0, 1, 1, 0, 0], [1, 1, 0, 0, 1, 1], ... etc ] when looping through the array, we can get the value inside the element and use it to access colourPalette. For example, say the value was 1. When we input it to colourPalette like this: colourPalette[1] we can access the colour that has beeen assigned with 1. / / { colours: { "0": color(0, 0, 0, 1), "1": color(0), }, layout: [ "" ], size: 0, pos: [0, 0] } / var colourPalette = args.colours; var pixelLayout = args.layout; var pixelSize = args.size; var pixelPos = args.pos; //Loop through each element in the grid for (var i = 0; i < pixelLayout.length; i++) { for (var j = 0; j < pixelLayout[i].length; j++) { //Colour / Notice how the colour was obtained here. We get the value of pixelLayout[i][j] and use it in this line to get the value that has been assigned to the value of pixelLayout[i][j]. */ noStroke(); fill(colourPalette[pixelLayout[i][j]]); //Draw pixel rectMode(CORNER); rect(pixelPos[0] + (j pixelSize), pixelPos[1] + (i * pixelSize), pixelSize, pixelSize); } } }; //Images var images = { //Khan Academy Logo kaLogo: (function() { //Transparent background background(0, 0, 0, 0); //Logo pixelArt({ colours: { "0": color(0, 0, 0, 1), "a": color(255, 255, 255), "k": color(27, 242, 156) }, layout: [ "00000000kk00000000", "000000kkkkkk000000", "0000kkkkkkkkkk0000", "00kkkkkkkkkkkkkk00", "kkkkkkkkaakkkkkkkk", "kkkkkkkaaaakkkkkkk", "kkkkkkaaaaaakkkkkk", "kkkkkkkaaaakkkkkkk", "kkkkkkkkaakkkkkkkk", "kkkaakkkkkkkkaakkk", "kkkaaakkkkkkaaakkk", "kkkaaaakkkkaaaakkk", "kkkaaaaakkaaaaakkk", "kkkkaaaakkaaaakkkk", "kkkkkaaaaaaaakkkkk", "kkkkkkkaaaakkkkkkk", "00kkkkkkkkkkkkkk00", "0000kkkkkkkkkk0000", "000000kkkkkk000000", "00000000kk00000000", ], size: 3, pos: [0, 0] }); return get(0, 0, 54, 60); })(), //Breakout logo breakoutLogo: (function() { //Transparent background background(0, 0, 0, 0); //Logo pixelArt({ colours: { //White "1": color(255), "2": color(200), //Red "3": color(199, 0, 0), "4": color(184, 63, 63), //Orange "5": color(255, 132, 0), "6": color(240, 178, 72), //Yellow "7": color(255, 234, 0), "8": color(255, 248, 110), //Green "9": color(51, 255, 0), "a": color(114, 255, 79), //Dark green "b": color(0, 140, 33), "c": color(32, 107, 37), //Blue "d": color(61, 255, 245), "e": color(135, 251, 255), //Dark blue "f": color(0, 64, 255), "g": color(71, 102, 255), //Purple "h": color(60, 0, 255), "i": color(93, 64, 255), //Pink "j": color(221, 0, 255), "k": color(233, 92, 255) }, layout: [ "11111111111111111111111111111111111111111111111111111", "11333311555511777771199911b111b11ddd11f111f1hhhhh1j11", "113444315666517888819aaa91b11bc1deeed1f111f1iihii1j11", "11311131511151711111911191b1bc11d111d1f111f111h111j11", "11333341555561777711999991bbc111d111d1f111f111h111j11", "113444315666517888119aaa91bcb111d111d1f111f111h111j11", "11311131511151711111911191b1cb11d111d1f111f111h111k11", "11333341511151777771911191b11cb1eddde1gfffg111h111j11", "11444411611161888881a111a1c111c11eee111ggg1111i111k11", "11111111111111111111111111111111111111111111111111111", "22222222222222222222222222222222222222222222222222222" ], size: 8, pos: [0, 0] }); return get(0, 0, 424, 88); })(), //Finish finish: (function() { //Transparent background background(0, 0, 0, 0); //Logo pixelArt({ colours: { //White "1": color(255), "2": color(200), //Red "3": color(199, 0, 0), "4": color(184, 63, 63), //Orange "5": color(255, 132, 0), "6": color(240, 178, 72), //Yellow "7": color(255, 234, 0), "8": color(255, 248, 110), //Green "9": color(51, 255, 0), "a": color(114, 255, 79), //Dark blue "b": color(0, 64, 255), "c": color(71, 102, 255), //Purple "d": color(60, 0, 255), "e": color(93, 64, 255), //Pink "f": color(221, 0, 255), "g": color(233, 92, 255) }, layout: [ "11111111111111111111111111111111111111111", "113333315555517111719999911bbb11d111d1f11", "11344441665661711171aa9aa1bcccb1d111d1f11", "11311111115111771171119111b111c1d111d1f11", "11333311115111787171119111cbbb11ddddd1f11", "113444111151117187711191111cccb1d111d1f11", "11311111115111711871119111b111b1d111d1g11", "11311111555551711171999991cbbbc1d111d1f11", "11411111666661811181aaaaa11ccc11e111e1g11", "11111111111111111111111111111111111111111", "22222222222222222222222222222222222222222" ], size: 8, pos: [0, 0] }); return get(0, 0, 328, 88); })(), //Results results: (function() { //Transparent background background(0, 0, 0, 0); //Logo pixelArt({ colours: { //White "1": color(255), "2": color(200), //Red "3": color(199, 0, 0), "4": color(184, 63, 63), //Orange "5": color(255, 132, 0), "6": color(240, 178, 72), //Yellow "7": color(255, 234, 0), "8": color(255, 248, 110), //Green "9": color(51, 255, 0), "a": color(114, 255, 79), //Dark blue "b": color(0, 64, 255), "c": color(71, 102, 255), //Purple "d": color(60, 0, 255), "e": color(93, 64, 255), //Pink "f": color(221, 0, 255), "g": color(233, 92, 255) }, layout: [ "111111111111111111111111111111111111111111111", "11333311555551177711911191b11111ddddd11fff111", "11344431566661788871911191b11111eedee1fgggf11", "11311131511111711111911191b1111111d111f111111", "11333341555511877711911191b1111111d111gfff111", "11344431566611188871911191b1111111d1111gggf11", "11311131511111711171911191b1111111d111f111f11", "11311131555551877781a999a1bbbbb111d111gfffg11", "114111416666611888111aaa11ccccc111e1111ggg111", "111111111111111111111111111111111111111111111", "222222222222222222222222222222222222222222222" ], size: 8, pos: [0, 0] }); return get(0, 0, 360, 88); })(), //Blocks blocks: { //Red red: (function() { //Transparent background background(0, 0, 0, 0); //Block pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": color(219, 41, 35), "2": color(240, 87, 87) }, layout: [ "11111111", "12222221", "12222221", "11111111" ], size: 5, pos: [0, 0] }); return get(0, 0, 40, 20); })(), //Orange orange: (function() { //Transparent background background(0, 0, 0, 0); //Block pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": color(217, 108, 35), "2": color(240, 142, 88) }, layout: [ "11111111", "12222221", "12222221", "11111111" ], size: 5, pos: [0, 0] }); return get(0, 0, 40, 20); })(), //Yellow yellow: (function() { //Transparent background background(0, 0, 0, 0); //Block pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": color(217, 202, 35), "2": color(240, 227, 88) }, layout: [ "11111111", "12222221", "12222221", "11111111" ], size: 5, pos: [0, 0] }); return get(0, 0, 40, 20); })(), //Green green: (function() { //Transparent background background(0, 0, 0, 0); //Block pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": color(71, 217, 35), "2": color(88, 240, 124) }, layout: [ "11111111", "12222221", "12222221", "11111111" ], size: 5, pos: [0, 0] }); return get(0, 0, 40, 20); })(), //Blue blue: (function() { //Transparent background background(0, 0, 0, 0); //Block pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": color(35, 175, 217), "2": color(88, 205, 240) }, layout: [ "11111111", "12222221", "12222221", "11111111" ], size: 5, pos: [0, 0] }); return get(0, 0, 40, 20); })(), //Purple purple: (function() { //Transparent background background(0, 0, 0, 0); //Block pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": color(99, 35, 217), "2": color(124, 88, 240) }, layout: [ "11111111", "12222221", "12222221", "11111111" ], size: 5, pos: [0, 0] }); return get(0, 0, 40, 20); })(), }, //Images for the choices choiceImgs: { //Game Modes gameModes: (function() { //Transparent background background(0, 0, 0, 0); //Pixel art pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": color(255, 255, 255), "2": color(0) }, layout: [ "1100000000", "1100000000", "0000000000", "0000000000", "0000000000", "0000000000", "0001111111", "0001111111" ], size: 5, pos: [0, 0] }); return get(0, 0, 50, 40); })(), //Scores scores: (function() { //Transparent background background(0, 0, 0, 0); //Pixel art pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": color(255, 221, 0), "2": color(250, 188, 3), "3": color(110, 62, 4), "4": color(66, 42, 6), "5": color(255) }, layout: [ "0000211111110000", "0000211111110050", "0000211111110555", "0110211111110150", "2111111111111111", "2102111111111021", "2100211111110021", "0210211111110210", "0021111111111100", "0002111111111000", "0000211111110000", "0000021111100000", "0000002111000000", "0000000210000000", "0000000210000000", "0044444444444400", "0043333333333300", "0043333333333300", "0043333333333300", "0043333333333300" ], size: 2, pos: [0, 0] }); return get(0, 0, 32, 40); })(), //Settings settings: (function() { //Transparent background background(0, 0, 0, 0); //Pixel art pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": color(143, 143, 143), "2": color(97, 96, 97) }, layout: [ "0000210000", "0021111100", "0021111100", "0211002110", "0211002110", "0021111100", "0021111100", "0000210000", ], size: 4.5, pos: [0, 0] }); return get(0, 0, 40, 40); })(), //Tutorial tutorial: (function() { //Transparent background background(0, 0, 0, 0); //Pixel art pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": color(255, 247, 255), "2": color(196, 196, 196) }, layout: [ "011110", "112211", "220011", "000112", "001120", "002200", "001100", "002200" ], size: 5, pos: [0, 0] }); return get(0, 0, 30, 40); })(), //Customise customise: (function() { //Transparent background background(0, 0, 0, 0); //Pixel art pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": color(230, 39, 39), "2": color(255, 255, 255), "3": color(252, 226, 146), "4": color(158, 252, 255), "5": color(250, 205, 115) }, layout: [ "00121212100", "01121212110", "11211211211", "05555555550", "05222222230", "05244444230", "05244444230", "05222222230", "05333333330", "05333333330" ], size: 4, pos: [0, 0] }); return get(0, 0, 44, 40); })(), //Save save: (function() { //Transparent background background(0, 0, 0, 0); //Pixel art pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": color(163, 51, 255), "2": color(119, 0, 255), "3": color(255), "4": color(0) }, layout: [ "21333110", "21333111", "21111111", "21111111", "21111111", "21333311", "21344311", "21333311", ], size: 5, pos: [0, 0] }); return get(0, 0, 40, 40); })() }, //Coin coin: [ (function() { //Transparent background background(0, 0, 0, 0); //Coin pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": color(242, 250, 3), "2": color(255, 183, 0), "3": color(255, 221, 0) }, layout: [ "0011111200", "0111111120", "1111111112", "1112221112", "1123332112", "1123332112", "1123332112", "1123332112", "1123332112", "1123332112", "1112221112", "1111111112", "2111111120", "0211111200", "0022222000" ], size: 2, pos: [0, 0] }); return get(0, 0, 20, 30); })(), (function() { //Transparent background background(0, 0, 0, 0); //Coin pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": color(242, 250, 3), "2": color(255, 183, 0), "3": color(255, 221, 0) }, layout: [ "0011200", "0111120", "1111112", "1122112", "1233212", "1233212", "1233212", "1233212", "1233212", "1233212", "1122112", "1111112", "2111120", "0211200", "0022000" ], size: 2, pos: [0, 0] }); return get(0, 0, 14, 30); })(), (function() { //Transparent background background(0, 0, 0, 0); //Coin pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": color(242, 250, 3), "2": color(255, 183, 0), "3": color(255, 221, 0) }, layout: [ "0120", "0120", "1112", "1212", "2322", "2322", "2322", "2322", "2322", "2322", "1212", "1112", "2120", "2120", "0200" ], size: 2, pos: [0, 0] }); return get(0, 0, 8, 30); })(), (function() { //Transparent background background(0, 0, 0, 0); //Coin pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": color(242, 250, 3), "2": color(255, 183, 0), "3": color(255, 221, 0) }, layout: [ "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2" ], size: 2, pos: [0, 0] }); return get(0, 0, 2, 30); })(), (function() { //Transparent background background(0, 0, 0, 0); //Coin pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": color(242, 250, 3), "2": color(255, 183, 0), "3": color(255, 221, 0) }, layout: [ "0210", "0210", "2111", "2121", "2232", "2232", "2232", "2232", "2232", "2232", "2121", "2111", "0212", "0212", "0020" ], size: 2, pos: [0, 0] }); return get(0, 0, 8, 30); })(), (function() { //Transparent background background(0, 0, 0, 0); //Coin pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": color(242, 250, 3), "2": color(255, 183, 0), "3": color(255, 221, 0) }, layout: [ "0021100", "0211110", "2111111", "2112211", "2123321", "2123321", "2123321", "2123321", "2123321", "2123321", "2112211", "2111111", "0211112", "0021120", "0002200" ], size: 2, pos: [0, 0] }); return get(0, 0, 14, 30); })(), (function() { //Transparent background background(0, 0, 0, 0); //Coin pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": color(242, 250, 3), "2": color(255, 183, 0), "3": color(255, 221, 0) }, layout: [ "0021111100", "0211111110", "2111111111", "2111222111", "2112333211", "2112333211", "2112333211", "2112333211", "2112333211", "2112333211", "2111222111", "2111111111", "0211111112", "0021111120", "0002222200" ], size: 2, pos: [0, 0] }); return get(0, 0, 20, 30); })(), (function() { //Transparent background background(0, 0, 0, 0); //Coin pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": color(242, 250, 3), "2": color(255, 183, 0), "3": color(255, 221, 0) }, layout: [ "001111111100", "011111111110", "111111111111", "111122221111", "111233332111", "111233332111", "111233332111", "111233332111", "111233332111", "111233332111", "111122221111", "111111111111", "211111111112", "021111111120", "002222222200" ], size: 2, pos: [0, 0] }); return get(0, 0, 24, 30); })(), ], //Trophy trophy: (function() { /* Star based off of this pic: https://www.brik.co/blogs/pixel-art/heart-and-star-pixel-art / //Transparent background background(0, 0, 0, 0); //Pixel art pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": color(255, 221, 0), "2": color(250, 188, 3), "3": color(110, 62, 4), "4": color(66, 42, 6), "5": color(255), "6": color(125), "7": color(255, 170, 0), "8": color(214, 128, 0) }, layout: [ "00000000211111111111111100000000", "00000000211111111111111100000000", "00000000211111111111111100000000", "00000000211111111111111100000000", "00000000211111111111111100000500", "00000000211111111111111100005550", "00211000211111188111111100021500", "02111100211111877811111100211110", "21111111111188877888111111111111", "21111111111877777777811111111111", "21110021111187777778111111002111", "21100002111118777781111110000211", "21100000211187777778111100000211", "21110000211187788778111100002111", "02111000211118811881111100021110", "00211100211111111111111100211100", "00021110211111111111111102111000", "00002111111111111111111111110000", "00000211111111111111111111100000", "00000021111111111111111111000000", "00000002111111111111111110000000", "00000000211111111111111100000000", "00000000021111111111111000000000", "00000000002111111111110000000000", "00000000000211111111100000000000", "00000000000021111111000000000000", "00000000000002111110000000000000", "00000000000000211100000000000000", "00000000000000211100000000000000", "00000000000000211100000000000000", "00004444444444444444444444440000", "00004333333333333333333333330000", "00004333333333333333333333330000", "00004333333333333333333333330000", "00004333333333333333333333330000", "00004333333333333333333333330000", "00004333333333333333333333330000", "00004333333333333333333333330000", "00664333333333333333333333336600", "06664333333333333333333333336660", "06666666666666666666666666666660", "00666666666666666666666666666600", "00006666666666666666666666660000", "00000000666666666666666600000000" ], size: 8, pos: [0, 0] }); return get(0, 0, 256, 352); })() }; //All the blocks var blockImgs = [ images.blocks.red, images.blocks.orange, images.blocks.yellow, images.blocks.green, images.blocks.blue, images.blocks.purple ]; //} /* VARIABLES / //{ //Variables //{ //Your save file is here var saveFile = { newbie: true, coins: 0, scores: { normal: [] }, background: true }; //Variable for scene var scene = "logo"; //Type of game var gameType = "intro"; //Variable for font var fontPrep = { size: 0, colour: color(0), align: "CORNER" }; //Thanks to Bob Lyon for the Tips and Thanks he posted on the document on the max function on how to apply it on arrays. //Link to document: https://www.khanacademy.org/computer-programming/maxnum1-num2/4755409722146816 var m = max; //} //Variables for logo //{ //Movement of ball var ballY = 900; //Timer var logoTimer = 0; //Transition var transitY = 0; var transitSpeed = 0; //Skip logo? var logoSkip = false; //} //Variables for title //{ //Timer for title var titleTimer = 0; //Opacity of the boxes var boxSize = []; //Times boxes start losing opacity var timeToFade = []; //Transition to next scene var transitMove = false; var transitX = 600; //Prepare variables for (var i = 0; i < 25; i++) { boxSize.push(120); timeToFade.push(random(60, 90)); } //} //Variables for home menu //{ //Timer var homeTimer = 0; //Which choice is being selected? var selectedChoice = 0; //Destination after choosing an option var goTo = ""; //The options var choices = [ { pos: [150, 225], size: [100, 75], colour: { border: color(194, 11, 11), shadow: color(140, 0, 0), fill: color(245, 84, 84), text: color(0) }, text: { title: "Game Modes", desc: "Play Breakout here!" }, image: images.choiceImgs.gameModes, output: function() { goTo = "modeSelect"; } }, { pos: [300, 225], size: [100, 75], colour: { border: color(255, 140, 0), shadow: color(255, 81, 0), fill: color(245, 187, 101), text: color(0) }, text: { title: "Scores", desc: "Check your scores here!" }, image: images.choiceImgs.scores, output: function() { goTo = "scores"; } }, { pos: [450, 225], size: [100, 75], colour: { border: color(255, 242, 0), shadow: color(250, 209, 5), fill: color(237, 242, 104), text: color(0) }, text: { title: "Settings", desc: "Adjust the game here!" }, image: images.choiceImgs.settings, output: function() { //goTo = "settings"; _clearLogs(); println("This is not available yet."); } }, { pos: [150, 375], size: [100, 75], colour: { border: color(57, 222, 11), shadow: color(32, 176, 32), fill: color(115, 250, 70), text: color(0) }, text: { title: "Tutorial", desc: "Learn how to play!" }, image: images.choiceImgs.tutorial, output: function() { goTo = "tutorial"; } }, { pos: [300, 375], size: [100, 75], colour: { border: color(0, 115, 255), shadow: color(0, 51, 255), fill: color(59, 170, 245), text: color(0) }, text: { title: "Customise", desc: "Choose a design!" }, image: images.choiceImgs.customise, output: function() { //goTo = "customise"; _clearLogs(); println("This is not available yet."); } }, { pos: [450, 375], size: [100, 75], colour: { border: color(81, 0, 255), shadow: color(60, 0, 255), fill: color(137, 98, 245), text: color(0) }, text: { title: "Save", desc: "Keep your progress!" }, image: images.choiceImgs.save, output: function() { //Prepare save file / Save file should look like this: var saveFile = { newbie: true, coins: 0, scores: { normal: [] }, background: true }; / var prep = "var saveFile = {" + "\n\n" + " newbie: " + saveFile.newbie + ",\n" + " coins: " + saveFile.coins + ",\n" + " scores: {" + "\n\n" + " normal: [" + saveFile.scores.normal + "]" + "\n\n" + " }," + "\n" + " background: " + saveFile.background + "\n\n" + "};" + "\n\n" + "Copy and paste everything above and replace it with the saveFile in line 1378!"; //Save file _clearLogs(); println(prep); } }, { pos: [520, 570], size: [120, 30], colour: { border: color(79, 79, 79), shadow: color(97, 97, 97), fill: color(138, 138, 138), text: color(0) }, text: { title: "Achievements", desc: "" }, image: "", output: function() { //goTo = "achievements"; _clearLogs(); println("This is not available yet."); } } ]; //} //Variables for modes //{ //Timer var modeTimer = 0; //All possible game modes var gameOptions = [ { pos: [150, 300], size: [100, 75], colour: { border: color(194, 11, 11), shadow: color(140, 0, 0), fill: color(245, 84, 84), text: color(0) }, text: { title: "Breakout", desc: "Play normal Breakout!" }, image: images.choiceImgs.gameModes, output: function() { gameType = "normal"; } }, { pos: [450, 300], size: [100, 75], colour: { border: color(194, 11, 11), shadow: color(140, 0, 0), fill: color(245, 84, 84), text: color(0) }, text: { title: "Multiplayer", desc: "Play against friends!" }, image: images.choiceImgs.gameModes, output: function() { //gameType = "multiplayer"; _clearLogs(); println("This is not available yet."); } }, { pos: [520, 570], size: [60, 30], colour: { border: color(79, 79, 79), shadow: color(97, 97, 97), fill: color(138, 138, 138), text: color(0) }, text: { title: "Back", desc: "" }, image: "", output: function() { goTo = "back"; } } ]; //Colours of blocks var blockCols = [ color(219, 41, 35), color(217, 108, 35), color(217, 202, 35), color(71, 217, 35), color(35, 175, 217), color(99, 35, 217) ]; //} //Variables for scores //{ //Timer var scoresDisplayTimer = 0; //Go back? var goBack = false; //} //Variables for game //{ //Should a tutorial happen? var tutor = true; //Timer var tutorialTimer = 0; var gameTimer = 0; //Distance moved var distanceMoved = 0; //For moving the paddle away var paddleX = 0; //How many times the ball and paddle collided var noOfCol = 0; //Number of blocks broken var noOfBlocks = 0; //Level player is on var level = 1; //Should the level run? var ready = false; //Shake effect var shake = [0, 0]; var shaking = false; var shakeTimer = 0; //Transition into next level var finishTimer = 0; //Score to display var score = 0; var scoreTimer = 0; var incScore = 0; //For game over var gameOverX = 0; //State var pause = false; var gameOver = false; //High score var scaleFactor = 100; //} //} / FUNCTIONS / //{ //For avoiding using new / I found this from KWC's comment. / var construct = function (ctor, args, newTarget) { var obj = Object.create(ctor.prototype); return (newTarget \|\| ctor).apply(obj, args), obj; }; //Main font var pixelFont = function(txt, pos) { //Get text properties var size = fontPrep.size; var pos = pos; var colour = fontPrep.colour; var txt = txt.toLowerCase(); //For position of each letter var txtWidth = 0; //Total width of text var totalWidth = 0; //Text /** Based off of: * https://ct.mob0.com/Fonts/CharacterMap/pixel.png * https://cdn4.vectorstock.com/i/1000x1000/71/38/3d-pixel-font-retro-style-alphabet-vector-20557138.jpg **/ var lettersShape = { / [ [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], ], */ //Letters "a": [ [1, 1, 1, 1, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 1, 1, 1, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], ], "b": [ [1, 1, 1, 1, 0], [1, 0, 0, 1, 0], [1, 0, 0, 1, 0], [1, 1, 1, 1, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 1, 1, 1, 1], ], "c": [ [1, 1, 1, 1, 1], [1, 0, 0, 0, 0], [1, 0, 0, 0, 0], [1, 0, 0, 0, 0], [1, 0, 0, 0, 0], [1, 0, 0, 0, 0], [1, 1, 1, 1, 1], ], "d": [ [1, 1, 1, 1, 0], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 1, 1, 1, 0], ], "e": [ [1, 1, 1, 1, 1], [1, 0, 0, 0, 0], [1, 0, 0, 0, 0], [1, 1, 1, 1, 0], [1, 0, 0, 0, 0], [1, 0, 0, 0, 0], [1, 1, 1, 1, 1], ], "f": [ [1, 1, 1, 1, 1], [1, 0, 0, 0, 0], [1, 0, 0, 0, 0], [1, 1, 1, 1, 0], [1, 0, 0, 0, 0], [1, 0, 0, 0, 0], [1, 0, 0, 0, 0], ], "g": [ [1, 1, 1, 1, 1], [1, 0, 0, 0, 0], [1, 0, 0, 0, 0], [1, 0, 0, 1, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 1, 1, 1, 1], ], "h": [ [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 1, 1, 1, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], ], "i": [ [1, 1, 1], [0, 1, 0], [0, 1, 0], [0, 1, 0], [0, 1, 0], [0, 1, 0], [1, 1, 1], ], "j": [ [1, 1, 1, 1, 1], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [1, 1, 1, 0, 0], ], "k": [ [1, 0, 0, 0, 1], [1, 0, 0, 1, 0], [1, 0, 1, 0, 0], [1, 1, 0, 0, 0], [1, 0, 1, 0, 0], [1, 0, 0, 1, 0], [1, 0, 0, 0, 1], ], "l": [ [1, 0, 0, 0, 0], [1, 0, 0, 0, 0], [1, 0, 0, 0, 0], [1, 0, 0, 0, 0], [1, 0, 0, 0, 0], [1, 0, 0, 0, 0], [1, 1, 1, 1, 1], ], "m": [ [1, 0, 0, 0, 1], [1, 1, 0, 1, 1], [1, 0, 1, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], ], "n": [ [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 1, 0, 0, 1], [1, 0, 1, 0, 1], [1, 0, 0, 1, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], ], "o": [ [0, 1, 1, 1, 0], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [0, 1, 1, 1, 0], ], "p": [ [1, 1, 1, 1, 0], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 1, 1, 1, 0], [1, 0, 0, 0, 0], [1, 0, 0, 0, 0], [1, 0, 0, 0, 0], ], "q": [ [0, 1, 1, 1, 0], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 1, 0, 1], [1, 0, 0, 1, 0], [0, 1, 1, 0, 1], ], "r": [ [1, 1, 1, 1, 0], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 1, 1, 1, 0], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], ], "s": [ [0, 1, 1, 1, 0], [1, 0, 0, 0, 1], [1, 0, 0, 0, 0], [0, 1, 1, 1, 0], [0, 0, 0, 0, 1], [1, 0, 0, 0, 1], [0, 1, 1, 1, 0], ], "t": [ [1, 1, 1, 1, 1], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], ], "u": [ [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [0, 1, 1, 1, 0], ], "v": [ [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [0, 1, 0, 1, 0], [0, 0, 1, 0, 0], ], "w": [ [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 1, 0, 1], [1, 0, 1, 0, 1], [0, 1, 0, 1, 0], ], "x": [ [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [0, 1, 0, 1, 0], [0, 0, 1, 0, 0], [0, 1, 0, 1, 0], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], ], "y": [ [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [0, 1, 0, 1, 0], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], ], "z": [ [1, 1, 1, 1, 1], [0, 0, 0, 0, 1], [0, 0, 0, 1, 0], [0, 0, 1, 0, 0], [0, 1, 0, 0, 0], [1, 0, 0, 0, 0], [1, 1, 1, 1, 1], ], "1": [ [0, 1, 0], [1, 1, 0], [0, 1, 0], [0, 1, 0], [0, 1, 0], [0, 1, 0], [1, 1, 1], ], "2": [ [0, 1, 1, 1, 0], [1, 0, 0, 0, 1], [0, 0, 0, 0, 1], [0, 0, 1, 1, 0], [0, 1, 0, 0, 0], [1, 0, 0, 0, 0], [1, 1, 1, 1, 1], ], "3": [ [0, 1, 1, 1, 0], [1, 0, 0, 0, 1], [0, 0, 0, 0, 1], [0, 0, 1, 1, 0], [0, 0, 0, 0, 1], [1, 0, 0, 0, 1], [0, 1, 1, 1, 0], ], "4": [ [0, 0, 0, 1, 1], [0, 0, 1, 0, 1], [0, 1, 0, 0, 1], [1, 0, 0, 0, 1], [1, 1, 1, 1, 1], [0, 0, 0, 0, 1], [0, 0, 0, 0, 1], ], "5": [ [1, 1, 1, 1, 1], [1, 0, 0, 0, 0], [1, 1, 1, 1, 0], [0, 0, 0, 0, 1], [0, 0, 0, 0, 1], [1, 0, 0, 0, 1], [0, 1, 1, 1, 0], ], "6": [ [0, 1, 1, 1, 0], [1, 0, 0, 0, 1], [1, 0, 0, 0, 0], [1, 1, 1, 1, 0], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [0, 1, 1, 1, 0], ], "7": [ [1, 1, 1, 1, 1], [0, 0, 0, 0, 1], [0, 0, 0, 1, 0], [0, 0, 1, 0, 0], [0, 1, 0, 0, 0], [0, 1, 0, 0, 0], [0, 1, 0, 0, 0], ], "8": [ [0, 1, 1, 1, 0], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [0, 1, 1, 1, 0], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [0, 1, 1, 1, 0], ], "9": [ [0, 1, 1, 1, 0], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [0, 1, 1, 1, 1], [0, 0, 0, 0, 1], [1, 0, 0, 0, 1], [0, 1, 1, 1, 0], ], "0": [ [0, 1, 1, 1, 0], [1, 0, 0, 0, 1], [1, 0, 0, 1, 1], [1, 0, 1, 0, 1], [1, 1, 0, 0, 1], [1, 0, 0, 0, 1], [0, 1, 1, 1, 0], ], "?": [ [0, 1, 1, 1, 0], [1, 0, 0, 0, 1], [0, 0, 0, 0, 1], [0, 0, 0, 1, 0], [0, 0, 1, 0, 0], [0, 0, 0, 0, 0], [0, 0, 1, 0, 0], ], "!": [ [1], [1], [1], [1], [1], [0], [1], ], " ": [], "/": [ [0, 0, 1], [0, 0, 1], [0, 1, 0], [0, 1, 0], [0, 1, 0], [1, 0, 0], [1, 0, 0], ], ":": [ [0], [1], [0], [0], [0], [1], [0], ], "(": [ [0, 0, 1], [0, 1, 0], [1, 0, 0], [1, 0, 0], [1, 0, 0], [0, 1, 0], [0, 0, 1], ], ")": [ [1, 0, 0], [0, 1, 0], [0, 0, 1], [0, 0, 1], [0, 0, 1], [0, 1, 0], [1, 0, 0], ], ".": [ [0], [0], [0], [0], [0], [0], [1], ], ",": [ [0], [0], [0], [0], [0], [1], [1] ], "'": [ [1], [1], [0], [0], [0], [0] [0] ], "+": [ [0, 0, 0, 0, 0], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [1, 1, 1, 1, 1], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [0, 0, 0, 0, 0], ] }; //All the available letters var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "?", "!", " ", "/", ":", "(", ")", ".", ",", "'", "+"]; //Widths of each letter (for finding where to put next letter in the text) var letterWidth = [5, 5, 5, 5, 5, 5, 5, 5, 3, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 3, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 1, 1, 3, 1, 3, 3, 1, 1, 1, 5]; //Find total width for (var i = 0; i < txt.length; i++) { //Find position of next element totalWidth += (letterWidth[letters.indexOf(txt[i])] + 1) size; } //Loop through text for (var i = 0; i < txt.length; i++) { //Draw letter pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": colour }, layout: lettersShape[txt[i]], size: size, pos: [pos[0] + txtWidth - (fontPrep.align === "CENTER" ? (totalWidth / 2) : 0), pos[1] - (fontPrep.align === "CENTER" ? (3.5 * size) : 0)] }); //Find position of next element txtWidth += (letterWidth[letters.indexOf(txt[i])] + 1) * size; } }; var pFResize = function(size) { fontPrep.size = size; }; var pFRecolour = function(colour) { fontPrep.colour = colour; }; var pFRealign = function(align) { //Only two choices are CORNER and CENTER fontPrep.align = align; }; //Rect-rect collision var rectToRect = function(obj1, obj2) { /** Both obj1 and obj2 should have an x key, a y key, a width (w) key and a height (h) key in the object. { x: 0, y: 0, w: 0, h: 0 } / //Check if obj1 is in obj2 return (obj1.x + obj1.w/2) >= (obj2.x - obj2.w/2) && (obj1.x - obj1.w/2) <= (obj2.x + obj2.w/2) && (obj1.y + obj1.h/2) >= (obj2.y - obj2.h/2) && (obj1.y - obj1.h/2) <= (obj2.y + obj2.h/2); }; //Gradients var gradient = function(x, y, w, h, direction, c1, c2, step) { //Loop through different values depending on situation / FIRST SCENARIO: direction = left You set i to be the width. i will always be greater than 0. i will decrease. SECOND SCENARIO: direction = right You set i to be 0. i will always be less than the width. i will increase. THIRD SCENARIO: direction = up You set i to be the height. i will always be greater than 0. i will decrease. FOURTH SCENARIO: direction = down You set i to be 0. i will always be less than the height. i will increase. / for (var i = (direction === "left" ? w : (direction === "right" ? 0 : (direction === "up" ? h : 0))); (direction === "left" ? i > 0 : (direction === "right" ? i < w : (direction === "up" ? i > 0 : i < h))); (direction === "right" \|\| direction === "down") ? i += (step ? step : 1) : i -= (step ? step : 1)) { //Colour of lines that form a gradient noStroke(); fill(lerpColor(c1, c2, ((direction === "left" \|\| direction === "up") ? (w - i) : i) / ((direction === "left" \|\| direction === "right") ? w : h))); //The lines / x-POSITION: if you are going horizontally, the x is increasing, otherwise, the width is added to the x y-POSITION: if you are going vertically, the y is increasing, otherwise, the height is added to y WIDTH: if you are going horizontally, a width would be added to the x, (to make a thin vertical box) otherwise, the width would just be the width. (to make a long horizontal box) (to make horizontal line) HEIGHT: if you are going vertically, a height would be added to the y (to make a thin horizontal box) otherwise, the height would just be the height (to make a long vertical box) / rectMode(CORNER); rect((direction === "left" \|\| direction === "right") ? x + i : x, (direction === "up" \|\| direction === "down") ? y + i : y, (direction === "left" \|\| direction === "right") ? (step ? step : 1) : w, (direction === "up" \|\| direction === "down") ? (step ? step : 1) : h); } }; //} / OBJECTS / //{ //Checks for keys and prevents things from immeadiately happening all the time. //{ var CheckKeyPressed = function(time, key) { //The timer to make sure something happens every this.time frames. this.timer = -1; //The period between each happening. this.time = time; //The key to look for. this.key = key; //Are you pressing the key? this.pressed = false; }; CheckKeyPressed.prototype.run = function() { //If you are pressing the key... if (keys[this.key]) { //Increment the timer. this.timer++; //Make something happen between each period of time. if (this.timer % this.time === 0) { this.pressed = true; } else { this.pressed = false; } } //Otherwise... else { //Reset. this.timer = -1; this.pressed = false; } }; CheckKeyPressed.create = function(args) { return construct(CheckKeyPressed, args); }; //} //Movements //{ //Quadratic transition var Quadratic = function(data) { / { zeroes: [0, 0], denominator: 1, startX: 0, endX: 0, coefficients: [1, 1], speed: 1 } */ //The zeroes this.zeroes = data.zeroes; //The denominator (let it be 1 if there isn't any) this.denominator = data.denominator; //Start and end this.startX = data.startX; this.endX = data.endX; //X value this.x = this.startX; //Coefficients this.coefficients = data.coefficients; //Speed this.speed = data.speed; //Return value this.returnValue = ((this.coefficients[0] (this.x - this.zeroes[0])) * (this.coefficients[1] * (this.x - this.zeroes[1]))) / this.denominator; //State of transition this.running = false; this.finished = false; //Factors of quadratics this.factor1 = 0; this.factor2 = 0; }; Quadratic.prototype.run = function() { //If it is running... if (this.running) { //If you haven't reached the end yet... if (this.x < this.endX) { //Go further along the quadratic this.x += this.speed; //Find factors this.factor1 = this.coefficients[0] * (this.x - this.zeroes[0]); this.factor2 = this.coefficients[1] * (this.x - this.zeroes[1]); //Find f(x) this.returnValue = (this.factor1 * this.factor2) / this.denominator; } //Otherwise... else { //The end. this.x = this.endX; this.returnValue = (this.factor1 * this.factor2) / this.denominator; this.running = false; this.finished = true; } } }; Quadratic.prototype.reset = function() { //Reset some variables this.x = this.startX; this.running = false; this.finished = false; this.returnValue = 0; }; Quadratic.create = function(args) { return construct(Quadratic, args); }; //} //Choices //{ var Choice = function(args) { /** { choices: [], direction: 0 } //For each choice { borderCol: color(0), fillCol: color(0), text: "", output: function() {} } Direction is either 0 or 1 (0 for left and right and 1 for up and down) / //Choices this.choice = args.choices; //Direction this.direction = args.direction; //Selecting... this.selecting = 0; //Has a choice been chosen yet? this.chosen = false; //The movements this.moveUp = Quadratic.create([{ zeroes: [0, 120], denominator: 4, startX: 0, endX: 60, coefficients: [1, 1], speed: 2 }]); this.moveDown = Quadratic.create([{ zeroes: [0, 120], denominator: 4, startX: 0, endX: 60, coefficients: [-1, 1], speed: 2 }]); //Checks for left and right inputs this.checkLeft = CheckKeyPressed.create([30, LEFT]); this.checkRight = CheckKeyPressed.create([30, RIGHT]); this.checkA = CheckKeyPressed.create([30, 65]); this.checkD = CheckKeyPressed.create([30, 68]); //Checks for up and down inputs this.checkUp = CheckKeyPressed.create([30, UP]); this.checkDown = CheckKeyPressed.create([30, DOWN]); this.checkW = CheckKeyPressed.create([30, 87]); this.checkS = CheckKeyPressed.create([30, 83]); }; Choice.prototype.choices = function(args, selected, chosen) { //The individual choices //Set up variables var pos = args.pos; var borCol = args.borderCol; var fillCol = args.fillCol; var txtCol = args.txtCol; var txt = args.txt; var output = args.output; //Draw choice strokeWeight(5); stroke(borCol); fill(fillCol); rectMode(CENTER); rect(pos[0], pos[1], selected ? 120 : 100, selected ? 48 : 40); //The text pFResize(selected ? 2.4 : 2); pFRecolour(txtCol); pFRealign("CENTER"); pixelFont(txt, [pos[0], pos[1]]); //Run function if chosen if (chosen) { output(); } }; Choice.prototype.input = function() { //Dealing with inputs from keyboard if (this.direction === 0) { this.checkLeft.run(); this.checkRight.run(); this.checkA.run(); this.checkD.run(); } else { this.checkUp.run(); this.checkDown.run(); this.checkW.run(); this.checkS.run(); } //If choice has not been confirmed yet if (!this.chosen) { //Left/Up input if ((this.direction === 0 && (this.checkLeft.pressed \|\| this.checkA.pressed)) \|\| (this.direction === 1 && (this.checkUp.pressed \|\| this.checkW.pressed))) { this.selecting -= (this.selecting === 0 ? 0 : 1); } //Right/Down input else if ((this.direction === 0 && (this.checkRight.pressed \|\| this.checkD.pressed)) \|\| (this.direction === 1 && (this.checkDown.pressed \|\| this.checkS.pressed))) { this.selecting += (this.selecting === this.choice.length - 1 ? 0 : 1); } //Confirm input if (keys[32]) { this.chosen = true; } } }; Choice.prototype.anim = function() { //Animation this.moveUp.run(); this.moveDown.run(); this.moveUp.running = true; if (this.chosen) { this.moveDown.running = true; } }; Choice.prototype.reset = function() { //Resetting animation this.moveUp.reset(); this.moveDown.reset(); //Reset choice this.selecting = 0; this.chosen = false; }; Choice.prototype.draw = function() { pushMatrix(); translate(0, 900 + this.moveUp.returnValue + this.moveDown.returnValue); //Draw the choices for (var i = 0; i < this.choice.length; i++) { this.choices(this.choice[i], i === this.selecting ? true : false, (i === this.selecting && this.chosen) ? true : false); } popMatrix(); }; Choice.create = function(args) { return construct(Choice, args); }; //} //Options //{ var Option = function(args) { / { pos: [0, 0], size: [0, 0], colour: { border: color(0), shadow: color(0), fill: color(0), text: color(0) }, text: { title: "", desc: "" }, image: "", output: function() {} } */ //Position this.x = args.pos[0]; this.y = args.pos[1]; //Size this.w = args.size[0]; this.h = args.size[1]; //Colour this.colours = args.colour; //Text this.text = args.text; //Image provided this.image = args.image; //What happens when it is selected this.output = args.output; //Is it being hovered over? this.selected = false; //Movement for the object this.moveIn = Quadratic.create([{ zeroes: [0, 120], denominator: 6, startX: 0, endX: 60, coefficients: [1, 1], speed: 2 }]); this.moveOut = Quadratic.create([{ zeroes: [0, 120], denominator: 6, startX: 0, endX: 60, coefficients: [-1, 1], speed: 2 }]); }; Option.prototype.design = function() { //Laying out the option //Rectangle to add a bit of 3D noStroke(); fill(this.colours.shadow); rectMode(CENTER); rect(this.x, this.y + ((this.h / 2) + 2.5) (this.selected ? 1.25 : 1), (this.w + 5) * (this.selected ? 1.25 : 1), 12.5 * (this.selected ? 1.25 : 1)); //Main rectangle strokeWeight(5); stroke(this.colours.border); fill(this.colours.fill); rect(this.x, this.y, this.w * (this.selected ? 1.25 : 1), this.h * (this.selected ? 1.25 : 1)); //Text pFRecolour(this.colours.text); pFResize(1.5); pFRealign("CENTER"); pixelFont(this.text.title, [this.x, this.y + ((-this.h / 2) + 20) * (this.selected ? 1.25 : 1)]); //Image if (this.image) { imageMode(CENTER); image(this.image, this.x, this.y - (this.h / 2) + (this.selected ? 30 : 35) + (this.image.height * 1/3), this.image.width * 2/3, this.image.height * 2/3); } //Description if (this.selected && this.text.desc) { pFResize(1); pixelFont(this.text.desc, [this.x, this.y + (this.h / 2) - 5]); } }; Option.prototype.anim = function() { //Animation for the object //Prepare movement this.moveIn.run(); this.moveOut.run(); }; Option.prototype.draw = function() { //Animation this.anim(); pushMatrix(); //Move the object translate(600 + this.moveIn.returnValue + this.moveOut.returnValue, 0); //Draw the choice this.design(); popMatrix(); }; Option.create = function(args) { return construct(Option, args); }; //} //Text //{ var Text = function(args) { /** { text: { texts: [], sizes: [], align: [], colour: [], speed: [], fade: [], pos: [] }, pauses: { when: [], conditions: [] } } NOTE: Use @ to split lines in text.texts text.speed and text.fade are speeds. */ //Text data this.texts = args.text; //Pauses in text this.pauses = args.pauses; //Is the text running? this.running = false; //Should the next piece of text display? this.moveOn = false; //Text to display this.number = 0; //Current text's visibility this.vis = 0; //How many characters to display this.char = 0; //Which line to type this.line = 0; //The typed lines this.typedLines = ["", "", "", "", ""]; //Have the lines been typed out? this.finished = false; }; Text.prototype.anim = function() { //Animation for a text //Split text into separate lines var lines = this.texts.texts[this.number].split("@"); //Current colour var c = (color)(this.texts.colour[this.number], (this.texts.fade[this.number] !== 0 ? this.vis : 255)); //Text properties pFRecolour(c); pFResize(this.texts.sizes[this.number]); pFRealign(this.texts.align[this.number]); //Draw text for (var j = 0; j < lines.length; j++) { pixelFont((this.texts.speed[this.number] !== 0 ? this.typedLines[j] : lines[j]), [this.texts.pos[this.number][0], this.texts.pos[this.number][1] - ((lines.length / 2) this.texts.sizes[this.number] * 7) + (((lines.length - 1) / 2) * 5) + (j * this.texts.sizes[this.number] * 7) + 5 * (j - 1)]); } //Fading if (this.texts.fade[this.number] !== 0 && !this.moveOn) { if (this.vis < 255) { this.vis += this.texts.fade[this.number]; } else { this.vis = 255; } } else if (this.texts.fade[this.number] !== 0 && this.moveOn) { if (this.vis > 0) { this.vis -= this.texts.fade[this.number]; } else { this.vis = 0; //Move on to next piece of text this.number++; this.moveOn = false; } } //Typing if (this.texts.speed[this.number] !== 0) { //Increment characters this.char += this.texts.speed[this.number]; //Write out a line if (this.char <= lines[this.line].length && this.line < lines.length) { this.typedLines[this.line] = lines[this.line].substring(0, floor(this.char)); } else { //Move on to next line if (this.line + 1 < lines.length) { this.line++; this.typedLines[this.line - 1] = lines[this.line - 1]; this.char = 0; } else { this.finished = true; } } } }; Text.prototype.inputs = function() { //Tracks whether player has pressed space or not //Split text into separate lines var lines = this.texts.texts[this.number].split("@"); //Check if a pause is present var checker = []; //Loop through pauses for (var i = 0; i < this.pauses.when.length; i++) { //If there is a pause if (this.number === this.pauses.when[i]) { //Record it checker[i] = true; } else { checker[i] = false; } } //Tell user they can move on (if given condition is met) if ((this.texts.fade[this.number] !== 0 && this.vis >= 255) \|\| (this.texts.speed[this.number] !== 0 && this.finished)) { //Inform player to press space if (frameCount % 60 < 30 && (checker.indexOf(true) === -1 \|\| this.pauses.conditions[checker.indexOf(true)]())) { pixelArt({ colours: { "0": color(0, 0, 0, 1), "1": color(255), }, layout: [ "11111", "01110", "00100" ], size: 5, pos: [287.5, this.texts.pos[this.number][1] + ((lines.length / 2) * this.texts.sizes[this.number] * 7) + 20] }); } //If player presses space if (keys[32]) { //Check if any pauses were found if (checker.indexOf(true) === -1) { if (this.texts.fade[this.number] !== 0) { this.moveOn = true; } else if (this.texts.speed[this.number] !== 0) { this.char = 0; this.line = 0; this.typedLines = ["", "", "", "", ""]; this.number++; this.finished = false; } } else { if (this.pauses.conditions[checker.indexOf(true)]()) { if (this.texts.fade[this.number] !== 0) { this.moveOn = true; } else if (this.texts.speed[this.number] !== 0) { this.char = 0; this.line = 0; this.typedLines = ["", "", "", "", ""]; this.number++; this.finished = false; } } else { this.moveOn = false; } } } } }; Text.prototype.reset = function() { //Resetting the text this.running = false; this.moveOn = false; this.number = 1; this.vis = 0; this.char = 0; this.line = 0; this.typedLines = ["", "", "", "", ""]; this.finished = false; }; Text.prototype.draw = function() { this.anim(); this.inputs(); }; Text.create = function(args) { return construct(Text, args); }; //} //Paddle //{ var Paddle = function(args) { /** { pos: 0, size: [0, 0], } / //Name this.name = "paddle"; //Position this.x = args.pos; this.y = 525; //Size of paddle this.w = args.size[0]; this.h = args.size[1]; //Speed this.speed = 5; //Tries left this.tries = 3; //Health this.health = 100; //Score this.score = 0; }; Paddle.prototype.move = function() { //The paddle can move from left to right if (keys[LEFT] \|\| keys[65]) { this.x -= this.speed; distanceMoved += this.speed; } else if (keys[RIGHT] \|\| keys[68]) { this.x += this.speed; distanceMoved += this.speed; } else { this.x += 0; } this.x = constrain(this.x, this.w / 2, width - (this.w / 2)); }; Paddle.prototype.draw = function() { //Design fill(255); noStroke(); rectMode(CENTER); rect(this.x, this.y, this.w, this.h); }; Paddle.create = function(args) { return construct(Paddle, args); }; //} //Ball //{ var Ball = function(args) { / { pos: [0, 0] } / //Name this.name = "ball"; //Position this.x = args.pos[0]; this.y = args.pos[1]; //Size this.w = 15; this.h = this.w; //Max speed this.mSpeed = 5; //Speed this.speed = this.mSpeed; //Angle this.theta = random(195, 345); //Respawn timer this.timer = 0; }; Ball.prototype.move = function() { //Move the ball / Imagine a unit circle with a center on the origin. Draw an angle clockwise (go in the opposite direction to how we measure angles in maths, which is counter-clockwise). This is theta. To find out how much we change in the x-axis, we use the cosine of theta. Likewise, sine of theta is used to find out how much we change in the y-axis. This makes sense because of a trigonometric identity (sin^2(x) + cos^2(x) = 1). However, this only gives us the change in each direction if our speed was equal to 1. To fix this, we multiply each by this.speed. */ this.x += this.speed cos(this.theta); this.y += this.speed * sin(this.theta); }; Ball.prototype.collide = function(obj, player) { //Check collision with objects for (var i = 0; i < obj.length; i++) { //Check if colliding if (rectToRect(this, obj[i])) { switch(obj[i].name.toLowerCase()) { //Collision with paddle case "paddle": /** If the ball hits the left hand side of the paddle, the ball will go to the left at a random angle. If the ball hits the right hand side of the paddle, the ball will go to the right at a random angle. It doesn't seem to matter whether the ball hits the side of the paddle or not. / //Check if ball is on left hand //side of paddle if (this.x <= obj[i].x) { this.theta = random(195, 255); } //Check if ball is on right hand //side of paddle else { this.theta = random(285, 345); } noOfCol++; break; //Collision with blocks case "block": //Increment score if (gameType !== "tutorial" && !obj[i].gone) { player.score += 100; //Top if (this.y - (this.h / 2) <= obj[i].y - (obj[i].h / 2) && this.y + (this.h / 2) >= obj[i].y - (obj[i].h / 2)) { //Left side if (this.x <= obj[i].x) { this.theta = random(195, 255); } //Right side else { this.theta = random(285, 345); } } //Bottom else if (this.y - (this.h / 2) <= obj[i].y + (obj[i].h / 2) && this.y + (this.h / 2) >= obj[i].y - (obj[i].h / 2)) { //Left side if (this.x <= obj[i].x) { this.theta = random(105, 165); } //Right side else { this.theta = random(15, 75); } } //Left else if (this.x - (this.w / 2) <= obj[i].x - (obj[i].w / 2) && this.x + (this.w / 2) >= obj[i].x - (obj[i].w / 2)) { //Top side if (this.y <= obj[i].y) { this.theta = random(105, 165); } //Bottom side else { this.theta = random(15, 75); } } //Right else if (this.x - (this.w / 2) <= obj[i].x + (obj[i].w / 2) && this.x + (this.w / 2) >= obj[i].x - (obj[i].w / 2)) { //Top side if (this.y <= obj[i].y) { this.theta = random(285, 345); } //Bottom side else { this.theta = random(15, 75); } } noOfBlocks++; //Shake shaking = true; shakeTimer = 0; //Increment score incScore += 100; scoreTimer = 0; } //Break block obj[i].gone = true; break; } } } //Check collision with top / What appears to happen when the ball hits the top is that it goes down at the same angle as it has gone up. (If you join the rays with a line parallel to the top, you get an isosceles triangle.) More formally, the angle is being reflected over the x-axis. (Try drawing the path of a ball hitting the top.) / if (this.y <= (this.w / 2)) { //Bounce in the other direction this.theta = -this.theta; } //Check collision with sides / Similar to when the ball hits the top, the ball keeps going down, but in a different direction at the same angle. More formally, the angle is being reflected over the y-axis. (Again, try drawing the path of a ball hitting the sides.) / if (this.x <= (this.w / 2) \|\| this.x >= width - (this.w / 2)) { //Bounce in the other direction this.theta = 180 - this.theta; } //Check collision with bottom if (this.y >= height - (this.w / 2)) { //Stop this.speed = 0; //Timer this.timer++; //Lose a life (if not in tutorial) if (gameType !== "tutorial" && (player.tries > 0 ? (this.timer > 58 && this.timer < 60) : (this.timer > 1 && this.timer < 3))) { player.tries -= 1; } //Respawn (if not game over) if (player.tries >= 0 && this.timer >= 70) { if (gameType !== "tutorial") { this.y = 400; this.theta = random(195, 345); } else { this.y = 400; this.theta = 170; } this.x = 300; this.speed = this.mSpeed; this.timer = 0; } } //Constrain x-value this.x = constrain(this.x, (this.w / 2), width - (this.w / 2)); }; Ball.prototype.draw = function() { //The ball rectMode(CENTER); fill(255); noStroke(); rect(this.x, this.y, this.w, this.w); }; Ball.create = function(args) { return construct(Ball, args); }; //} //Blocks //{ var Block = function(args) { / { pos: [0, 0], size: [0, 0], color: 0 } */ //Name this.name = "block"; //Position this.x = args.pos[0]; this.y = args.pos[1]; //Size this.w = args.size[0]; this.h = args.size[1]; //Colour this.c = args.color; //Has it been broken? this.gone = false; //Move in animation this.moveIn = Quadratic.create([{ zeroes: [0, 120], denominator: 4, startX: 0, endX: 60, coefficients: [-1, 1], speed: 1 }]); }; Block.prototype.draw = function() { pushMatrix(); translate(0, this.moveIn.returnValue - 900); if (!this.gone) { imageMode(CENTER); image(blockImgs[this.c], this.x, this.y, this.w, this.h); } popMatrix(); }; Block.prototype.reset = function() { //Reset this.gone = false; //Reset animation this.moveIn.reset(); }; Block.create = function(args) { return construct(Block, args); }; //} //Creating objects //{ //Key checkers //{ //Check left and right keys var checkLeft = CheckKeyPressed.create([30, LEFT]); var checkRight = CheckKeyPressed.create([30, RIGHT]); var checkUp = CheckKeyPressed.create([30, UP]); var checkDown = CheckKeyPressed.create([30, DOWN]); var checkA = CheckKeyPressed.create([30, 65]); var checkD = CheckKeyPressed.create([30, 68]); var checkW = CheckKeyPressed.create([30, 87]); var checkS = CheckKeyPressed.create([30, 83]); //} //Objects in game //{ //Player var player = Paddle.create([{ pos: 300, size: [100, 15], }]); //Ball var ball = Ball.create([{ pos: [300, 400] }]); //Block var exampleBlock = Block.create([{ pos: [300, 300], size: [50, 25], color: 0 }]); //All the blocks var blocks = []; for (var i = 0; i < 72; i++) { blocks.push(Block.create([{ pos: [(25 + (i 50)) % 600, 100 + floor(i / 12) * 30], size: [40, 20], color: floor(i / 12) }])); } //} //Movements //{ //For the rotation of the logo var logoRot = Quadratic.create([{ zeroes: [0, 120], denominator: 20, startX: 0, endX: 60, coefficients: [-1, 1], speed: 1 }]); //For the movement of the paddle var paddleMove = Quadratic.create([{ zeroes: [0, 120], denominator: 9, startX: 0, endX: 60, coefficients: [-1, 1], speed: 1 }]); var paddleMove2 = Quadratic.create([{ zeroes: [0, 120], denominator: 4.5, startX: 0, endX: 60, coefficients: [-1, 1], speed: 1 }]); //For the movement of the ball var ballMove = Quadratic.create([{ zeroes: [0, 120], denominator: 9, startX: 0, endX: 60, coefficients: [-1, 1], speed: 1 }]); var ballMove2 = Quadratic.create([{ zeroes: [0, 120], denominator: 4.5, startX: 0, endX: 60, coefficients: [-1, 1], speed: 1 }]); //For the movement of the block var blockMove = Quadratic.create([{ zeroes: [0, 120], denominator: 9, startX: 0, endX: 60, coefficients: [-1, 1], speed: 1 }]); //Movement of background and bars var menuMove = Quadratic.create([{ zeroes: [0, 120], denominator: 4, startX: 0, endX: 60, coefficients: [1, 1], speed: 1 }]); var menuMove2 = Quadratic.create([{ zeroes: [0, 120], denominator: 4, startX: 0, endX: 60, coefficients: [-1, 1], speed: 1 }]); //Transition into game var barMove = Quadratic.create([{ zeroes: [0, 120], denominator: 4, startX: 0, endX: 60, coefficients: [-1, 1], speed: 1 }]); //Game over movement var gameOverMove = Quadratic.create([{ zeroes: [0, 120], denominator: 6, startX: 0, endX: 60, coefficients: [-1, 1], speed: 1 }]); //Results movement var resultsMove = Quadratic.create([{ zeroes: [0, 120], denominator: 6, startX: 0, endX: 60, coefficients: [-1, 1], speed: 1 }]); //For the movement of the scores var scoresMove = []; for (var i = 0; i < 20; i++) { scoresMove.push(Quadratic.create([{ zeroes: [0, 120], denominator: 6, startX: 0, endX: 60, coefficients: [-1, 1], speed: 1 }])); } //} //Choices //{ //Extra functions //{ //Reset game mode var gameReset = function() { //Resetting variables gameTimer = 0; shaking = false; shake = []; shakeTimer = 0; ready = false; pause = false; gameOver = false; finishTimer = 0; incScore = 0; scoreTimer = 0; noOfBlocks = 0; gameOverX = 0; scaleFactor = 100; //Resetting stats score = 0; level = 1; //Resetting player and ball player.x = 300; player.score = 0; player.tries = 3; ball.x = 300; ball.y = 400; ball.theta = random(195, 345); ball.mSpeed = 5; ball.speed = 5; ball.timer = 0; //Resetting all the blocks for (var i = 0; i < blocks.length; i++) { blocks[i].reset(); } //Resetting movement barMove.reset(); gameOverMove.reset(); resultsMove.reset(); }; //} //Choice for tutorial var tutorialChoice = Choice.create([{ choices: [ { pos: [150, 450], borderCol: color(49, 224, 70), fillCol: color(105, 214, 105), txtCol: color(0), txt: "Yes", output: function() {} }, { pos: [450, 450], borderCol: color(199, 20, 20), fillCol: color(199, 59, 59), txtCol: color(0), txt: "No", output: function() { tutor = false; } } ], direction: 0 }]); //Pause var pauseChoice = Choice.create([{ choices: [ { pos: [300, 200], borderCol: color(87, 87, 87), fillCol: color(130, 130, 130), txtCol: color(255, 255, 255), txt: "Continue", output: function() { pause = false; } }, { pos: [300, 300], borderCol: color(87, 87, 87), fillCol: color(130, 130, 130), txtCol: color(255, 255, 255), txt: "Restart", output: function() { gameReset(); } }, { pos: [300, 400], borderCol: color(87, 87, 87), fillCol: color(130, 130, 130), txtCol: color(255, 255, 255), txt: "Quit", output: function() { gameReset(); scene = "home"; } } ], direction: 1 }]); //Game over choice var gameOverChoice = Choice.create([{ choices: [ { pos: [150, 450], borderCol: color(87, 87, 87), fillCol: color(130, 130, 130), txtCol: color(255, 255, 255), txt: "Retry", output: function() { gameReset(); } }, { pos: [450, 450], borderCol: color(87, 87, 87), fillCol: color(130, 130, 130), txtCol: color(255, 255, 255), txt: "Menu", output: function() { gameReset(); scene = "home"; } } ], direction: 0 }]); //} //Options //{ //Main options for home screen var options = []; for (var i = 0; i < choices.length; i++) { options.push(Option.create([choices[i]])); } //Game modes var gameModes = []; for (var i = 0; i < gameOptions.length; i++) { gameModes.push(Option.create([gameOptions[i]])); } //Back button to go back to menu var backButton = Option.create([{ pos: [520, 570], size: [60, 30], colour: { border: color(79, 79, 79), shadow: color(97, 97, 97), fill: color(138, 138, 138), text: color(0) }, text: { title: "Back", desc: "" }, image: "", output: function() { goBack = true; } }]); //} //Texts //{ //Text for intro var introText = Text.create([{ text: { texts: [ "Hello there.@@(Press space)", "Welcome to Breakout@for Khan Academy.", "I see that this could possibly be your@first time running this program.", "How about we get you set up?", "Would you like to learn how to play@Breakout?", "Very well.", "How about we get started then?", "", "", "Would you like to learn how to play@Breakout?", "As you wish.", "Note that you can play the tutorial@again any time you want to if you wish.", "Alright then.", "Let's get started.", "Welcome to Breakout for Khan Academy.", "" ], sizes: [2, 2, 2, 2, 2, 2, 2, 0, 0, 2, 2, 2, 2, 2, 2, 0], align: ["CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER"], colour: [color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255)], speed: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], fade: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5], pos: [[300, 300], [300, 300], [300, 300], [300, 300], [300, 300], [300, 300], [300, 300], [300, 300], [300, 300], [300, 300], [300, 300], [300, 300], [300, 300], [300, 300], [300, 300], [300, 300]] }, pauses: { when: [4], conditions: [ function() { if (tutorialChoice.chosen && tutorialChoice.selecting === 1) { introText.number = 9; } return tutorialChoice.chosen; } ] } }]); //Text for tutorial var tutorialText = Text.create([{ text: { texts: [ "Now we will learn how to play Breakout.", "In this game, we have a paddle, a ball@and lots of blocks to break.", "We will go through each one one by one.", "This is a paddle.", "You can control the paddle by pressing@on the AD keys or the arrow keys.", "Give it a go!", "(Use either the AD keys or the arrow@keys to move.)", "Good job!", "Now we will introduce the ball.", "In Breakout, you have to deflect the@ball and not let it hit the bottom@ of the screen.", "If you fail to keep it up, you will@lose a life.", "Lose all your lives and it's game over.", "The ball can bounce off the sides@and the ceiling, so be careful.", "Now we will have some practice.", "(Try not to let the ball disappear@into the bottom of the screen by bouncing@it off the paddle.)", "It's okay if you accidentally let@the ball fall to the bottom of the screen@when you first play it.", "You can either replay this tutorial@later or try out the avaiable game modes@as practice.", "In most of the game modes, you would@have blocks to break that score you points.", "This is a block.", "They can vary in colour, but their@purpose is the same.", "You bounce the ball off them and they@disappear.", "Try breaking the block!", "(Also note that where you bounce off@the ball on the paddle affects the@angle of the ball.)", "Well done!", "You have now learned the basics of@Breakout! (Hopefully)", "Reminder that you can always retry@this tutorial if you need to, so don't be@afraid to try again when necessary.", "Okay then...", "You are ready now...", "Welcome to the world of Breakout!", "" ], sizes: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2], align: ["CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER", "CENTER"], colour: [color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255), color(255)], speed: [0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5], fade: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], pos: [[300, 300], [300, 300], [300, 300], [300, 200], [300, 200], [300, 200], [300, 200], [300, 200], [300, 200], [300, 200], [300, 200], [300, 200], [300, 200], [300, 200], [300, 200], [300, 200], [300, 300], [300, 300], [300, 200], [300, 200], [300, 200], [300, 200], [300, 200], [300, 200], [300, 300], [300, 300], [300, 300], [300, 300], [300, 300], [300, 300]] }, pauses: { when: [6, 14, 22], conditions: [ function() { return distanceMoved >= 500; }, function() { return noOfCol >= 3; }, function() { return exampleBlock.gone; } ] } }]); //} //} //} /** SCENES */ //{ //Logo scene var logo = function() { pushMatrix(); //Transition translate(0, transitY); //Made by Jam0708 for Contest: Arcade Game pFResize(2); pFRecolour(color(255)); pFRealign("CENTER"); pixelFont("Made by Jam0708", [300, 290]); pixelFont("For Contest: Arcade Game", [300, 310]); pixelFont(":P", [300, 340]); //Block image(images.blocks.red, 300, 255); if (logoTimer < 110) { image(images.blocks.red, 300, 340); } //Ball fill(255); rectMode(CENTER); noStroke(); rect(300, ballY, 15, 15); //Presented to you on Khan Academy if (logoTimer < 602) { pixelFont("Presented to you on", [300, 2825]); } pixelFont("KHAN ACADEMY", [320, 2865]); //Khan Academy logo image(images.kaLogo, 225, 2865, 30, 30); popMatrix(); //Move ball if (logoTimer < 110 \|\| (logoTimer > 602 && logoTimer < 662)) { ballY -= 5; } else { ballY += 5; } //Transition transitY -= transitSpeed; if (logoTimer >= 220 && logoTimer < 350) { transitSpeed += 0.2; } else if (logoTimer >= 350) { if (transitSpeed > 0) { transitSpeed -= 0.4; } else { transitSpeed = 0; } } //Explosion if (logoTimer >= 730) { background(255); scene = "title"; } //Increment timer logoTimer++; //Skipping logo pFRealign("CORNER"); pFResize(1); pixelFont("Press space to skip", [50, 50]); if (keys[32]) { scene = "title"; } }; //Title screen var title = function() { background(0); //Floating blocks for (var i = 0; i < 20; i++) { for (var j = 0; j < 12; j++) { //Took me a while to generate this in one line. image(blockImgs[i % 6], (i % 2 ? 720 : 0) + (pow(-1, i)) (((j * 60) + titleTimer) % 720) - 50, 15 + i * 30); } } //Transparent background noStroke(); fill(0, 0, 0, 100); rectMode(CENTER); rect(300, 300, width, height); //Increment timer titleTimer++; //Breakout logo pushMatrix(); translate(300, 300); rotate(180 + logoRot.returnValue); image(images.breakoutLogo, 0, 0, 416 * (logoRot.returnValue / 180), 88 * (logoRot.returnValue / 180)); popMatrix(); //Khan Academy text and logo pFResize(3); pFRecolour(color(255)); pFRealign("CORNER"); for (var i = 0; i < "Khan Academy".length; i++) { pixelFont("Khan Academy"[i], [215 + (i * 20), -80 + (titleTimer < (100 + i * 15) ? 0 : (titleTimer >= (100 + i * 15) && titleTimer <= (122.5 + i * 15) ? 300 * sin((titleTimer - (100 + i * 15)) * 4) : 300))]); } image(images.kaLogo, 185, -70 + (titleTimer < 80 ? 0 : (titleTimer >= 80 && titleTimer <= 102.5 ? 300 * sin((titleTimer - 80) * 4) : 300)), 30, 30); //Boxes noStroke(); fill(255); rectMode(CENTER); for (var i = 0; i < boxSize.length; i++) { rect(60 + (i % 5) * 120, 60 + floor(i / 5) * 120, boxSize[i], boxSize[i]); //Decrement in size if (titleTimer >= timeToFade[i]) { if (boxSize[i] > 0) { boxSize[i] -= (10 + ((titleTimer - timeToFade[i]) * 0.1)); } else { boxSize[i] = 0; } } } //Make logo appear logoRot.run(); if (titleTimer >= 60) { logoRot.running = true; } //Press space to start if (titleTimer >= 180) { if (titleTimer % 60 < 30) { pFResize(2); pFRealign("CENTER"); pixelFont("Press Space to Start", [300, 500]); } //Move to next scene if space is pressed if (keys[32]) { transitMove = true; } } //Transition fill(0); noStroke(); rectMode(CORNER); rect(transitX, 0, 10000, 600); if (transitMove) { transitX -= 20; } if (transitX < -1500) { scene = saveFile.newbie ? "game" : "home"; } }; //Home screen var home = function() { //Reset before menu comes in if (homeTimer >= 0 && homeTimer <= 5) { menuMove.reset(); menuMove2.reset(); for (var i = 0; i < options.length; i++) { options[i].moveIn.reset(); options[i].moveOut.reset(); } goTo = ""; selectedChoice = 0; pauseChoice.reset(); gameOverChoice.reset(); } background(0); //Prepare movement menuMove.run(); menuMove2.run(); //Check keys checkLeft.run(); checkA.run(); checkRight.run(); checkD.run(); checkUp.run(); checkW.run(); checkDown.run(); checkS.run(); //Background pushMatrix(); translate(saveFile.background ? 900 + menuMove.returnValue + menuMove2.returnValue : 900, 0); pushMatrix(); translate(-230, 150); rotate(-30); //Blocks for (var i = 0; i < blockImgs.length; i++) { //Draw multiple copies of each one for (var j = 0; j < 7; j++) { image(blockImgs[i], 120 + j * 100, 50 + i * 50, 80, 40); } } //Ball (fill)(255, 100); rect(410, 610, 30, 30); (fill)(255, 200); rect(405, 605, 30, 30); fill(255); rect(400, 600, 30,30); popMatrix(); popMatrix(); //Cover background with slightly transparent rectangle (fill)(0, 150); rectMode(CENTER); rect(300, 300, 600, 600); //Increment timer homeTimer++; if (homeTimer >= 100) { options[0].moveIn.running = true; } //Bring in background and bars if (options[2].moveIn.running && !menuMove.finished) { menuMove.running = true; } //Change options if (homeTimer >= 150 && goTo === "") { //Change options if (checkLeft.pressed \|\| checkA.pressed) { if (selectedChoice !== 0 && selectedChoice !== 3 && selectedChoice !== 6) { selectedChoice--; } else { if (selectedChoice === 0) { selectedChoice = 0; } else if (selectedChoice === 3) { selectedChoice = 3; } else { selectedChoice = 6; } } } else if (checkRight.pressed \|\| checkD.pressed) { if (selectedChoice !== 2 && selectedChoice !== 5 && selectedChoice !== 6) { selectedChoice++; } else { if (selectedChoice === 2) { selectedChoice = 2; } else if (selectedChoice === 3) { selectedChoice = 5; } else { selectedChoice = 6; } } } if (checkDown.pressed \|\| checkS.pressed) { if (selectedChoice >= 0 && selectedChoice <= 2) { selectedChoice += 3; } else if (selectedChoice >= 3 && selectedChoice <= 5) { selectedChoice = 6; } } else if (checkUp.pressed \|\| checkW.pressed) { if (selectedChoice >= 3 && selectedChoice <= 5) { selectedChoice -= 3; } else if (selectedChoice === 6) { selectedChoice = 3; } } //Check if player confirms their choice if (keys[32]) { options[selectedChoice].output(); } } //Top bar fill(87, 87, 87); rectMode(CENTER); noStroke(); rect(1200 + menuMove.returnValue + menuMove2.returnValue, 52.5, 650, 5); fill(153, 153, 153); rect(1200 + menuMove.returnValue + menuMove2.returnValue, 25, 650, 50); //Coins imageMode(CENTER); image(images.coin[floor(frameCount / 5) % 8], 930 + menuMove.returnValue + menuMove2.returnValue, 25); pFResize(2); pFRealign("CORNER"); pFRecolour(color(255)); pixelFont(saveFile.coins.toString(), [950 + menuMove.returnValue + menuMove2.returnValue, 20]); //Bottom bar fill(153, 153, 153); rectMode(CENTER); rect(1200 + menuMove.returnValue + menuMove2.returnValue, 575, 650, 50); //Draw the choices for (var i = 0; i < options.length; i++) { options[i].draw(); //Move the options if (homeTimer >= 100) { if ((i !== 0 && options[i - 1].moveIn.x >= 15)) { options[i].moveIn.running = true; } } //Select one of the choices if (i === selectedChoice) { options[i].selected = true; } else { options[i].selected = false; } } //Change scene if (goTo !== "") { options[0].moveOut.running = true; //Move the choices for (var i = 0; i < options.length; i++) { //Move the options if ((i !== 0 && options[i - 1].moveOut.x >= 15)) { options[i].moveOut.running = true; } } } if (options[2].moveOut.running && !menuMove2.finished) { menuMove2.running = true; } if (options[6].moveOut.x >= 60) { homeTimer = 0; switch (goTo) { //Game modes case "modeSelect": scene = "modes"; break; //High scores case "scores": scene = "scores"; break; //Settings case "settings": scene = "settings"; break; //Tutorial case "tutorial": scene = "game"; gameType = "tutorial"; break; //Customs case "customise": scene = "custom"; break; //Achievements case "achievements": scene = "achievements"; break; } } }; //Select game mode var modes = function() { //Reset before choices come in if (modeTimer >= 0 && modeTimer <= 5) { menuMove.reset(); menuMove2.reset(); for (var i = 0; i < gameModes.length; i++) { gameModes[i].moveIn.reset(); gameModes[i].moveOut.reset(); } selectedChoice = 0; goTo = ""; gameType = ""; } //Prepare movement menuMove.run(); menuMove2.run(); //Check keys checkLeft.run(); checkA.run(); checkRight.run(); checkD.run(); checkUp.run(); checkW.run(); checkDown.run(); checkS.run(); //Background background(0); imageMode(CENTER); rectMode(CENTER); pushMatrix(); translate(saveFile.background ? 900 + menuMove.returnValue + menuMove2.returnValue : 900, 0); //Blocks falling in a curve for (var i = 0; i < blockImgs.length; i++) { pushMatrix(); translate(100 + 350 * sin(i * (90 / (blockImgs.length - 1))), 100 + i * 70); rotate((i + 1) * (30 / (blockImgs.length - 1))); (fill)(blockCols[i], 150); rect(-10 - 10 * sin(i * (90 / (blockImgs.length - 1))), -10 - 10 * sin(i * (90 / (blockImgs.length - 1))), 100 + 100 * sin(i * (90 / (blockImgs.length - 1))), 50 + 50 * sin(i * (90 / (blockImgs.length - 1)))); (fill)(blockCols[i], 200); rect(-5 - 5 * sin(i * (90 / (blockImgs.length - 1))), -5 - 5 * sin(i * (90 / (blockImgs.length - 1))), 100 + 100 * sin(i * (90 / (blockImgs.length - 1))), 50 + 50 * sin(i * (90 / (blockImgs.length - 1)))); image(blockImgs[i], 0, 0, 100 + 100 * sin(i * (90 / (blockImgs.length - 1))), 50 + 50 * sin(i * (90 / (blockImgs.length - 1)))); popMatrix(); } //Balls pushMatrix(); translate(100, 400); rotate(-45); fill(145, 145, 145); rect(-10, 10, 30, 30); fill(199, 199, 199); rect(-5, 5, 30, 30); fill(255); rect(0, 0, 30, 30); popMatrix(); pushMatrix(); translate(500, 200); rotate(120); fill(145, 145, 145); rect(-10, -10, 30, 30); fill(199, 199, 199); rect(-5, -5, 30, 30); fill(255); rect(0, 0, 30, 30); popMatrix(); popMatrix(); //Cover background with slightly transparent rectangle (fill)(0, 150); rectMode(CENTER); rect(300, 300, 600, 600); //Increment timer modeTimer++; //Make options flow in if (modeTimer >= 100) { gameModes[0].moveIn.running = true; menuMove.running = true; } //Key inputs if (modeTimer >= 150 && goTo === "" && gameType === "") { if (checkLeft.pressed \|\| checkA.pressed) { if (selectedChoice === 1) { selectedChoice = 0; } } else if (checkRight.pressed \|\| checkD.pressed) { if (selectedChoice === 0) { selectedChoice = 1; } } if (checkDown.pressed \|\| checkS.pressed) { if (selectedChoice !== 2) { selectedChoice = 2; } } else if (checkUp.pressed \|\| checkW.pressed) { if (selectedChoice === 2) { selectedChoice = 0; } } //Check if player confirms their choice if (keys[32]) { gameModes[selectedChoice].output(); } } //Top bar fill(87, 87, 87); rectMode(CENTER); noStroke(); rect(1200 + menuMove.returnValue + menuMove2.returnValue, 52.5, 650, 5); fill(153, 153, 153); rect(1200 + menuMove.returnValue + menuMove2.returnValue, 25, 650, 50); //Bottom bar fill(153, 153, 153); rectMode(CENTER); rect(1200 + menuMove.returnValue + menuMove2.returnValue, 575, 650, 50); //More options for (var i = 0; i < gameModes.length; i++) { gameModes[i].draw(); //Move the options if (modeTimer >= 100) { if ((i !== 0 && gameModes[i - 1].moveIn.x >= 15)) { gameModes[i].moveIn.running = true; } } //Select one of the choices if (i === selectedChoice) { gameModes[i].selected = true; } else { gameModes[i].selected = false; } } //Change scene if (goTo !== "" \|\| gameType !== "") { gameModes[0].moveOut.running = true; //Move the choices for (var i = 0; i < gameModes.length; i++) { //Move the options if ((i !== 0 && gameModes[i - 1].moveOut.x >= 15)) { gameModes[i].moveOut.running = true; } } //Move the background menuMove2.running = true; } if (gameModes[2].moveOut.x >= 60) { modeTimer = 0; //Go to game if (gameType !== "") { scene = "game"; } else { scene = "home"; } } }; //Scores var scores = function() { background(0, 0, 0); imageMode(CENTER); //Sort the scores //From https://www.w3schools.com/jsref/jsref_sort.asp var top10Scores = saveFile.scores.normal.sort(function (a, b) { return b - a; }); //Reset before choices come in if (scoresDisplayTimer >= 0 && scoresDisplayTimer <= 5) { menuMove.reset(); menuMove2.reset(); backButton.moveIn.reset(); backButton.moveOut.reset(); for (var i = 0; i < 20; i++) { scoresMove[i].reset(); } goBack = false; } //Prepare movement menuMove.run(); menuMove2.run(); pushMatrix(); translate(saveFile.background ? 900 + menuMove.returnValue + menuMove2.returnValue : 900, 0); //Blocks in trophy pushMatrix(); translate(255, 120); rotate(85); image(blockImgs[0], 0, 0, 60, 30); popMatrix(); pushMatrix(); translate(285, 120); rotate(83.5); image(blockImgs[2], 0, 0, 60, 30); popMatrix(); pushMatrix(); translate(310, 120); rotate(87.5); image(blockImgs[3], 0, 0, 60, 30); popMatrix(); pushMatrix(); translate(265, 120); rotate(92.5); image(blockImgs[1], 0, 0, 60, 30); popMatrix(); pushMatrix(); translate(345, 120); rotate(92.5); image(blockImgs[5], 0, 0, 60, 30); popMatrix(); pushMatrix(); translate(325, 120); rotate(91.5); image(blockImgs[4], 0, 0, 60, 30); popMatrix(); //The trophy image(images.trophy, 300, 300); //The ball noStroke(); rectMode(CENTER); pushMatrix(); translate(450, 120); rotate(25); (fill)(255, 150); rect(-5, -5, 20, 20); (fill)(255, 200); rect(-2.5, -2.5, 20, 20); fill(255); rect(0, 0, 20, 20); popMatrix(); popMatrix(); //Cover background with slightly transparent rectangle (fill)(0, 150); rectMode(CENTER); rect(300, 300, 600, 600); //Increment timer scoresDisplayTimer++; //Make options flow in if (scoresDisplayTimer >= 100) { scoresMove[0].running = true; menuMove.running = true; } //Key inputs if (scoresMove[9].finished) { //Check if player confirms their choice if (keys[32]) { backButton.output(); } } //Top bar fill(87, 87, 87); rectMode(CENTER); noStroke(); rect(1200 + menuMove.returnValue + menuMove2.returnValue, 52.5, 650, 5); fill(153, 153, 153); rect(1200 + menuMove.returnValue + menuMove2.returnValue, 25, 650, 50); //Bottom bar fill(153, 153, 153); rectMode(CENTER); rect(1200 + menuMove.returnValue + menuMove2.returnValue, 575, 650, 50); //All the scores for (var i = 0; i < 10; i++) { //Box noStroke(); rectMode(CENTER); fill(i === 0 ? color(255, 213, 0) : (i === 1 ? color(200) : (i === 2 ? color(140, 78, 13) : (color)(50, 255 - ((i - 3) * 30))))); rect(900 - scoresMove[i].returnValue + scoresMove[i + 10].returnValue, 100 + (i * (400 / 9)), 500, 30); //Text pFResize(2); pFRealign("CORNER"); pFRecolour((i < 3 ? color(0) : color(255))); pixelFont((i + 1) + (i === 0 ? "st" : (i === 1 ? "nd" : (i === 2 ? "rd" : "th"))) + ": " + (top10Scores[i] ? top10Scores[i] : ""), [675 - scoresMove[i].returnValue + scoresMove[i + 10].returnValue, 93 + (i * (400 / 9))]); //Move the options scoresMove[i].run(); if (scoresDisplayTimer >= 100) { if ((i !== 0 && scoresMove[i - 1].x >= 5)) { scoresMove[i].running = true; } } } //Back button backButton.draw(); //Back button will always be selected backButton.selected = true; //Move back button if (scoresDisplayTimer >= 150) { backButton.moveIn.running = true; } if (scoresMove[16].x >= 20) { backButton.moveOut.running = true; } //Change scene if (goBack) { scoresMove[10].running = true; //Move the choices for (var i = 10; i < 20; i++) { //Prepare movement scoresMove[i].run(); //Move the options if ((i !== 10 && scoresMove[i - 1].x >= 5)) { scoresMove[i].running = true; } } //Move the background menuMove2.running = true; } if (scoresMove[19].x >= 60) { scene = "home"; scoresDisplayTimer = 0; } }; //Settings var settings = function() { }; //Customs var custom = function() { }; //Game var game = function() { switch (gameType) { //Introduction case "intro": //{ if (introText.number !== 7 && introText.number !== 15) { //Tutorial text introText.draw(); //Tutorial choice if (introText.number >= 4 && !tutorialChoice.moveDown.finished) { if (introText.vis >= 200) { tutorialChoice.input(); } tutorialChoice.anim(); tutorialChoice.draw(); } } else { //Move on to tutorial if (introText.number === 7) { gameType = "tutorial"; } //Move on to menu else if (introText.number === 15) { scene = "home"; saveFile.newbie = false; } } //} break; //Tutorial case "tutorial": //{ tutorialTimer++; //Reset everything for the tutorial if (tutorialTimer >= 0 && tutorialTimer <= 5) { //Reset everything tutorialText.reset(); paddleMove.reset(); paddleMove2.reset(); ballMove.reset(); ballMove2.reset(); blockMove.reset(); exampleBlock.reset(); exampleBlock.moveIn.returnValue = 900; paddleX = 0; player.x = 300; ball.x = 300; ball.y = 300; ball.theta = random(195, 345); ball.mSpeed = 5; exampleBlock.gone = false; saveFile.newbie = false; distanceMoved = 0; noOfCol = 0; } //The tutorial if (tutorialTimer >= 200) { //Moving the paddle paddleMove.run(); paddleMove2.run(); //Moving the ball ballMove.run(); ballMove2.run(); //Moving the block blockMove.run(); //The player pushMatrix(); translate(paddleX - paddleMove2.returnValue - ballMove2.returnValue, tutorialText.number < 13 ? (175 - paddleMove.returnValue) : 0); player.draw(); popMatrix(); //The ball pushMatrix(); translate(paddleX - 800 - ballMove2.returnValue -400 + ballMove.returnValue, 0); ball.draw(); popMatrix(); //The block pushMatrix(); translate(-400 + blockMove.returnValue, 0); exampleBlock.draw(); popMatrix(); //The text tutorialText.draw(); //Move the paddle if (tutorialText.number >= 3) { paddleMove.running = true; } //Allow player to test controls if ((tutorialText.number === 6 && distanceMoved <= 500) \|\| (tutorialText.number === 14 && noOfCol < 3) \|\| (tutorialText.number === 22 && !exampleBlock.gone)) { player.move(); } //Move the paddle if (tutorialText.number >= 8 && tutorialText.number < 15) { if (paddleX < 800) { paddleX += 20; } else { paddleX = 800; } } if (tutorialText.number >= 13) { paddleMove2.running = true; } if (tutorialText.number >= 15 && tutorialText.number < 23) { if (paddleX < 1600) { paddleX += 20; } else { paddleX = 1600; } } if (tutorialText.number >= 23) { if (paddleX < 2400) { paddleX += 20; } else { paddleX = 2400; } } //Reposition paddle if (tutorialText.number === 12 \|\| tutorialText.number === 20) { player.x = 300; } //Move the ball if (tutorialText.number >= 9) { ballMove.running = true; } if (tutorialText.number >= 21) { ballMove2.running = true; } //Allow ball to move if ((tutorialText.number === 14 && noOfCol < 3) \|\| (tutorialText.number === 22 && !exampleBlock.gone)) { ball.move(); ball.collide(tutorialText.number < 20 ? [player] : [player, exampleBlock], player); } //Reposition ball if (tutorialText.number === 20) { ball.x = 300; ball.y = 400; ball.theta = 170; ball.mSpeed = 5; } //Move the block if (tutorialText.number >= 18) { blockMove.running = true; } //Move on to the menu if (tutorialText.number >= 29) { //Change scene scene = "home"; tutorialTimer = 0; } } //Allow people to skip if (tutorialTimer >= 100) { pFResize(1); pFRealign(CORNER); pFRecolour(255); pixelFont("Press ENTER to skip.", [50, 50]); if (keys[ENTER]) { tutorialText.char = 0; tutorialText.line = 0; tutorialText.number = 29; } } //} break; //Single player (original) case "normal": //{ //Timer gameTimer++; //Background background(0); //Prepare movement barMove.run(); //Shaking if (shaking) { shakeTimer++; shake = [random(-5, 5), random(-5, 5)]; if (shakeTimer >= 10) { shaking = false; } } else { shakeTimer = 0; shake = [0, 0]; } //Shake effect pushMatrix(); translate(shake[0] + gameOverX, shake[1]); //Draw player and paddle if (gameTimer >= 50) { player.draw(); ball.draw(); } //Draw all the blocks for (var i = 0; i < blocks.length; i++) { blocks[i].draw(); blocks[i].moveIn.run(); //Move all the blocks if (!blocks[i].moveIn.running && (i !== 0 && blocks[i - 1].moveIn.x >= 2)) { blocks[i].moveIn.running = true; } //If all blocks are gone if (noOfBlocks >= 66) { //Stop the controls ready = false; //Not ready yet blocks[71].moveIn.finished = false; //Get rid of the other blocks if (finishTimer >= 30 && finishTimer < 40) { //Get rid of blocks blocks[i].reset(); //Shake shake = [random(-5, 5), random(-5, 5)]; } //Next level else if (finishTimer >= 40) { //Increment level level++; //Reset noOfBlocks = 0; shake = [0, 0]; //Reposition ball ball.x = 300; ball.y = 400; //Change angle of ball ball.theta = random(195, 345); //Make ball slightly faster ball.mSpeed += (ball.mSpeed < 10 ? 0.25 : 0); ball.speed = ball.mSpeed; //Add a life player.tries += (player.tries < 5 ? 1 : 0); //Start chain of animations blocks[0].moveIn.running = true; } } } popMatrix(); //Allow things to move if (((ready && !pause) \|\| pauseChoice.moveDown.running) && !gameOver) { player.move(); ball.move(); ball.collide([player].concat(blocks), player); } //Move first block if (gameTimer >= 100) { blocks[0].moveIn.running = true; } //Move bar if (gameTimer >= 140) { barMove.running = true; } //Inform user that they can pause if (gameTimer < 200) { pFResize(1.5); pFRealign("CENTER"); pFRecolour(color(199, 199, 199)); pixelFont("Note that you can pause by pressing the P key.", [300, 550]); //Reset game over choice gameOverChoice.reset(); } //Game is ready when all blocks have moved in if (blocks[71].moveIn.finished) { ready = true; finishTimer = 0; //Pause if (keys[80] && !gameOver) { pause = true; } } //Move bar pushMatrix(); translate(900 - barMove.returnValue + gameOverX, 0); //Draw the stats fill(100, ball.y < 75 ? 100 : 255); noStroke(); rectMode(CENTER); rect(300, 37.5, 600, 75); //Draw the number of balls left fill(255, ball.y < 75 ? 100 : 255); for (var i = 0; i < player.tries; i++) { rect(550 - (i * 30), 25, 20, 20); } //Score pFResize(2); pFRealign("CORNER"); pFRecolour(color(255, ball.y < 75 ? 100 : 255)); pixelFont("Score: " + floor(score), [25, 18]); //Show how many blocks are left to erase pixelFont("Next level: " + (66 - noOfBlocks), [25, 48]); //Level pFRealign("CENTER"); pixelFont("Level " + level, [300, 25]); popMatrix(); //Displaying score if (!gameOver) { if (floor(score) <= player.score && incScore !== 0) { //Increment timer scoreTimer++; if (scoreTimer <= 30) { //Display change in score pFResize(1.5); pFRealign("CENTER"); pFRecolour(color(62, 240, 62, ball.y < 50 ? 100 : 255)); pixelFont("+" + incScore, [25 + textWidth("Score: " + score), 10]); } else { score += (incScore / 30); incScore = 0; } } else { //Reset some variables score = player.score; scoreTimer = 0; } } //Increment transition timer if (noOfBlocks >= 66) { finishTimer++; //Let user know that they leveled up pFResize(3); pFRealign("CENTER"); pFRecolour(color(255, 242, 0)); pixelFont("LEVEL UP!", [300, 75]); } //Pause if (pause \|\| pauseChoice.moveDown.running) { //Transparent background (fill)(0, 100); noStroke(); rectMode(CENTER); rect(300, 1200 + pauseChoice.moveUp.returnValue + pauseChoice.moveDown.returnValue, width, height); //Pause pFResize(3); pFRealign("CENTER"); pFRecolour(color(255)); pixelFont("PAUSE", [300, 1025 + pauseChoice.moveUp.returnValue + pauseChoice.moveDown.returnValue]); //Draw choice pauseChoice.draw(); pauseChoice.anim(); //Allow inputs if (pauseChoice.moveUp.finished) { pauseChoice.input(); } } //If not paused if (pauseChoice.moveDown.finished) { pauseChoice.reset(); } //Game over if (player.tries < 0) { gameOver = true; } if (gameOver) { //Prepare movement gameOverMove.run(); gameOverMove.running = true; resultsMove.run(); //Run movement if (gameOverX >= 3500) { resultsMove.running = true; } //For displaying the score if (gameOverX >= 3000 && gameOverX < 3800) { score = 0; } else if (gameOverX >= 3800) { if (score < player.score) { score += (player.score / 120); } else { score = player.score; } } //Move everything out of the way if (gameOverMove.finished) { gameOverX += 30; } //Finish image(images.finish, 300 - resultsMove.returnValue, -300 + gameOverMove.returnValue); //Results image(images.results, 900 - resultsMove.returnValue, 200); pFResize(2); pFRealign("CENTER"); pFRecolour(color(255)); pixelFont("Level: " + level, [900 - resultsMove.returnValue, 300]); pixelFont("Score: " + floor(score), [900 - resultsMove.returnValue, 340]); //New highscore? if (gameOverX >= 8000) { //New highscore if ((saveFile.scores.normal.length !== 0 && player.score >= m(saveFile.scores.normal)) \|\| saveFile.scores.normal.length === 0) { pushMatrix(); translate(400, 330); rotate(-30); scale(scaleFactor); pFResize(2); pFRealign("CENTER"); pFRecolour(color(255, 191, 0)); pixelFont("NEW", [0, -10]); pixelFont("BEST", [0, 10]); popMatrix(); //Make the words appear if (scaleFactor > 1) { scaleFactor -= 5; } else { scaleFactor = 1; } } //Not new highscore else { pFResize(1.5); pFRealign("CENTER"); pFRecolour(color(120, 120, 120)); pixelFont("Best score: " + m(saveFile.scores.normal), [300, 370]); } } //Add score if (gameOverX > 8099 && gameOverX < 8101) { saveFile.scores.normal.push(player.score); } //Draw choices if (gameOverX >= 9500) { gameOverChoice.draw(); gameOverChoice.anim(); gameOverChoice.input(); } } //} break; //Single player (with a twist) //Multiplayer //Minigames } }; //Credits var credits = function() { }; //} /** THE GAME **/ //{ draw = function() { background(0); switch (scene) { //Logo case "logo": logo(); break; //Title screen case "title": title(); break; //Home screen case "home": home(); break; //Modes case "modes": modes(); break; //Scores case "scores": scores(); break; //Settings case "settings": settings(); break; //Customs case "custom": custom(); break; //Game case "game": game(); break; //Credits case "credits": credits(); break; //Testing area default: break; } //Mini debugger area fill(255); textSize(10); textAlign(CORNER, CORNER); }; //} //} //END OF CODE
Folds	4,56,62,116,119,1366,1868,2578,2584,2638,2641,2742,2745,2948,2951,3098,3101,3392,3395,3474,3477,3791,4461,4559,4562,4677,4680,4997,5000,5246,5249,5486,5489,5493,5496,5500,6194,6272
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgOGzkYvlCww
Votes	283
Spin-Offs	28
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	{"id":"6099185963122688","title":"Contest: Arcade Game","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Jam0708
Author Name	Jam0708
Author ID	kaid_684064714307603949888221
Author Profile Access	COACH

Archive Data

Added	6 months ago, 1739460179083
Updated	4 months ago, 1744845041401
Source Deleted	unknown