Viewing Program

Program Data

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

Title	Collection of Animal Games [Contest Entry]
ID	5179406503346176
Created	6 years ago, 1571091778480
Updated	6 years ago, 1573768168847
Code	/*CONTEST WINNER/ //Credit to Green Ghost for the math behind the polygon-to-mouse collisions //If any code is changed, restart or else the images will look funky rectMode(CENTER);//Center the rectangles textAlign(CENTER, CENTER);//Center the text along both axis imageMode(CENTER);//Center all of the images I used textFont(createFont('Loyalty Custom Bold')); /Since 'Loyalty Custom' isn't a font, Khan Academy's default font automatically loads. The adjective 'bold' at the end just bolds the font/ noStroke();//Remove stroke from shapes var pxlImgs = { menuRabbit: [ ' 00 00', ' 0110 0110', ' 01230 03210', ' 012230 032210', ' 03220 03230', ' 03230003230', ' 033333330', ' 0333333330', ' 033333333330', ' 033033330330', ' 033033330330', ' 032233332230', ' 00033300333000', '0330111111110330', '0110000000000110', '0000 0000' ], menuHorse: [ ' b', ' b bb', ' bb bbdb', ' dbb dbbdb', ' ddbdddbdr', ' ddddddbrd', ' dbdbdbrbdd', ' bbbdbdbrbbbdd', ' bbbdbbdbbrbbddd', ' bbbbbbbbbbrbbbdd', ' bbwbbgggbbbrbbbddd', ' bwbbbg0bbbbrbbbbddd', ' bwbbb00bbbbrbbbbddd', ' wwbbbbbbbbbgbbbbbdd', ' bbbbbbbbbbbrrbbbbbddd', ' rrrbbbbbbbbrbrbbbbbbdd', ' bbbrrbbbbrrbbrbbbbbbdd', ' bbbbbbrrrrbbbbrbbbbbbbd', ' bbbbbbbrgrbbbbrbbbbbbbb', ' bbbbbbbbbrrbbbrbbbbbbbbb', ' bbgbbbbbbbbrbbrbbbbbbbbbb', '0bg0gbbbbbbbrrrrbbbbbbbbbb', 'b000gbbgbbbbr bbbbbbbbbb', 'b0b0gbgrrrrr bbbbbbbbbb', ' bbbbgb bbbbbbbbbb', ' ggggb bbbbbbbbbb', ' bbb bbbbbbbbbb' ], menuFish: [ ' 00', ' 0oo0', ' 0o0o0', ' 0 0o0oo0', ' 0o0o0ooo0', ' 0o0o0o0oo00', ' 0ooooo0oooo0 000', ' 000000000oo0 0oo00', ' 00oooooo0ww00 0oo0o00', ' 0oooooo00o0w0o0ooo0o000', ' 0ooooooooo0o0w0o0o0ooo00', ' 000ooooooooooo0w0oooo0000', ' 0oooooooowwwwwoo0w0oo0oo00', ' 0ooooooowwwwwwwoo0w0ooo000', '0oooooooowww00wwoo0w0oooo0', '0wwwwwoooww0000wooo0w0000000', 'wwwwwwwooww0000wooo0w0ooooo00', 'www00wwoowww00wwooo0w0o00oo00', 'ww0000wooowwwwwooo00w0ooo0000', 'ww0000wooooooooooo00w0o0oooo0', 'www00wwooooooroooo0w0ooo0000', ' wwwwooooooorroooo0w0ooooo00', ' 0oooooooooorrpoo0w0 0ooo00', ' 0ooooorrrrrppo0w0 0000', ' 0o0ooooorrrrpo000 00', '0oo00oooooooo00ooo0', ' 0oo0 0000000o0oooo0', ' 0oo0 0o00oo0', ' 00 00 00' ], rbtHop1: [ ' 00', ' 0gd0', ' 0ggd0 000', ' 0ggd0 0dpp0', ' 0g1d0 dpppp0', ' 0g1d00dpp2p0', ' 011dd03p22p0', ' 01dd0322220', ' 0dd303p22p0', ' 0dd303pp2p0', ' 0d330d3p230 000000', ' 03330dd3p30 00003ggggg00', ' 0313301dd3d00wwwwwgd111gg0', ' 03ww103ddd11gwwwwww1111ggg0', ' 0377w111dddd1gwwwwww11111ggg0', ' 037771dddddddgwwwwwww111ggggg0', '0377711d000dddgwwwwwwww11ggdggg0', '03g771d0w00dddgwwwwwwww111g1ggg0', '0gggg1d0000dddgwwwwwwwww1gg1ggg0', '0gggg1d000ddd1gwwwwwwwww1d11gd1g0', '0ggggdddddddd1gw4wwwwwwwdd11gd1100', '0gg777dddddd1gg44wwwwwwwd111gd11010', '07754wwdddd1gg444ww4wwwdd11dgd11010', ' 06664w1dd1gg4444444wwwd113dd313010', ' 04344wgggggw4444444wwdd13ddd11300', ' 00003d444444w4w444wwd33dd1111d0', ' 0dd4444ww44444ww111111ddd0', ' 077d3444444447111111ddddd0', ' 077dd7777000001111ddddddd0', ' 077d777770 07733ddddddddd0', ' 000777770 0777733333333330', ' 000000 000000000000000' ], rbtHop3: [ ' 00', ' 0gd0', ' 0ggd0 000', ' 0ggd0 0dpp0', ' 0g1d0 dppp0', ' 0g1d00dpp2p0', ' 011dd03p22p0', ' 01dd0322220 0000', ' 0dd303p22p0 0000gggg0', ' 0dd303pp2p0 03ggggggggg0', ' 0d33013p230 0wwgddddgdggg0', ' 03330dd3p30 0wwwwdddddggggg0', ' 03g330ddd3d000wwwwwddddgggdggg0', ' 03wwd031dd11gwwwwwwwdddgdgdggg0', ' 0377w111dddd1gwwwwwwwwdddggdggg0', ' 037771dddddddgwwwwwwwwdddggdggg0', '03ggg11dddddddgwwwwwwwwwdd1ddgd1g0', '03ggg1dd00ddddgwwwwwwwwwdddddgd1100', '0gggg1d00dddddgww4wwwwww1ddd1gd11010', '0gggg1d0ddddd1gww4wwwwww1dd3dd311010', '0g777dddddddd1gww4ww4ww11d3ddd11d010', '07777dddddd1ggww4444ww1d111dddddd00', '0gg45wwdddd1gg4ww4444w1d1d1111ddd0', ' 06665w1dd1gg444ww444w1dd11d11dd0', ' 05d55wgggggw444w4404w110dd111d0', ' 00003d444444w4w000000000ddddd0', ' 0dd4444w40 0d00dd00', ' 0ggd37440 0dd0d00', ' 0gd007770 0d0d00', ' 0d007700 00770', ' 00 07d0 00', ' 00' ], rbtHop4: [ ' 00', ' 0gd0', ' 0ggd0 000', ' 0ggd0 0dpp0', ' 0g1d0 dpppp0', ' 0g1d00dpp2p0', ' 011dd03p22p0', ' 01dd0322220 00000', ' 0dd303p22p0 000ggggg0', ' 0dd303pp2p0 03ggggggggg0', ' 0d330d3p230 0wwgddddgdggg0', ' 03330dd3p30 00wwwwdddddggggg0', ' 03g330ddd3e00wwwwwwwdddgdgdggg0', ' 03wwd03ddd11gwwwwwwwwdddggdggg0', ' 0377w111dddd1gwwwwwwwwdddgddg3dg0', ' 037771dddddddgwwwwwwwwwdddddg3dd0 0', '0377711d000dddgwwwwwwwwwdddddg3dd0010', '031771d0w00dddgwwwwwwwww3ddd3g3dd0110', '011111d0000dddgww4wwwwww3dd3333d30d30', '011111d000ddd1gww4www4w3333333dd3030', '01111dddddddd1gww4w444w3d333dddd300', '011777dddddd1ggww4w444wd3ddddd330', '07754wwdddd1gg4ww4d44d0d33dd3d30', ' 06664w1dd1gg444wg000000g333dd30', ' 04344wgggggw444w0 03dddd0', ' 00003d444444w40 000ddd0', ' 0dd4444ww0 0dd0d30', ' 0ggd37440 0d0d30', ' 077dd7770 00ww0', ' 077d77770 0ww0', ' 0007770 00', ' 0000' ], carrot: [ ' g g ', ' dggdgdg', ' dggdgdg', ' ddgdddg', ' dggdgg', ' dggdg', ' dgd', ' 111oooo', '11o121ooo', '111o2oooo', '11ooooooo', '111o2ooo1', '11o12oo1o', '11ooooooo', '111oooooo', ' 111o2oo', ' 1ooo21o', ' 11ooooo', ' 11ooooo', ' 112oo', ' 1oooo', ' 11ooo', ' 11o', ' 1oo', ' 1' ], horse1: [ ' 00', ' 0b0 00', ' 0d0000b0', ' 0bd01210', ' 0ddd21110', ' 01ddd1db10', ' 02dddddb0', ' 0012dddddbb0', ' 011212ddd0bb0', ' 000 011212ddd0bb0', ' 0011100000000000111222dddddb0', ' 021112ddddddddd21122222ddddbb0', ' 012212dddddddddddddddd2202dd2b0', ' 0111202ddddddddddddddddd20022dd0', '0001110002ddddddddddddddddd20 0000', '011100 02ddddddddddddddddd0', ' 000 0dddddd2dddddd2dddd0', ' 0ddddd222ddddd22dddd0', ' 0ddddd02222222220ddd0', ' 00ddddd200000000000dddd0', ' 0dddddd00 022000dd0', ' 0ddd00000 0220 0dd0', ' 3dd0 0220 0dd0', ' 000 02220 0dd0', ' 0030 0dd0', ' 0030' ], horse2: [ ' 00', ' 0b0 00', ' 0d0000b0', ' 0bd01210', ' 0ddd21110', ' 01ddd1db10', ' 02dddddb0', ' 000 0012dddddbb0', ' 0011100000 011212ddd0bb0', ' 021112dddd00000111212ddd0bb0', ' 011212ddddddddd2112222dddddb0', ' 0111102ddddddddddd122222ddddbb0', ' 01110002ddddddddddddddd2202dd2b0', ' 0110 022ddddddddddddddd20022dd0', '0110 0dddd2dddd2dddddd0 0000', '020 0000ddd22dddd2dddd220', '00 02dddddd022ddd20ddd20', ' 0ddddd2000222220ddd0', ' 0dd00000 000000dd0', ' 0dd00dd0 0dd0', ' 030 030 0dd0', ' 0dd0', ' 0dd0', ' 0dd0', ' 0030' ], horse3: [ ' 00', ' 0b0 00', ' 0d0000d0', ' 0bd01210', ' 0ddd21110', ' 01ddd1db10', ' 02dddddb0', ' 012dddddbb0', ' 02212ddd0bb0', ' 02212ddd0bb0', ' 000 02122dddddb0', ' 011100000000122222ddddbb0', ' 021112dddddd011dd220d22db0', ' 01212dddddddd21ddd22022dd0', ' 011102ddddddddddddd2200000', ' 011002dddddddddddddd20', ' 0110 02ddddddddd2dddd20', '001110 0dddd2dddd2dddd20000', '01110 0dddd02ddd20ddd022220', ' 000 0ddd0222220ddd0222220', ' 0ddd000000000ddd000220', ' 0dddd00 0dd0 0220', ' 00dddd0 0ddd0 000', ' 000dd0 0dd0', ' 022030 30', ' 0220', ' 0220', ' 000', '' ], horse4: [ ' 00', ' 0b0 00', ' 0d0000d0', ' 0bd01210', ' 0ddd21110', ' 01ddd1db10', ' 02dddddb0', ' 012dddddbb0', ' 02212ddd0bb0', ' 02212ddd0bb0', ' 02122dddddb0', ' 0122222ddddbb0', ' 000 011dd2202dd2b0', ' 011100000000d21ddd22022dd0', ' 021112ddddddddddddd2200000', ' 01212ddddddddddddddd20', ' 011102ddddddddddddddd20', ' 0011002ddddddddddd2ddd20', '001110 02ddddddddddd2dddd000', '011110 0dddd2dddddd22ddddd20', ' 0000 0dddd22dd22220dddddd0', ' 0ddd0222000000000dd0', ' 0ddd0000 0220dd0', ' 0ddd0 0030dd0', ' 0ddd0 030', ' 0dd0', ' 0dd0', ' 0dd0', ' 0030' ], rock: [ ' 00000000', ' 0011222211000', ' 011334444333310', ' 011134444444333100', ' 0111334444433333331000', ' 013334444433333444333100', ' 01334444333444331344433310', ' 013344433444444311113443310', ' 013344444444443331113344330', ' 511344444444444444113444430', ' 555555555555555555555555555' ], bush: [ ' 11', ' 122111 11', ' 1221111 1331', ' 1112213311133311 11', ' 122333333311133111331', ' 122333313311111113331', ' 111232231133331113311', ' 1312222223332233111111', ' 1332222224422223331331', ' 133322322242222233313344', ' 111332332442222333314444', ' 133433344444221133114554', '6333444444111111131444114', '63344444411111121114444444', '66641114422121222643344224', '66655666566666555655666566' ], fish: [ ' 000', ' 00120', ' 021210', ' 0212120', ' 012120', ' 012120 0000', ' 0000000000000 0212100', ' 000333333333333300021212120', ' 003333333333333333333000212120', ' 003333303333333333333333330012120', ' 03333333303333333333333333333002120 00', ' 0300003333304444444444443333333300120 020', ' 03055550333404444444444444444433333010 020', ' 03055005504444044444444444444444444330 0210', ' 0330506705044440444444444444444444444430 0210', '00333050770504488804444444444444444444444302120', '0334405077050888880884444444444444444444443020', '0088805500550888880088888844444444444444444010', ' 08880555508888880200888888888888888888888020', ' 08880000888888801210888888888888888888902120', ' 08888888888880121210888888888888888990 0210', ' 088888888888021212088888888888999990 0210', ' 098888888809021210888999999999990020 020', ' 0099888809990000999999999999900120 020', ' 0099999999999999999999999002120 00', ' 0099999999999999999990012120', ' 0009999999999999000212100', ' 0000000000000 0000' ] }; //This stores a whole bunch of arrays to later create all of the pixel images you see on the menu and in the games var clrImgs = { 'pxlMnuRbt': function(X, Y, Size){ noStroke(); for(var y in pxlImgs.menuRabbit){ var Rect = pxlImgs.menuRabbit[y]; for(var x in Rect){ var colors = Rect[x]; switch(colors){ case ' ': noFill(); noStroke(); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '0': fill(0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '1': fill(207, 207, 207); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '2': fill(255, 74, 225); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '3': fill(255, 255, 255); rect((xSize)+X, (ySize)+Y, Size, Size); break; } } } }, 'mnuPxlHrs': function(X, Y, Size){ noStroke(); for(var y in pxlImgs.menuHorse){ var Rect = pxlImgs.menuHorse[y]; for(var x in Rect){ var colors = Rect[x]; switch(colors){ case ' ': noFill(); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '0': fill(0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'b': fill(191, 137, 0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'd': fill(133, 95, 0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'r': fill(166, 0, 0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'w': fill(255); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'g': fill(138, 138, 138); rect((xSize)+X, (ySize)+Y, Size, Size); break; } } } }, 'mnuPxlFsh': function(X, Y, Size){ noStroke(); for(var y in pxlImgs.menuFish){ var Rect = pxlImgs.menuFish[y]; for(var x in Rect){ var colors = Rect[x]; switch(colors){ case ' ': noFill(); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '0': fill(0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'w': fill(255); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'r': fill(194, 0, 0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'p': fill(240, 0, 128); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'o': fill(255, 145, 0); rect((xSize)+X, (ySize)+Y, Size, Size); break; } } } }, 'rbtHop3': function(X, Y, Size){ noStroke(); for(var y in pxlImgs.rbtHop3){ var Rect = pxlImgs.rbtHop3[y]; for(var x in Rect){ var colors = Rect[x]; switch(colors){ case ' ': noFill(); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '0': fill(0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'g': fill(224, 224, 224); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'd': fill(163, 163, 163); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'p': fill(237, 195, 190); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '1': fill(194, 194, 194); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '2': fill(235, 160, 141); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '3': fill(128, 128, 128); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'w': fill(255, 255, 255); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '4': fill(255, 234, 224); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '5': fill(255, 223, 204); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '6': fill(255, 183, 163); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '7': fill(235, 235, 235); rect((xSize)+X, (ySize)+Y, Size, Size); break; } } } }, 'rbtHop1': function(X, Y, Size){ noStroke(); for(var y in pxlImgs.rbtHop1){ var Rect = pxlImgs.rbtHop1[y]; for(var x in Rect){ var colors = Rect[x]; switch(colors){ case ' ': noFill(); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '0': fill(0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'g': fill(224, 224, 224); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'd': fill(163, 163, 163); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'p': fill(237, 195, 190); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '1': fill(194, 194, 194); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '2': fill(235, 160, 141); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '3': fill(128, 128, 128); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'w': fill(255, 255, 255); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '4': fill(255, 234, 224); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '5': fill(255, 223, 204); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '6': fill(255, 183, 163); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '7': fill(235, 235, 235); rect((xSize)+X, (ySize)+Y, Size, Size); break; } } } }, 'rbtHop4': function(X, Y, Size){ noStroke(); for(var y in pxlImgs.rbtHop4){ var Rect = pxlImgs.rbtHop4[y]; for(var x in Rect){ var colors = Rect[x]; switch(colors){ case ' ': noFill(); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '0': fill(0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'g': fill(224, 224, 224); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'd': fill(163, 163, 163); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'p': fill(237, 195, 190); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '1': fill(194, 194, 194); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '2': fill(235, 160, 141); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '3': fill(128, 128, 128); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'w': fill(255, 255, 255); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '4': fill(255, 234, 224); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '5': fill(255, 223, 204); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '6': fill(255, 183, 163); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '7': fill(235, 235, 235); rect((xSize)+X, (ySize)+Y, Size, Size); break; } } } }, 'obsCarrot': function(X, Y, Size){ noStroke(); for(var y in pxlImgs.carrot){ var Rect = pxlImgs.carrot[y]; for(var x in Rect){ var colors = Rect[x]; switch(colors){ case ' ': noFill(); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'g': fill(0, 153, 10); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'd': fill(0, 112, 7); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'o': fill(255, 157, 0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '1': fill(184, 101, 0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '2': fill(255, 194, 71); rect((xSize)+X, (ySize)+Y, Size, Size); break; } } } }, 'hrs1': function(X, Y, Size){ noStroke(); for(var y in pxlImgs.horse1){ var Rect = pxlImgs.horse1[y]; for(var x in Rect){ var colors = Rect[x]; switch(colors){ case ' ': noFill(); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '0': fill(0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'b': fill(207, 175, 87); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'd': fill(158, 120, 22); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '1': fill(92, 58, 0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '2': fill(115, 82, 0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '3': fill(92, 92, 92); rect((xSize)+X, (ySize)+Y, Size, Size); break; } } } }, 'hrs2': function(X, Y, Size){ noStroke(); for(var y in pxlImgs.horse2){ var Rect = pxlImgs.horse2[y]; for(var x in Rect){ var colors = Rect[x]; switch(colors){ case ' ': noFill(); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '0': fill(0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'b': fill(207, 175, 87); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'd': fill(158, 120, 22); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '1': fill(92, 58, 0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '2': fill(115, 82, 0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '3': fill(92, 92, 92); rect((xSize)+X, (ySize)+Y, Size, Size); break; } } } }, 'hrs3': function(X, Y, Size){ noStroke(); for(var y in pxlImgs.horse3){ var Rect = pxlImgs.horse3[y]; for(var x in Rect){ var colors = Rect[x]; switch(colors){ case ' ': noFill(); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '0': fill(0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'b': fill(207, 175, 87); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'd': fill(158, 120, 22); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '1': fill(92, 58, 0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '2': fill(115, 82, 0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '3': fill(92, 92, 92); rect((xSize)+X, (ySize)+Y, Size, Size); break; } } } }, 'hrs4': function(X, Y, Size){ noStroke(); for(var y in pxlImgs.horse4){ var Rect = pxlImgs.horse4[y]; for(var x in Rect){ var colors = Rect[x]; switch(colors){ case ' ': noFill(); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '0': fill(0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'b': fill(207, 175, 87); rect((xSize)+X, (ySize)+Y, Size, Size); break; case 'd': fill(158, 120, 22); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '1': fill(92, 58, 0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '2': fill(115, 82, 0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '3': fill(92, 92, 92); rect((xSize)+X, (ySize)+Y, Size, Size); break; } } } }, 'rock': function(X, Y, Size){ noStroke(); for(var y in pxlImgs.rock){ var Rect = pxlImgs.rock[y]; for(var x in Rect){ var colors = Rect[x]; switch(colors){ case ' ': noFill(); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '0': fill(133, 133, 133); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '1': fill(161, 161, 161); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '2': fill(153, 153, 153); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '3': fill(128, 128, 128); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '4': fill(201, 201, 201); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '5': fill(105, 105, 105); rect((xSize)+X, (ySize)+Y, Size, Size); break; } } } }, 'bsh': function(X, Y, Size){ noStroke(); for(var y in pxlImgs.bush){ var Rect = pxlImgs.bush[y]; for(var x in Rect){ var colors = Rect[x]; switch(colors){ case ' ': noFill(); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '1': fill(10, 145, 3); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '2': fill(0, 199, 7); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '3': fill(0, 173, 43); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '4': fill(0, 122, 16); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '5': fill(5, 145, 0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '6': fill(6, 94, 0); rect((xSize)+X, (ySize)+Y, Size, Size); break; } } } }, 'fsh': function(X, Y, Size){ noStroke(); for(var y in pxlImgs.fish){ var Rect = pxlImgs.fish[y]; for(var x in Rect){ var colors = Rect[x]; switch(colors){ case ' ': noFill(); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '0': fill(0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '1': fill(171, 143, 0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '2': fill(235, 196, 0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '3': fill(30, 48, 204); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '4': fill(144, 149, 209); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '5': fill(214, 203, 149); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '6': fill(255, 255, 255); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '7': fill(105, 88, 0); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '8': fill(255, 243, 184); rect((xSize)+X, (ySize)+Y, Size, Size); break; case '9': fill(145, 181, 168); rect((xSize)+X, (ySize)+Y, Size, Size); break; } } } }, }; //Loops through the arrays in order to add color var images = { 'menuRabbit': function(){ clrImgs.pxlMnuRbt(0, 0, 13); return get(0, 0, 208, 208); }, 'menuHorse': function(){ clrImgs.mnuPxlHrs(0, 0, 9); return get(0, 0, 234, 234); }, 'menuFish': function(){ clrImgs.mnuPxlFsh(5, 5, 6); return get(0, 0, 180, 180); }, 'rabbitHop1': function(){ clrImgs.rbtHop1(0, 0, 2); return get(0, 0, 70, 64); }, 'rabbitHop3': function(){ clrImgs.rbtHop3(0, 0, 2); return get(0, 0, 100, 100); }, 'rabbitHop4': function(){ clrImgs.rbtHop4(0, 0, 2); return get(0, 0, 100, 100); }, 'obstacleCarrot': function(){ clrImgs.obsCarrot(0, 0, 2); return get(0, 0, 18, 50); }, 'horseRun1': function(){ clrImgs.hrs1(0, 0, 3); return get(0, 0, 105, 78); }, 'horseRun2': function(){ clrImgs.hrs2(0, 0, 3); return get(0, 0, 99, 75); }, 'horseRun3': function(){ clrImgs.hrs3(0, 0, 3); return get(0, 0, 90, 84); }, 'horseRun4': function(){ clrImgs.hrs4(0, 0, 3); return get(0, 0, 94, 87); }, 'horseRock': function(){ clrImgs.rock(0, 0, 2.5); return get(0, 0, 73, 28); }, 'horseBush': function(){ clrImgs.bsh(0, 0, 2.5); return get(0, 0, 66, 41); }, 'fishPlyr': function(){ clrImgs.fsh(0, 0, 2.5); return get(0, 0, 123, 71); } }; //Cache images to prevent lag var imageKeys = Object.keys(images); for(var i = 0; i < imageKeys.length; i++){ var Key = imageKeys[i]; var img = images[Key]; if(typeof img === 'function'){ background(0, 0, 0, 0); images[Key] = img(); } } var page = 'menu';//Determines what page is currently being shown var clicked = false;//Create a variable called 'clicked' to handle wether or not the mouse is being clicked, explained more later var keys = [];//Make an array that stores all key presses var gameStartTime = 5;//For the rabbit game, the timer that counts down to start var gameLiveTime = 0;//How long the player has been alive var crots = [];//An array that stores the carrots //Variables for the horse game var distance = 0;//Distance traveled var gameStart = false;//Is the game started? var sendObs = 0;//Timer to send an obstacle var obsTme = random(50, 200);//When is the obstacle sent var fnc = [];//Array that stores the fence var hrsObs = [];//Array that stores the obstacles //Variables for the fish game var fishGameStart = false;//Is the game started? var foodEaten = 0;//How much food has been eaten? var timeToEnd = 30;//How much time is left? var flakes = [];//Array that stores the flakes var hooks = [];//Array that stores the hooks var Smooth = function(pos, dest, tme){ return (dest-pos)/tme; }; //Simply to make animations smooth var overPanel = function(sides){ var pos1 = 0; var pos2 = 0; var over = 0; var x1; var x2; var y1; var y2; var fx1; var fx2; var fy1; var fy2; for (var i = 1; i < sides.length; i++) { x1 = sides[i][0]; x2 = sides[i - 1][0]; y1 = sides[i][1]; y2 = sides[i - 1][1]; fx1 = x1; fx2 = x2; fy1 = y1; fy2 = y2; if (x1 >= x2) { fx1 = x2; fx2 = x1; fy1 = y2; fy2 = y1; } pos1 = (fx2 - fx1) * (mouseY - fy1); pos2 = (mouseX - fx1) * (fy2 - fy1); if (pos1 <= pos2 && mouseX >= fx1 && mouseX <= fx2) { over++; } } return over % 2 === 1; }; //A function that holds a whole lot of math. This checks wether or not the mouse is within the panels on the menu page var trans = { active: false,//Is the transition active out: false,//Is the transition going away rot: 0,//Rotation of the rectangle s: 0,//The size of the rectangle next: '',//The target page run: function(){ if(this.active&&!this.out){ this.rot+=Smooth(this.rot, 721, 10);//Make the rectangle spin this.s+=Smooth(this.s, 610, 10);//And get bigger pushMatrix(); translate(300, 300); fill(255); rotate(this.rot);//Rotate the rectangle noStroke(); rect(0, 0, this.s, this.s); popMatrix(); if(this.rot>=720){ this.out = true;//The transition is now going out page = this.next;//Page changes this.s = 600;//The size becomes stagnant this.rot = 0;//No longer rotating } } if(this.out){ pushMatrix(); fill(255); translate(300, 300); rotate(this.rot);//Again rotate the rectangle rect(0, 0, this.s, 600); popMatrix(); this.s+=Smooth(this.s, 0, 10);//Make the rectangle get smaller this.rot+=Smooth(this.rot, 45, 10);//And make it spin if(this.s<=1){//If the rectangle is small enough... /*Reset the variables/ this.active = false; this.out = false; this.rot = 0; this.s = 0; this.next = ''; } } } }; //Lets create a transition var menu = function(){ //These reset all variables so the games can be played again gameStartTime = 5; gameLiveTime = 0; crots.splice(0, crots.length); distance = 0; gameStart = false; sendObs = 0; obsTme = random(50, 200); fnc.splice(0, fnc.length); hrsObs.splice(0, hrsObs.length); fishGameStart = false; foodEaten = 0; timeToEnd = 30; hooks.splice(0, hooks.length); flakes.splice(0, flakes.length); //End above comment here background(0, 204, 255); //Fish Food Panel { fill(0, 72, 166); noStroke(); beginShape(); vertex(300, 300); vertex(0, 450); vertex(0, 600); vertex(600, 600); vertex(600, 450); endShape(); textSize(74); fill(0, 50); text('Fish Food', 238, 553); fill(62, 149, 207); text('Fish Food', 238, 546); pushMatrix(); translate(313, 431); rotate(23); image(images.menuFish, 0, 0); popMatrix(); //} //Horse Hazard Panel { fill(222, 188, 102); noStroke(); beginShape(); vertex(300, 0); vertex(300, 300); vertex(600, 450); vertex(600, 0); endShape(); textSize(76); fill(0, 50); text('Horse', 473, 43); fill(135, 95, 0); text('Horse', 473, 38); textSize(70); fill(0, 50); text('Hazard', 431, 103); fill(135, 95, 0); text('Hazard', 431, 99); //} //Rabbit Run Panel { textSize(84); fill(0, 50); text('Rabbit', 143, 53); fill(207, 207, 207); text('Rabbit', 143, 46); textSize(70); fill(0, 50); text('Run', 92, 121); fill(207, 207, 207); text('Run', 92, 116); pushMatrix(); translate(137, 284); rotate(-27); image(images.menuRabbit, 0, 0); popMatrix(); //} //Lines separating the panels stroke(0); strokeWeight(5); line(300, 300, 300, 0); line(300, 300, 0, 450); line(300, 300, 600, 450); //Horse image so it goes over the line pushMatrix(); translate(525, 305); rotate(16); image(images.menuHorse, 0, 0); popMatrix(); //Cover up the bit of the horse that went over the panel fill(0, 72, 166); beginShape(); noStroke(); vertex(511, 409); vertex(518, 600); vertex(600, 600); vertex(600, 450); endShape(); //Line over the top of the horse stroke(0); line(518, 409, 600, 450); noStroke(); //Rabbit if(overPanel([[0, 0], [297, 0], [297, 297], [0, 445]])){ /*This ^^ is the function I used earlier that checks wether or not the mouse is within a certain area. The numbers in the arrays define the coordinates of the shape I want - in this case it is the shape of the rabbit run panel/ fill(0, 50); beginShape(); vertex(0, 0); vertex(300, 0); vertex(300, 300); vertex(0, 450); endShape(); //Draw a darker shape to show that the mouse is inside the panel if(clicked){ //If the mouse is clicked and the mouse is inside the panel, run the transition trans.active = true; trans.next = 'rabbit game'; } } //Horse - Same as above, just different coordinates for the panel if(overPanel([[300, 0], [303, 303], [600, 445], [600, 0]])){ fill(0, 50); beginShape(); vertex(300, 0); vertex(300, 300); vertex(600, 450); vertex(600, 0); endShape(); if(clicked){ //If the mouse is clicked and the mouse is inside the panel, run the transition trans.active = true; trans.next = 'horse game'; } } //Fish - Again, different coordinates if(overPanel([[299, 300], [0, 455], [0, 600], [600, 600], [600, 450], [300, 300]])){ fill(0, 50); beginShape(); vertex(300, 300); vertex(0, 450); vertex(0, 600); vertex(600, 600); vertex(600, 450); endShape(); if(clicked){ trans.active = true; trans.next = 'fish game'; } } }; //Draws the menu - Code inside explained //All code used for the 'Rabbit Run' game { var bunnyPlayer = function(){ this.x = 300;//X position of the rabbit this.type = 1;//Which picture is being drawn this.changeTime = 0;//Timer that says when to change the picture this.dir = 1;//Used with 'scale' - which direction is the rabbut moving this.hopping = false;//Is it hopping? }; bunnyPlayer.prototype.update = function(){ if(keys[LEFT]){//If the left key is pressed this.hopping = true;//It is hopping this.x-=2;//Move the x position to the left this.dir = 1;//Set the direction } if(keys[RIGHT]){//If the right key is pressed this.x+=2;//Move the x position to the right this.dir = -1;//Set the direction this.hopping = true;//It is hopping } if(this.hopping){//If the rabbit is hopping... this.changeTime+=1.3;//Make the change time increase } if(!keys[RIGHT]&&!keys[LEFT]&&!this.hopping&&this.type!==1){//If the rabbit is hopping... this.changeTime+=1.3;//Make the change time increase } if(this.type===1&&this.hopping){//If the rabbit is back to it's original picture and the rabbit is hopping this.hopping = false;//Stop hopping } if(this.changeTime>=0&&this.changeTime<10){ this.type = 1; } if(this.changeTime>=10&&this.changeTime<20){ this.type = 2; } if(this.changeTime>=20&&this.changeTime<30){ this.type = 3; } if(this.changeTime>30){ this.changeTime = 0; } //These just state when to change the picture //These create wraparound if(this.x<=-50&&this.dir===1){ this.x = 650; } if(this.x>=650&&this.dir===-1){ this.x = -50; } }; bunnyPlayer.prototype.display = function(){ pushMatrix(); translate(this.x, 513);//Translate according to the x position scale(this.dir, 1);//Scale it across the y axis imageMode(CENTER);//Center the image rectMode(CENTER);//Center the rectangles if(this.type===1){ image(images.rabbitHop1, 0, 0);//Draw the first image } if(this.type===2){ pushMatrix(); translate(0, -20); rotate(15);//Rotate it slightly image(images.rabbitHop3, 0, 0);//Draw the second image - I don't know why I called it 3 popMatrix(); } if(this.type===3){ image(images.rabbitHop4, 0, -10);//Draw the third image } popMatrix(); }; var bunny = new bunnyPlayer();//Create a new player //Define some obstacles var obstacles = function(){ this.x = random(-50, 650);//X position this.y = -50;//y position this.spd = random(1, 3);//How fast is it coming down? }; obstacles.prototype.display = function(){ image(images.obstacleCarrot, this.x, this.y);//Draw the carrot image }; obstacles.prototype.update = function(){ this.y+=this.spd;//Make the y position chang if(this.x-9<=bunny.x+35&&this.x+9>=bunny.x-30&&this.y+25>=513-32&&this.y-25<=513+32){ //If collision occurs... //Run the transition trans.active = true; trans.next = 'bunny dead'; } }; //The game itself var rabbitGame = function(){ background(0, 204, 255); //If the game started... if(gameStartTime<0){ pushMatrix(); translate(300, 300); rotate(45); noFill(); strokeWeight(6); stroke(0, 100); rect(0, 0, 100, 100); stroke(0, 60); rect(0, 0, 115, 115); stroke(0, 20); rect(0, 0, 130, 130); fill(0, 150); textSize(30); popMatrix(); text(gameLiveTime.toFixed(0), 300, 300);//Shows the score gameLiveTime+=1/60; if(frameCount%35===0){ crots.push(new obstacles());//Push new obstacles into the array } } for(var i in crots){ if(gameStartTime<0){ crots[i].update();//Make the carrots move crots[i].display();//Draw the carrots } if(crots[i].y>=580){ crots.splice(i, 1);//If they reach a certain point, splice them out of the array i--; } } //Draws the ground fill(120, 74, 0); noStroke(); rect(300, 591, 600, 100); fill(0, 120, 20); beginShape(); vertex(0, 541); vertex(600, 541); vertex(600, 550); vertex(590, 554); vertex(533, 545); vertex(430, 554); vertex(402, 548); vertex(375, 553); vertex(315, 546); vertex(307, 560); vertex(296, 547); vertex(265, 555); vertex(252, 548); vertex(213, 561); vertex(179, 551); vertex(120, 551); vertex(30, 555); vertex(0, 560); endShape(); //Display and update the rabbit bunny.update(); bunny.display(); //What is shown before the game starts if(gameStartTime>=0){ gameStartTime-=1/60; textSize(90); fill(0, 50); text('Rabbit Run', 300, 60); fill(207); text('Rabbit Run', 300, 55); fill(0, 50); textSize(25); pushStyle(); textLeading(45); text('\u21DD Use the arrow keys to move the rabbit\n\u21DD Avoid the falling objects\n\u21DD Survive as long as possible', 0, -45, 590, 590); fill(207); text('\u21DD Use the arrow keys to move the rabbit\n\u21DD Avoid the falling objects\n\u21DD Survive as long as possible', 0, -48, 590, 590); popStyle(); textSize(40); text('Game begins in\n' + gameStartTime.toFixed(0) + '\nseconds', 300, 449); fill(207); text('Game begins in\n' + gameStartTime.toFixed(0) + '\nseconds', 300, 445); } //Center the images and rectangles used. This is necessary because of the use of 'pushStyle' and 'popStyle' used above rectMode(CENTER); imageMode(CENTER); }; //The lose screen var rabbitDead = function(){ //Draw the background background(0, 204, 255); fill(120, 74, 0); noStroke(); rect(300, 591, 600, 100); fill(0, 120, 20); beginShape(); vertex(0, 541); vertex(600, 541); vertex(600, 550); vertex(590, 554); vertex(533, 545); vertex(430, 554); vertex(402, 548); vertex(375, 553); vertex(315, 546); vertex(307, 560); vertex(296, 547); vertex(265, 555); vertex(252, 548); vertex(213, 561); vertex(179, 551); vertex(120, 551); vertex(30, 555); vertex(0, 560); endShape(); textSize(90); fill(0, 50); text('You got hit!', 300, 60); fill(207); text('You got hit!', 300, 55); fill(0, 50); textSize(45); text('You got hit with a carrot\nafter surviving\n' + gameLiveTime.toFixed(0) + ' seconds!', 300, 305); fill(207); text('You got hit with a carrot\nafter surviving\n' + gameLiveTime.toFixed(0) + ' seconds!', 300, 302); fill(0, 50); textSize(20); text('C l i c k t o r e t u r n t o t h e m a i n m e n u', 300, 505); fill(207); text('C l i c k t o r e t u r n t o t h e m a i n m e n u', 300, 502); //If the mouse is clicked, run the transition if(clicked){ trans.active = true; trans.next = 'menu'; } }; //} - Code within is commented out and explained //All code used for the 'Horse Hazard' game { var spd = 3;//The speed at which things move //Create a fence object var fence = function(){ this.x = 610; this.spd = spd; }; fence.prototype.update = function(){ this.x-=this.spd;//Make the posts move }; fence.prototype.display = function(){ //Draw a fence-looking shape strokeWeight(20); stroke(102, 68, 0); line(this.x, 500, this.x, 425); strokeWeight(10); line(this.x, 440, this.x+100, 440); line(this.x, 470, this.x+100, 470); }; var hrsSwitchTimer = 0;//Tells the images when to switch - this creates the animation //Create a player object var hrsPlayer = function(){ this.x = 150;//X position this.y = 500;//Y position //create the jumping animation this.grav = 0.25; this.yVel = 0; this.jumpHeight = 8; this.jumping = false; //The slight rotation when jumping this.rot = 0; }; hrsPlayer.prototype.update = function(){ if(keys[UP]\|\|keys[32]){//Up key OR the space bar this.rot = -25;//Change the rotation this.jumping = true;//The player is jumping } if(this.jumping){ //Animation when jumping this.rot+=0.6; hrsSwitchTimer = 3;//Stop changing the pictures this.y-=this.jumpHeight; this.jumpHeight-=this.grav; } if(this.y>500){ //It's back on the ground, stop the jump animation this.jumping = false; this.jumpHeight = 8; this.y = 500; this.rot = 0; } }; hrsPlayer.prototype.display = function(){ //Draw the images pushMatrix(); translate(150, this.y); rotate(this.rot); if(hrsSwitchTimer>=0&&hrsSwitchTimer<8){ image(images.horseRun1, 0, 0); } if(hrsSwitchTimer>=8&&hrsSwitchTimer<16){ image(images.horseRun2, 0, 0); } if(hrsSwitchTimer>=16&&hrsSwitchTimer<24){ image(images.horseRun3, 0, 0); } if(hrsSwitchTimer>=24&&hrsSwitchTimer<33){ image(images.horseRun4, 0, 0); } popMatrix(); if(hrsSwitchTimer>=32){ hrsSwitchTimer = 0; } /** These pictures above switch fast so it appears as though the horse is running / }; var horsePlayer = new hrsPlayer();//Create a new 'hrsPlayer' //Create an obstacle function var horseObstacles = function(){ this.x = 650; this.type = ['rock', 'bush'];//Rock or bush this.choose = /Shorthand for `floor()`/~~(random(0, this.type.length)); this.obs = this.type[this.choose];//Select a random index this.spd = spd; }; horseObstacles.prototype.update = function(){ this.x-=this.spd;//Move the objects if(this.x<=horsePlayer.x+30&&this.x>=horsePlayer.x-30&&!horsePlayer.jumping){ //If there is a collision and the horse isn't jumping, end the game trans.active = true; trans.next = 'horse dead'; } }; horseObstacles.prototype.display = function(){ //Displays the images depending on selected index if(this.obs==='rock'){ image(images.horseRock, this.x, 539); } if(this.obs==='bush'){ image(images.horseBush, this.x, 514); } }; var horseGame = function(){ hrsSwitchTimer++;//Make the animation of the horse if(frameCount%36===0){ fnc.push(new fence());//Send a new fence } background(64, 114, 214); for(var i in fnc){ //Display and update the fences fnc[i].display(); fnc[i].update(); if(fnc[i].x<=-240){ fnc.splice(i, 1); --i;//If it goes off the screen, splice it out of the array } } fill(120, 100, 2); noStroke(); rect(300, 600, 600, 200);//Draws the ground if(!gameStart){//The text that is displayed before the game has begun fill(0, 50); textSize(74); text('Horse Hazard', 300, 49); fill(135, 95, 0); text('Horse Hazard', 300, 45); textSize(30); fill(0, 50); text('Press the UP key or the space bar in order to avoid everything that the horse comes across\n\nRun as far as you can\n\nClick to begin', 25, -43, 550, 590); fill(135, 95, 0); text('Press the UP key or the space bar in order to avoid everything that the horse comes across\n\nRun as far as you can\n\nClick to begin', 25, -46, 550, 590); } if(gameStart){ //What is displayed when the game is started horsePlayer.update(); sendObs++;//Send the obstacles distance+=1/80;//Slowly increase the distance traveled fill(0, 50); pushStyle(); textAlign(LEFT, TOP); textSize(25); text(distance.toFixed(0) + ' meters traveled', 5, 7); fill(135, 95, 0); text(distance.toFixed(0) + ' meters traveled', 5, 5); popStyle(); if(sendObs>=obsTme){ obsTme = random(50, 200);//Continue sending objects at random intervals sendObs = 0; hrsObs.push(new horseObstacles()); } for(var i = 0; i < hrsObs.length; ++i){ hrsObs[i].display();//Update and display the obstacles hrsObs[i].update(); if(hrsObs[i].x<=-50){ hrsObs.splice(i, 1);//If it goes off the screen, splice it out of the array i--; } } } rectMode(CENTER); noStroke(); horsePlayer.display(); if(clicked){//Start the game if the mouse is clicked gameStart = true; clicked = false; } }; var horseDead = function(){ gameStart = false; if(frameCount%36===0){//Keep sending the fence for aesthetics fnc.push(new fence()); } background(64, 114, 214); for(var i in fnc){ fnc[i].display(); fnc[i].update(); if(fnc[i].x<=-240){ fnc.splice(i, 1); --i; } } fill(120, 100, 2); noStroke(); rect(300, 600, 600, 200); fill(0, 50); textSize(97); text('You lost!', 300, 59); fill(135, 95, 0); text('You lost!', 300, 52); //Display the lose text textSize(50); fill(0, 50); text('You traveled\n' + distance.toFixed(0) + ' meters\nbefore tripping', 300, 303); fill(135, 95, 0); text('You traveled\n' + distance.toFixed(0) + ' meters\nbefore tripping', 300, 300); textSize(30); fill(0, 50); text('Click to return to the main menu', 300, 553); fill(166, 125, 30); text('Click to return to the main menu', 300, 550); if(clicked){ //If the mouse is clicked, switch to the main menu trans.active = true; trans.next = 'menu'; clicked = false; } }; //} - Code within is commented out and explained //All code used for the 'Fish Food' game { //Code adapted from the oscillations lessons var Wave = function(amplitude, period, color) { this.startAngle = 0; this.amplitude = amplitude; this.period = period; this.color = color; this.angleVel = (TWO_PI / this.period)8; }; Wave.prototype.update = function() { this.startAngle += (TWO_PI / this.period)4; }; Wave.prototype.display = function() { var angle = this.startAngle; fill(this.color); noStroke(); for (var x = 0; x <= width; x+=4) { var y = (this.amplitude sin(angle))+200; ellipse(x, y, 10, 50); angle += this.angleVel; } }; Wave.prototype.pack = function(){ this.update(); this.display(); }; var water = new Wave(14, 23, color(0, 10, 148)); //Code adapted from the particle systems lessons var Particle = function(position) { this.acceleration = new PVector(0, -0.05); this.velocity = new PVector(random(-1, 1), random(-1, 0)); this.position = position.get(); this.timeToLive = 200; }; Particle.prototype.update = function(){ this.velocity.add(this.acceleration); this.position.add(this.velocity); this.timeToLive -= 2; }; Particle.prototype.display = function() { stroke(255, 255, 255, 100); strokeWeight(2); fill(255, 255, 255, 50); var radius = map(this.position.y, height, 0, 5, 15); ellipse(this.position.x, this.position.y, radius, radius); }; Particle.prototype.run = function() { this.update(); this.display(); }; var particles = []; //Create an object for the player var fishPlayer = function(){ this.x = 300;//x position this.y = 300;//y position this.dir = 1;//Direction facing this.rot = 0;//Rotation for animation when moving up or down }; fishPlayer.prototype.update = function(){ if(keys[LEFT]){ this.dir = 1;//Direction this.x-=2;//Move the player left } if(keys[RIGHT]){ this.dir = -1;//Direction this.x+=2;//Move the player right } if(keys[UP]){ this.rot+=Smooth(this.rot, 20, 8);//Add a smooth animation this.y-=2;//Move the player up } if(keys[DOWN]){ this.rot+=Smooth(this.rot, -20, 8);//Smooth animation this.y+=2;//Move the player down } if(!keys[UP]&&!keys[DOWN]){ this.rot+=Smooth(this.rot, 0, 4);//Make the rotation revert back to 0 } //Make sure the fish remains on screen and in the water this.x = constrain(this.x, 123/2, 600-123/2); this.y = constrain(this.y, 230, 600-71/2); }; fishPlayer.prototype.display = function(){ pushMatrix(); translate(this.x, this.y); scale(this.dir, 1); rotate(this.rot); if(frameCount%15===0){ if(this.dir===1){ particles.push(new Particle(new PVector(this.x-123/2, this.y))); } if(this.dir===-1){ particles.push(new Particle(new PVector(this.x+123/2, this.y))); } } image(images.fishPlyr, 0, 0); popMatrix(); }; //Create a new player var fshPlayer = new fishPlayer(); //Create an object for the hooks var Hook = function(){ this.x = random(10, 590);//X position this.y = 0;//Y position this.targetY = random(200, 500);//Where is the line moving to this.timeDown = 0;//How long has the hook been down this.goTime = random(50, 200);//When should it go back up this.goingUp = false;//Is the hook going up? }; Hook.prototype.update = function(){ if(!this.goingUp){ this.y+=Smooth(this.y, this.targetY, 10);//Make a smooth animatin going down } if(this.y>=this.targetY-5){ this.timeDown++;//Increase the time the hook has been down } if(this.timeDown>=this.goTime){ this.goingUp = true;//It's going up this.y+=Smooth(this.y, 0, 10);//Add a smooth animation } //Collision with the player when he's facing to the left if(fshPlayer.dir===1){ if(this.x+5>=fshPlayer.x-(123/2)&&this.x-5<=fshPlayer.x-(123/2)&&this.y+15>=fshPlayer.y-25&&this.y-15<=fshPlayer.y+25){ trans.active = true; //Run the transition trans.next = 'fish dead hook'; } } //Collision with the player when he's facing to the right if(fshPlayer.dir===-1){ if(this.x+5>=fshPlayer.x+(123/2)&&this.x-5<=fshPlayer.x+(123/2)&&this.y+15>=fshPlayer.y-25&&this.y-15<=fshPlayer.y+25){ //Run the transition trans.active = true; trans.next = 'fish dead hook'; } } }; Hook.prototype.display = function(){ //Draw the line strokeWeight(2); stroke(107, 107, 107); line(this.x, 0, this.x, this.y); //Draw the hook strokeWeight(3); stroke(150); noFill(); bezier(this.x, this.y, this.x+3, this.y+10, this.x+9, this.y+14, this.x+16, this.y); bezier(this.x, this.y, this.x-3, this.y+10, this.x-9, this.y+14, this.x-16, this.y); }; //Create an object for the food var Flake = function(){ this.x = random(0, 600);//X position this.y = -10;//Y position this.spd = 8;//Speed above the water this.wtrSpd = random(0.5, 2);//Speed in the water this.col = random(100, 255);//darkness this.floatSpd = random(0, 8);//How fast is it oscilating back and forth this.eaten = false;//Has it been eaten? }; Flake.prototype.update = function(){ if(this.y<=200){ this.y+=this.spd;//If it's not in the water, make it move fast } else{ this.y+=this.wtrSpd;//Otherwise make it go slower } //Collision with the player when he's facing to the left if(fshPlayer.dir===1){ if(!this.eaten&&this.x+5>=fshPlayer.x-(123/2)&&this.x-5<=fshPlayer.x-(123/2)&&this.y+15>=fshPlayer.y-25&&this.y-15<=fshPlayer.y+25){ foodEaten++; this.eaten = true; } } //Collision with the player when he's facing to the right if(fshPlayer.dir===-1){ if(!this.eaten&&this.x+5>=fshPlayer.x+(123/2)&&this.x-5<=fshPlayer.x+(123/2)&&this.y+15>=fshPlayer.y-25&&this.y-15<=fshPlayer.y+25){ foodEaten++; this.eaten = true; } } }; Flake.prototype.display = function(){ if(!this.eaten){//Only draw the food if it's not eaten noStroke(); pushMatrix(); //Make it move back and forth translate(this.x+sin(frameCountthis.floatSpd)8, this.y); fill(this.col, 0, 0); ellipse(0, 0, 25, sin(frameCountthis.wtrSpd2)*8); popMatrix(); } }; var fishGame = function(){ background(0, 123, 255);//Draw the background water.pack();//Wave animation noStroke(); fill(0, 10, 148); rect(300, 400, 600, 400); //MAke the fish bubbles for(var i in particles){ particles[i].run(); if(particles[i].position.y<180){ particles.splice(i, 1);//Make it 'pop' at the surface } } fshPlayer.update(); fshPlayer.display(); //Update and display the player if(!fishGameStart){//Text displayed before the game starts textSize(110); fill(0, 50); text('Fish Food', 300, 53); fill(0, 23, 156); text('Fish Food', 300, 46); fill(255); textSize(25); text('You have 30 seconds to eat as much food as you can\n\nUse the arrow keys to control the fish\n\nLook out for the fishermen! They will catch you if you get too close\n\n\nClick to begin the game', 25, 115, 550, 590); } if(fishGameStart){//When the game starts timeToEnd-=1/60;//Countdown timer strokeWeight(6); stroke(255, 100); noFill(); pushMatrix(); translate(300, 450); rotate(45); rect(0, 0, 100, 100); stroke(255, 60); rect(0, 0, 120, 120); stroke(255, 20); rect(0, 0, 140, 140); popMatrix(); fill(255, 200); textSize(40); text(foodEaten, 300, 450);//Score in the middle of the screen fill(255); textSize(20); //Time remaining text(timeToEnd.toFixed(0) + ' seconds remaining', 300, 45); if(frameCount%150===0){ hooks.push(new Hook());//Add new hooks every once in a while } for(var i = 0; i < hooks.length; i++){ hooks[i].update(); hooks[i].display(); if(hooks[i].goingUp&&hooks[i].y<=5){ hooks.splice(i, 1);//Remove them when they get to the top i--; } } if(frameCount%50===0){ flakes.push(new Flake());//Add new flakes } for(var i = 0; i < flakes.length; i++){ flakes[i].update(); flakes[i].display(); //Update and display the flakes if(flakes[i].y>=700){ flakes.splice(i, 1); i--;//Remove them after they go off the bottom } } //Run the transition if the time runs out if(timeToEnd.toFixed(0)<=0){ trans.active = true; trans.next = 'fish dead time'; } } //Start the game if the mouse is clicked if(clicked){ fishGameStart = true; clicked = false; } }; var fishDead = function(way){ //If the game ends because the fish was caught if(way==='hook'){ //Draw the screen if he gets caught background(0, 123, 255); water.pack(); noStroke(); fill(0, 10, 148); rect(300, 400, 600, 400); textSize(60); fill(0, 50); text('You got caught!', 300, 53); fill(0, 23, 156); text('You got caught!', 300, 46); fill(255); textSize(25); text('You were caught by a fisherman!\n\nYou ate ' + foodEaten + ' fish flakes before you were caught!', 25, 33, 550, 590); textSize(20); text('Click to return to the main menu', 300, 570); //Run transition if(clicked){ trans.active = true; trans.next = 'menu'; clicked = false; } } //Draw the screen if he runs out of time if(way==='time'){ background(0, 123, 255); water.pack(); noStroke(); fill(0, 10, 148); rect(300, 400, 600, 400); textSize(60); fill(0, 50); text('Time\'s up!', 300, 53); fill(0, 23, 156); text('Time\'s up!', 300, 46); fill(255); textSize(25); text('You managed to eat ' + foodEaten + ' fish flakes!\n\nCongratulations!', 25, 33, 550, 590); textSize(20); text('Click to return to the main menu', 300, 570); //Run the transition if(clicked){ trans.active = true; trans.next = 'menu'; clicked = false; } } }; //} - Code within is commented out and explained //Create a function that stores the pages var pages = function(){ //Switch the page switch(page){ case 'menu': menu();//Draw the menu break; case 'rabbit game': rabbitGame();//Draw the rabbit game break; case 'bunny dead': rabbitDead();//Draw the lose screen break; //The horse scenes case 'horse game': horseGame(); break; case 'horse dead': horseDead(); break; //The fish scenes case 'fish game': fishGame(); break; case 'fish dead hook': fishDead('hook'); break; case 'fish dead time': fishDead('time'); break; } //Make sure 'clicked' defaults to false clicked = false; //Create the transition trans.run(); }; draw = function() { pages();//Call everything }; mouseClicked = function(){ clicked = true;//If the mouse is clicked, change the variable to true }; //Handle the key presses keyPressed = function(){ keys[keyCode] = true;//Run the keyCode through the array }; keyReleased = function(){ keys[keyCode] = false; }; //Have any questions about the code? I'd be glad to answer them!
Folds	23,410,413,1033,1036,1107,1110,1118,1144,1146,1149,1183,1186,1229,1232,1396,1400,1641,1643,1876,1878,2243,2247,2287,2288,2290,2292,2294,2297,2299,2300,2302
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJ7myNSZCQw
Votes	177
Spin-Offs	6
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	{"id":"6054445087162368","title":"Contest: Create an Animal","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Cavan P
Author Name	loyaltyKA
Author ID	kaid_716488551714127278797372
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739376337935
Updated	10 months ago, 1739376346765
Source Deleted	unknown