Viewing Program

Program Data

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

Title	Cube Jump \|\| My First Game
ID	6017161563242496
Created	7 years ago, 1524750743280
Updated	7 years ago, 1532024449020
Code	/ Arrow keys to move. Move to the green block to get to the next level. Go to options to change your color. All credit goes to CheesyMonster for making the platformer template (https://www.khanacademy.org/computer-programming/template -1-simplistic/6604903584038912) and Maria Alejandra Ruiz for making the menu's background. CheesyMonster made the platformer template and I made the menu and options, the logo, levels, and some other quirks and add-ons. 175+ votes and 60+ spin-offs?! (was) 2rd on the hot-list?! Thanks a lot, everyone! / //\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\\\ /***********************************Start Code************************************/ //\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\\\ //This takes the lines off the shapes noStroke(); //Makes graphics look nice //This variable is the scene our game is in var scene = 'game'; //Game starts at scene 'game' var scene = 'options'; var scene = 'menu'; var scene = 'logo'; /------------------------- Game settings start here---------------------------------*/ //The blockSize variable is the size we want our blocks to be var blockSize = 20; //blockSize variable set to 20 as default //The gravityForce variable is the speed we want our players gravity to accelerate var gravityForce = 0.5; //gravityForce variable set to 0.5 as default //The frictionForce variable is the speed the player slows down at once he is not moving var frictionForce = 0.3; //frictionForce variable set to 0.3 as default //The acceleration variable is the speed the player accelerates when he is moving var acceleration = 0.4; //acceleration variable set to 0.5 as default //The jump variable is the force at which the player jumps when the up key is pressed var jump = -10; //jump variable set to -10 as default //The blockColor variable is the color of the blocks var blockColor = color(53, 179, 242); //blockColor varible set to color(100, 100, 50) as default //The lavaColor variable is the color of the lava var lavaColor = color(255, 0, 0); //portalColor varible set to color(255, 0, 0) as default //The portalColor variable is the color of the portal var portalColor = color(24, 219, 24); //portalColor varible set to color(0, 255, 0) as default //The playerColor variable is the color of our player var playerColor = color(21, 10, 245); //playerColor variable is set to color(50, 50, 50) as default //The backgroundColor variable is the color of the background var backgroundColor = color(3, 3, 3, 20); //backgroundColor variable set to default color(0, 0, 0, 20) the opacity is set to 50 making the background partially see through, this is a sweet cheet to creates a particle'ish effect. var lSX=-93; var lSY=100; var rSX=396; var rSY=100; var count=0; var menuTextSize=25; var deathCount = 0; var deathCountText=function(){ fill(255, 0, 0); textSize(19); text(deathCount + " death(s)",26,39); }; var eyeHeight=17; var f = createFont("monospace"); var myBackground = function(){ background(0); { { randomSeed(15); for (var i = 1; i < 900; i++){ noStroke(); fill(255, 255, 255); ellipse(random(0, 500), random(0, 500), random(2, 4),random(1, 4)); } }//stars } }; var radio = 350; var cx = width/2, cy = height/2; var ang = 0.15; var dr = 5, dg=20, db=30, di=0; var mycos = function(unang) { return (cos(unang)+1)/2; }; var gradient = [color(27, 49, 219), color(0, 3, 92)]; var gradientBackground = function() { for(var i = 0; i < 150; i++) { noStroke(); fill(lerpColor(gradient[0], gradient[1], i/150)); rect(0, i 4, width, height); } }; /---------------------------Game settings end here----------------------------------/ //The level variable is the level which we are playing on var level = 0; //Level variable is set to 0 as default /* Ok, yeah, so the levels array might look a little weird. So let me explain. Generally, when you think of an array, you think of something like this: var myFriends = ["Bob", "Fred", "Joe"]; Unlike a normal variable that holds one value (var myFriend1 = "Bob") an array holds a bunch of values (var myFriends = ["Bob", "Fred", "Joe"]) So technically, couldn't we hold a bunch of arrays as values? var testArray = [ [], [], [], ]; Of course we can! Now we can give the arrays inside the array values: var testArray = [ [0,0,0,0,0,0,0], [0,0,0,0,0,0,0], [0,0,0,0,0,0,0], ]; Now lets make it look nice: var testArray = [ [0,0,0,0,0,0,0], [0,0,0,0,0,0,0], [0,0,0,0,0,0,0], ]; There. Notice how this looks like a grid, kinda like a level. You could draw a picture: var testArray = [ [1,1,1,0,0,0,1], [1,1,1,0,1,1,1], [1,1,0,0,1,1,1], ]; This is actually how most pixel art is done on khan academy. Now, we could make a level! 1's = block 0's = empty space var level_1 = [ [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1], [1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1], [1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], ]; Cool huh? But what if we wanted all our levels in one array? Well we know that 1 level looks like this: [ [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1], [1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1], [1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], ] And we also know that arrays hold multiple values... (hint: which means we can hold multiple levels in an array) Light Bulb! Ding So all we need to do, is hold all our levels in a levels array! :D Like this: var levels = [ [ [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1], [1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1], [1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], ], [ [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1], [1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1], [1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], ], ]; Notice how we are holding an array with values, inside an array, inside an array. An average array looks like this: var lameArray = []; An array that holds an array looks like this: var decentlyCoolArray = [ [], [], [] ]; An array that holds an array that holds an array looks like this: var reallyCoolAmazingArray = [ [ [], [], [] ], [ [], [], [] ], [ [], [], [] ] ]; There is a name for this. Each array has a dimension. An array that holds a bunch of values is called a 1 Dimensional Array An array that holds a bunch of arrays that hold values is called a 2 Dimensional Array An array that holds a bunch of arrays that hold arrays that hold values is called a 3 Dimensional Array Notice for every array we hold we add a dimension, this goes on infinitely. And its pretty cool! / // <- If you are unfamilier with how the levels array looks, look in here! //The levels variable is an array that holds our level data. Aka, which blocks go where. var levels = [ //Levels defined as an array, that holds the levels //Delete the levels and create your own :D! //This block chart will be useful: / 0 = nothing 1 = block 2 = player spawn point 3 = lava 4 = portal / //Level 1 [ [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,4,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,1,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], ], [ [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,1,1,1,1,1,3,3,3,3,3,3,3,3,3,1,1,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,3,0,0,0,3,0,0,0,3,0,0,0,3,0,0,0,1], [1,0,0,3,0,0,0,3,0,0,0,3,0,0,0,3,0,0,0,1], [1,4,0,3,0,0,0,3,0,0,0,3,0,0,0,3,0,0,0,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], ], [ [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,1], [1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1], [1,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,1,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], ], [ [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,4,1], [1,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,1,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,1,0,0,1,1,0,0,0,0,0,0,0,1,0,0,0,1], [1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,1,1,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,1], [1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1,1], [1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,1,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,1,0,0,1,0,1,0,0,0,0,0,1,0,0,0,0,1], [1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,1], [1,2,0,1,3,3,1,1,0,0,0,0,0,0,0,0,0,0,0,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], ], [ [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1], [1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1], [1,0,0,0,0,0,3,0,0,0,3,0,0,0,0,0,1,0,0,1], [1,0,3,0,0,0,3,0,0,0,3,0,0,0,0,0,1,0,0,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,3,1,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1], [1,2,0,0,0,0,0,3,3,3,0,0,0,0,0,0,1,3,4,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], ], [ [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,1], [1,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], ] ]; //End levels array //These are the players variables (x position, y position, width, height, gravity, velocity, onGround (are we on the ground?)) //The players x position var px = 200; //px set to 200 as default //The players y position var py = 200; //py set to 200 as default //The players width var pw = blockSize; //Remember the blockSize variable defined earlier? Well we want our player to be that size. pw set to blockSize as default var ph = blockSize; //Remember the blockSize variable defined earlier? Well we want our player to be that size. ph set to blockSize as default var eyes = function(){ fill(3, 3, 3); ellipse(px+6,py+5,5,5); ellipse(px+14,py+5,5,5); }; //The next two variables are the velocity (how fast we are going sideways), and the gravity (how fast we are falling) var pgrav = 0; //pgrav set to 0 as default var pvel = 0; //pvel set to 0 as default //This variable is for whether we are on the ground or not. This way we know when we can or cannot jump var onGround = false; //onGround set to false as default //These variables are the spawn x and y position of the player. Every time he dies, this is where he resets too. var sx = 0; //sx set to 0 var sy = 0; //sy set to 0 //These variables are so we know which if the up/right/left arrow key is being pressed //Is the right arrow key being pressed? var keyUp = false; //keyUp set to false as default //Is the left arrow key being pressed? var keyLeft = false; //keyLeft set to false as default //Is the right arrow key being pressed var keyRight = false; //keyRight set to false as default //The applyPlayersPhysics function applies the players physics. This makes the players x position move according to the velocity, the palyers y position move according to the gravity, and applies friction var applyPlayerPhysics = function( /No parameters, function is simply for easy calling and organization/ ) { //This makes the player x position add according to the player velocity. So if the velocity was 1 it would be saying: px += 1 px += round(pvel); //The player velocity is rounded to avoid decimals //This makes the player y position add according to the player gravity. So if the player gravity is 1 it would be saying: py += 1 py += round(pgrav); //The player gravity is rounded to avoid decimals //This increments the gravity based on the gravityForce variable created earlier. This way the player is always falling. If the gravity force was 0.5 then it would be saying: pgrav += 0.5 pgrav += gravityForce; //This is where the friction happens. If the velocity is more than zero, than take some away, if the velocity is less than zero than make add it to come closer to zero. The point is so that our players velocity will be zero and the players x position will be incrementing like so: px += 0 if(pvel > 0) { //If the velocity is more than zero pvel -= frictionForce; //Takes away some velocity based off the global friction force variable. So if the friction force was 0.1 if would be saying: pvel -= 0.1 } //Ends first if if(pvel < 0) { //If the velocity is less than zerp pvel += frictionForce; //Adds the velocity based off the global friction force variable. So if the friction force was 0.1 if would be saying: pvel = 0.1 } //Ends second if }; //Ends applyPlayerPhysics function //This function moves the player based off of which keys are being pressed var movePlayer = function( /No parameters, function is simply for easy calling and organization/ ) { //This checks whether the keyUp variable (defined ealier) is being pressed, and if the player is on the ground if(keyUp === true && onGround === true) { //Is the up arrow key being pressed, are we on the ground? //This makes the players gravity equal the global jump variable defined earlier. Remember how the applyPlayerPhysics funciton works. It adds the players y position by the gravity. When the up key is pressed the gravity will equal the jump variable. Lets say the jump variable is -5, according to the applyPlayerPhysics funciton, the y position would be incrementing like this: py += -5 (remeber, -5 is the jump variable value) pgrav = jump; //pgrav variable equals the jump variable //And since we have jumped, until further notice, we are off the ground. This makes it so that we can't jump multiple times in the air. onGround = false; //onGround var set to false } //End first if //This makes it so that when the right arrow key is being pressed, the players velocity increments based off the acceleration if(keyRight === true) { //Checks if the right arrow key is being pressed //Remember, the applyPlayerPhysics funciton increments the player x position by the velocity. So if the right arrow key is being pressed the velocity will be added based off the acceleration variable, so if the velocity variable is 5, the players x position would be incrementing like so: px += 5 pvel += acceleration; fill(3, 3, 3); ellipse(px+9,py+5,5,5); ellipse(px+17,py+5,5,5); } //End second if //This makes it so that when the left arrow key is being pressed, the players velocity increments based off the acceleration if(keyLeft === true) { //Checks if the left arrow key is being pressed //Remember, the applyPlayerPhysics funciton increments the player x position by the velocity. So if the right arrow key is being pressed the velocity will be added based off the acceleration variable, so if the velocity variable was -5, the players x position would be incrementing like so: px += -5 pvel -= acceleration; //Since we want to move to the left, we want to take away from the velocity variable based off the acceleration variable defined earlier fill(3, 3, 3); ellipse(px+3,py+5,5,5); ellipse(px+11,py+5,5,5); } //End third if }; //Ends player move function //The reset player function resets the players variables to their defaults. x and y positions to the spawn point, and the velocity and gravity to 0 var resetPlayer = function( /No parameters, function is simply for easy calling and organization/ ) { //Resets vars pgrav = 0; //Resets gravity pvel = 0; //Resets velocity px = sx; //Sets x to the spawn x py = sy; //Sets y to the spawn y onGround = false; //So we can't jump right off the bat };//End resetPlayer function //The player function is used to run the player just by calling it. It draws, moves and applies physics to the player all in one funciton! var player = function( /No parameters, function is simply for easy calling and organization/ ) { //Draws the player fill(playerColor); //This fills the player based off the global color variable rect(px, py, pw, ph); //Draws a rectangle based off the players variables if (keyLeft===false & keyRight===false) { eyes(); } //We now move the player using the move player function, and apply the players physics using the applyPlayerPhysics function movePlayer(); //Moves the player applyPlayerPhysics(); //Applies the players physics /**NOTICE**/ //How many normal numbers (0.9, 90, 1.1, 0, ect. ect) do you see? Zero. This is what we want, no hardcoded numbers. This is a wonderful programming practice. }; //End player funciton //The block function runs a block that has graphics and collisions. The funciton asks for 4 parameters, an x position, a y position, a width, and a height. var block = function(x, y, w, h) { //Start block function //Graphics fill(blockColor); //Fills the block based off the block color defined earlier in the program //Draws a rectangle based off of the x, y, width and height inputed rect(x, y, w, h); //Draws rectangle / Ok, so below is the collisions. They are purposly not perfect, but aren't bad. Whoever uses the template needs to upgrade the collsions themselves if they are unhappy about them. Basically, this is all you need to know about them: First, we check if we are colliding. Next we determine which side we are colliding with (up, down, left, right) Once we have determined which side we have collided on, we stop the gravity/velocity depending on what side we collided, then we set the players x and y positions to the correct side. / //This checks if we are colliding (like a button) if(px + pw > x && px < x + w && py + ph > y && py < y + h) { //Next we check if we are colliding on horizontally if(px + pw > x && px < x + w && py + ph - pgrav > y && py - pgrav < y + h) { //Now that we know we are colliding horizontally we need to check whether we are colliding on the left or right side of the block //If the velocity is more than zero, logically we are moving to the right, and vise versa. if(pvel > 0) { //Is the velocity more than zero? px = x - pw; //Sets the players position to the left side of the block } else if(pvel < 0) { //Is the velocity less than zero? px = x + w; //Sets the players position to the right side of the block } //Resets the velocity pvel = 0; //0 is the stopping point for the velocity } //Now we check if we are colliding horizontally if(px + pw + pvel > x && px + pvel < x + w && py + ph > y && py < y + h) { //Now that we are colliding horizontally we need to check whether we are colliding on the top or the bottom of the block //If the gravity is more than zero, logicially we are falling, which means we are on the top of the block if(pgrav >= 0) { //Is the gravity more than or equal to zero? pgrav = 0; //Reset the gravity py = y - ph; //Put the players y position to the top of the block onGround = true; //Since we have collided on the top of a block, we can jump } else { //Is the gravity less than zero pgrav = 0.1; //Makes the players gravity so he will imediately fall py = y + h; //Sets the players y position to the bottom of the block } } } }; //End block function //Lava function is created to make it a challenge to get past levels. Lava function asks for an x and y position, a width and a height var lava = function(x, y, w, h) { //Start lava function //Graphics fill(lavaColor); //Colors the lava based off the lavaColor var defined earlier rect(x, y, w, h); //Draws a rectangle based off the x, y, width and height //This checks if we are colliding (like a button) if(px + pw > x && px < x + w && py + ph > y + 1 && py < y + h) { //Start collision if //Since we touched the lava, we're dead. So lets reset resetPlayer(); deathCount++; } //End collision if }; //End lava function //Portal function is created to make it so we can go to a new level. Portal function asks for an x and y position, a width and a height var portal = function(x, y, w, h) { //Start portal function //Graphics fill(portalColor); //Fills graphics using the portalColor variable defined earlier rect(x, y, w, h); //Draws a rectangle using the x, y, width and height passed into the funciton //This checks if we are colliding (like a button) if(px + pw > x && px < x + w && py + ph > y + 1 && py < y + h) { //Start collision if //Lets move on to the next level level ++; //Adds one to the level variable //Since we touched the portal, lets reset for the next level resetPlayer(); //Resets the player } //End collision if }; //End portal function //This function will set the blocks read the level based off the levels array. It will then use functions (such as the block function) to put blocks in the correct positions. var readLevel = function( /No parameters, we have it in a function so we can call it easily/ ) { //Next we need a nested loop (a loop inside a loop). When looping through the contents of an array, we need one for loop for every dimension //First loop, loops through the current levels length (how many arrays are in the array) for(var i = 0;i < levels[level].length; i++) { //The second loop, loops through the values of the arrays inside the level for(var j = 0;j < levels[level][i].length; j++) { //This if statment checks if the value is a 1, if it is we need to place a block if(levels[level][i][j] === 1) { //Is the value 1? //This sets the blocks positions to the i and j for variable multiplied by the blockSize, and gives them a size of blockSize. This way when we change the blockSize the level will change accordingly. Try messing with this if you don't get it block(j blockSize, i * blockSize, blockSize, blockSize); } else if(levels[level][i][j] === 2) { //If the target value is 2 then we have a spawn position //This sets the spawn positions to the correct positions sx = j * blockSize; //Sets spawn x position sy = i * blockSize; //Sets spwan y position } else if(levels[level][i][j] === 3) { //If the target value is 3 then we hava a lava block //Runs a lava function in the correct positions lava(j * blockSize, i * blockSize, blockSize, blockSize); } else if(levels[level][i][j] === 4) { //If the target value is 4 then we hava a portal block //Run the portal function portal(j * blockSize, i * blockSize, blockSize, blockSize); } //End else-if's } //End inner loop } //End outer loop }; //End readLevel function //This will read the level so the spawn positions have been set readLevel(); resetPlayer(); //The draw function, where everything loops draw= function() { if(scene==='logo'){ gradientBackground(); noStroke(); fill(0, 77, 255); //Top quad(lSX+35,lSY-10,lSX+65,lSY+27,lSX+93,lSY+27,lSX+93,lSY-10); quad(rSX+15,rSY-10,rSX+15,rSY+27,rSX+43,rSY+27,rSX+73,rSY-10); //Legs quad(lSX+35,lSY-10,lSX+65,lSY+27,lSX+-23,lSY+232,lSX+-74,lSY+233); quad(rSX+174,rSY+232,rSX+123,rSY+232,rSX+43,rSY+27,rSX+73,rSY-10); //Middle quad(lSX+28,lSY+110,lSX+6,lSY+150,lSX+93,lSY+150,lSX+93,lSY+110); quad(rSX+15,rSY+110,rSX+15,rSY+150,rSX+93,rSY+150,rSX+76,rSY+110); if(lSX<=110){ lSX+=2.9; } if(rSX>=190){ rSX-=2.9; } if(lSX>=110){ textSize(30); text(" Angular Programming", sin(frameCount * 3) * 4, 65); text(" Presents...",sin(frameCount * 3) * 4,328); } count++; if(count>=300){ scene='menu'; } } //The string of ifs is for navigating through the scenes if(scene === 'menu') { //Start menu scene frameRate(10); //myBackground(); for (var i = 0; iang <360; i++) { stroke(255mycos(iang+didr), 255mycos(iang+didg), 255mycos(iang+didb)); line(cx, cy, cx+ radiocos(iang), cy+ radiosin(iang)); } di++; fill(255, 0, 0); textSize(45); text("Cube Jump",89,100); fill(53, 179, 242); stroke(53, 179, 242); rect(120,170,146,65); fill(255, 0, 0); textFont(f); textSize(menuTextSize); text("Play", 164,209); if(mouseX > 120 & mouseX < 120+146 & mouseY > 170 & mouseY < 170+65) { fill(37, 94, 250); stroke(37, 94, 250); rect(115,165,156,75); fill(252, 3, 11); textSize(30); text("Play", 160, 211); } if(mouseIsPressed & mouseX > 115 & mouseX < 115+156 & mouseY > 165 & mouseY < 165+75) { scene = 'game'; } fill(53, 179, 242); rect(120,290,146,65); fill(255, 0, 0); textSize(menuTextSize); text("Options", 149,330); if(mouseX > 120 & mouseX < 120+146 & mouseY > 290 & mouseY < 290+65) { fill(37, 94, 250); stroke(37, 94, 250); rect(115,285,156,75); fill(252, 3, 11); textSize(30); text("Options", 138, 332); } if(mouseIsPressed & mouseX > 115 & mouseX < 115+156 & mouseY > 285 & mouseY < 290+75) { scene='options'; } } else if(scene === 'game') { //End menu scene, start game scene frameRate(70); noStroke(); //Fills the background based off the background color variable fill(backgroundColor); //Fills background rect(0, 0, width, height); //Uses a rectangle to cover the screen //Runs the player using the player function player(); //The player function asked for no parameters, so we will give it none. //Reads the level we are on using the readLevel function readLevel(); //The readLevel function asked for no parameters, so we will give it none. //Checks if the player has fallen off the screen if(py > height) { //Has the player fallen off the screen //We've fallen off the screen and need to reset resetPlayer(); //Resets the player deathCount++; } //Makes portal color glow portalColor = color(0, 137.5 + cos(frameCount * 2) * 100, 0); //Makes portal color equal the given color if(level === 5) { fill(255, 0, 0); textSize(30); text("You Win!", 129,100); textSize(17); text("You finished with " + deathCount + " death(s)!", 72,188); } deathCountText(); } else if (scene==='options') { fill(3, 3, 3); rect(0, 0, width, height); fill(255, 0, 0); textFont(f); textSize(30); text("Choose your color:", 47,93); stroke(250, 5, 5); fill(222, 17, 17); rect(30,124,40,40); if (mouseIsPressed & mouseX > 30 & mouseX < 70 & mouseY > 124 & mouseY < 164) { playerColor=color(222, 17, 17); } fill(251, 255, 5); rect(90,124,40,40); if (mouseIsPressed & mouseX > 90 & mouseX < 130 & mouseY > 124 & mouseY < 164) { playerColor=color(251, 255, 5); } fill(255, 147, 5); rect(160,124,40,40); if (mouseIsPressed & mouseX > 160 & mouseX < 190 & mouseY > 124 & mouseY < 164) { playerColor=color(255, 147, 5); } fill(13, 255, 5); rect(30,187,40,40); if (mouseIsPressed & mouseX > 30 & mouseX < 70 & mouseY > 187 & mouseY < 187+40) { playerColor=color(13, 255, 5); } fill(21, 10, 245); rect(90,187,40,40); if (mouseIsPressed & mouseX > 90 & mouseX < 120 & mouseY > 187 & mouseY < 187+40) { playerColor=color(21, 10, 245); } fill(209, 2, 161); rect(160,187,40,40); if (mouseIsPressed & mouseX > 160 & mouseX < 190 & mouseY > 187 & mouseY < 187+40) { playerColor=color(209, 2, 161); } fill(playerColor); rect(251+sin(frameCount * 10) * 5,128,100,100); noStroke(); fill(3, 3, 3); ellipse(278+sin(frameCount * 10) * 5,156,17,eyeHeight); ellipse(324+sin(frameCount * 10) * 5,156,17,eyeHeight); /if(frameCount % 30 === 0){ ellipse(278+sin(frameCount 10) * 5, 156, 17, eyeHeight += (5 - eyeHeight) / 100); ellipse(324+sin(frameCount * 10) * 5, 156, 17, eyeHeight += (5 - eyeHeight) / 5); }/ fill(53, 179, 242); rect(20,306,96,56); textSize(15); fill(252, 5, 5); textSize(22); text("Back", 45,340); if (mouseX > 20 & mouseX < 20+96 & mouseY > 306 & mouseY < 306+56) { fill(37, 94, 250); rect(15,301,106,66); fill(255, 0, 0); textSize(27); text("Back", 39,340); } if (mouseIsPressed & mouseX > 20 & mouseX < 20+96 & mouseY > 306 & mouseY < 306+56) { scene='menu'; } } }; //End draw function //The following code is for smooth arrow key movements. If one of the keys is being pressed we set the correct key variable to true, if one of the keys has been released, we set the correct key to false //The keyPressed function is built in (like the draw function) and is run when a key is pressed keyPressed = function() { //Start keyPressed function //Is the keyCode equal to the up arrow key, if so, we know the up key is being pressed if(keyCode === UP) { //Sets the keyUp variable to true so that we know that it has been pressed keyUp = true; //Set to true } //Is the keyCode equal to the right arrow key, if so, we know the right key is being pressed if(keyCode === RIGHT) { //Sets the keyRight variable to true so that we know that it has been pressed keyRight = true; //Set to true } //Is the keyCode equal to the left arrow key, if so, we know the up left arrow key is being pressed if(keyCode === LEFT) { //Sets the keyLeft variable to true so that we know that it has been pressed keyLeft = true; //Set to true } }; //End keyPressed function //The keyReleased function is built in (like the draw function) and is run when a key is released keyReleased = function() { //Begin keyReleased function //Is the keyCode equal to the up arrow key, if so, we know the up key is being released if(keyCode === UP) { keyUp = false; //Set to false } //Is the keyCode equal to the right arrow key, if so, we know the right key is being released if(keyCode === RIGHT) { keyRight = false; //Set to false } //Is the keyCode equal to the right arrow key, if so, we know the left key is being released if(keyCode === LEFT) { keyLeft = false; //Set to false } }; //End keyRelased function //\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\\\ /************************************End Code**************************************/ //\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\\\
Folds	86,101,108,110,113,119,248,397
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgKLMuZLYCgw
Votes	196
Spin-Offs	15
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Angular Programming
Author Name	angularprogramming
Author ID	kaid_185275357289060791734132
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739452553705
Updated	10 months ago, 1739452560220
Source Deleted	unknown