Viewing Program

Program Data

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

Title	Platformer Tutorial
ID	4978980719378432
Created	4 years ago, 1622125547293
Updated	4 years ago, 1624834968080
Code	<!DOCTYPE html> <!-- Hello fellow coders. Yes, I can do html (just not very well) Sub here - https://www.khanacademy.org/cs/i/6652809926492160 I have created for you a tutorial for platformers. This is my personal method of doing them. Judges: Dont judge the pjs parts, they are not the focus of this program, I only added them to give examples of what it should look like. This is not pjs. Please dont mark me down for it. This is through and through, and html program. --> <html> <head> <meta charset="utf-8"> <title>Platformer Tutorial</title> <link rel="stylesheet" id="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/dracula.min.css"/> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.3/dist/html2canvas.min.js"> </script> <style> body, html, head{ margin:0; background-color:rgb(50,50,50); overflow-x:hidden; } h1, h2, h3{ text-align:center; font-family:'Titillium Web'; margin:0; color:rgba(255,255,255); } h1{ font-size:50px; } h2{ font-size:35px; } h3{ font-size:30px; margin:20px 50px; border-radius:50px; } h4,h5{ color:white; font-family:'Titillium Web'; margin:20px 50px; font-size:20px; } footer{ color:white; font-family:'Titillium Web'; margin:0px; text-align:center; padding:50px; font-size:20px; } h5{ font-size:17px; } p, ul, ol { margin-left:50px; margin-right:50px; color:white; font-family:'Titillium Web'; } li { margin:0px 0px; } a:hover, a:link, a:visited { color:white; } canvas { margin:20px 100px; } .parallax { background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Abstract_blue_background7.jpg/800px-Abstract_blue_background7.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; position: relative; } .hljs{ margin:20px 50px; background-color:rgb(40,40,40); border-radius:10px; } </style> <!-- Container element --> </head> <script></script> <body> <div class="parallax" style="height:100px"></div> <h1 class="parallax" style="height:60px">Liam Ks Tutorials</h1> <h2 class="parallax" style="height:40px">Platformers</h2> <div class="parallax"style="height:100px"></div> <h3 class="parallax">Introduction</h3> <p>Today, we are going to go through, step by step, how to create a plaformer. A platformer is a great way to get a feel for the process of game-making, and is relatively simple in concept too! If you ever need help, or are confused about any aspect of the code, you can always contact me at <a href='https://www.khanacademy.org/profile/LK4637316/' target='_blank'>my Profile</a>, or just drop a question in the chat. </p> <h4>What do I need to know?</h4> <p>You should at least have a rudimentary understanding of</p> <ul> <li><a href='https://www.khanacademy.org/computing/computer-programming/programming' target='_blank'>Intro to JS</a> </li> <li>OOP and method prototypes</li> <li>Nested arrays</li> </ul> <h4>What will this tutorial cover?</h4> <p>Among other things, this tutorial will cover <ul> <li><a href='#setup'>Collisions and Movement setup</a></li> <li><a href='#block'>A Block Object</a></li> <li><a href='#bitmap'>Bitmaps/Level creating</a></li> <li><a href='#movement'>Player Movement</a></li> <li><a href='#collision'>Player Collision</a></li> <li><a href='#types'>More block types</a></li> <li><a href='#next'>Taking your platformer to the next level</a></li> </ul> <h4>Getting started</h4> <p>I would suggest opening a <a href = 'https://www.khanacademy.org/computer-programming/new/pjs' target = '_blank'>New Program</a> and coding along side me. While your could just copy and paste everything from in here, you can get so much more out of actually learning the content.</p> <h3 class="parallax" id='setup'>Code Setup</h3> <h4>Player movement setup</h4> <p>First things first, we are going to setup some things that will come into use later when we do player movement.</p> <pre><code class="javascript"> var keys = {}; keyPressed = function(){ keys[keyCode] = true; }; keyReleased = function(){ keys[keyCode] = false; }; //Add this to your program. </code></pre> <p>This code allows us to check which keys are being pressed at any given time, by checking for key codes. The keys that we will be using, the arrow keys, have pretty intuitive key codes. For example:</p> <pre><code class="javascript"> if(keys[LEFT]){ } //Dont add this yet. Just an example </code></pre> <p>Will let us run code if and only if we are pressing the left arrow key. This allows us to move the player only when we press the arrow keys.</p> <h4>Collision setup</h4> <p>In a basic platformer, like the one that we are coding, all of the objects for the player to collide with will be rectangular, meaning that we need a way to check to see if two rectangles are colliding.</p> <pre><code class='javascript'> var rectRect = function(x1,y1,w1,h1,x2,y2,w2,h2){ return(x1 + w1 > x2 && y1 + h1 > y2 && x1 < x2 + w2 && y1 < y2 + h2); }; //Copy this code into your program </code></pre> <p>This code checks the edges of one rectangle, and check to see if it is within the other rectangle. If it is, your rectangles are colliding. </p> <h3 class="parallax" id='block'>Block object</h3> <p>At this point, Im assuming that you have a basic understanding of how OOP works, because we're about to dive right into create an object constructor and method prototypes. If those big words sound a bit scary, never fear, its a lot simpler than it sounds. </p> <p>To start, we are going to create the object prototype, and store some values on this. <pre><code class = 'javascript'> var blocks = []; //Array to store blocks. var Block = function(x,y,type){ this.x = x; this.y = y; this.w = 20; this.h = 20; this.type = type; }; //Add this code </code></pre> <p> Yes, the Block object is a fairly simple object. We store 5 values on this, so that way, when we create new block instances using the <code>new</code> keyword, each block has its own separate set of values. The array is to later store the blocks for easy looping. <p>Each value is pretty self explanatory. We have <code>this.x</code> and <code>this.y</code> for positioning, <code>this.w</code> and <code>this.h</code> for sizing, and <code>this.type</code> to distinguish between diffent block types. <h4>Collision method prototype</h4> <p>Now we need some way for the block to check collisions with the player, so we should set up an easy way to do this. We could call our <code>rectRect()</code> function but that gets long and messy. So what we do instead is create an method prototype for checking collisons.</p> <pre><code class ='javascript'> Block.prototype.checkColl = function(obj){ return(rectRect(this.x,this.y,this.w,this.h,obj.x,obj.y,obj.w,obj.h)); };</code></pre> <p>Now we can check collisions with other objects by calling something like: <pre><code class = 'javascript'> if(block.checkColl(player)){ //run some sort of code. } //Dont add this, just an example </code></pre> <p>This will come in very useful when we start to add in things like lava or portals, and we need to check to see if the player is colliding with the block <h4>Display method prototype</h4> <p>We need a quick and easy way to draw our blocks. The best way to do this is with another method prototype. <pre><code class = 'javascript'> Block.prototype.display = function() { switch(this.type){ case 'block': fill(0); rect(this.x,this.y,this.w,this.h); break; } }; //Add this code. </code></pre> <p>For those of you who were wondering, switch is a javascript keyword not unlike if/else. This code basically means, if the block type is 'block', draw a black rectangle. <h4>Recap.</h4> <p>For those of you who are stuck, this is what code should look like so far. Currently, the code doesnt really do anything, but be patient, we're getting there. <pre><code class='javascript'> var keys = {}; var rectRect = function(x1,y1,w1,h1,x2,y2,w2,h2){ return(x1 + w1 > x2 && y1 + h1 > y2 && x1 < x2 + w2 && y1 < y2 + h2); }; var blocks = []; var Block = function(x,y,type){ this.x = x; this.y = y; this.w = 20; this.h = 20; this.type = type; }; Block.prototype.checkColl = function(obj){ return(rectRect(this.x,this.y,this.w,this.h,obj.x,obj.y,obj.w,obj.h)); }; Block.prototype.display = function() { switch(this.type){ case 'block': fill(0); rect(this.x,this.y,this.w,this.h); break; } }; keyPressed = function(){ keys[keyCode] = true; }; keyReleased = function(){ keys[keyCode] = false; }; </code></pre> <h3 class="parallax" id='bitmap'>Levels</h3> <p>If you have ever created pixel art, platformer levels are the next step. Based on the same concept, we store levels as bitmaps, or arrays of strings, and then loop through and render them as blocks.</p> <p>To start, we'll create a nested array with a grande total of one level. </p> <pre><code class = 'javascript'> var level = 0; var levels = [ [ 'bbbbbbbbbbbbbbbbbbbb', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..b..b.bbbbb......b', 'b..b..b...b........b', 'b..bbbb...b........b', 'b..b..b...b........b', 'b..b..b.bbbbb......b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'bbbbbbbbbbbbbbbbbbbb', ], ]; //Copy This. It should go under your block prototypes. </code></pre> <h4>Is making levels really as easy as this?</h4> <p>Yes and no. Eventually, creating levels will be as easy as this, but first we need to push Block objects (The one object we just created in the last section) onto our array. We can accomplish this through looping.</p> <pre><code class='javascript'> blocks = [];//empty out our blocks array. for(var i = 0; i < levels[level].length;i++){ for(var j = 0; j < levels[level][i].length;j++){ } } //hold off on copying for now. </code></pre> <p> This allows us to check each individual character in the level array. In this fashion, we can determine which block type to push onto the array using our good friend <code>switch</code>. </p> <pre><code class='javascript'> blocks = [];//empty out our blocks array. for(var i = 0; i < levels[level].length;i++){ for(var j = 0; j < levels[level][i].length;j++){ switch(levels[level][i][j]){ case 'b': blocks.push(new Block(j20,i20,'block')); break; } } } //hold off on copying. </code></pre> <h4>Im confused. Explain?</h4> <p>Dont worry, I was too at first. Line by line, heres what we do.</p> <ol> <li>Empty out the blocks array. <li>Loop through the levels array vertically. <li>Loop though horizontally <li>Identify what character is in each position. <li>Check to see if it is 'b' <li>If it is, push a Block in at that spot, with the type 'block' </ol> <h4>What now?</h4> <p>Glad you asked! Now we wrap it in a function so we can call it later.</p> <pre><code class = 'javascript'> var drawLevel = function(){ blocks = []; for(var i = 0; i < levels[level].length;i++){ for(var j = 0; j < levels[level][i].length;j++){ switch(levels[level][i][j]){ case 'b': blocks.push(new Block(j20,i20,'block')); break; } } } }; drawLevel(); //copy this underneath your level. </code></pre> <h3 class='parallax'>Draw blocks, finally!</h3> <p> This part is fairly easy, but first we need a draw function with a backdrop. </p> <pre><code class='javascript'> draw = function(){ background(255,255,255); }; //Dont copy yet </code></pre> <p>Then we just loop through the blocks and draw them!</p> <pre><code class='javascript'> draw = function(){ background(255,255,255); for(var i = 0; i < blocks.length; i ++){ blocks[i].display(); } }; //Should go under your drawLevel function </code></pre> <p>If all has gone right, you should have something that looks like an elaborate pixel art. At this point, thats all it is.</p> <canvas id="mycanvas"></canvas> <script> var programCode = function(processingInstance) { with (processingInstance) { size(400, 400); frameRate(30); frameRate(30); var keys = {}; var rectRect = function(x1,y1,w1,h1,x2,y2,w2,h2){ return(x1 + w1 > x2 && y1 + h1 > y2 && x1 < x2 + w2 && y1 < y2 + h2); }; var blocks = []; var Block = function(x,y,type){ this.x = x; this.y = y; this.w = 20; this.h = 20; this.type = type; }; Block.prototype.checkColl = function(obj){ return(rectRect(this.x,this.y,this.w,this.h,obj.x,obj.y,obj.w,obj.h)); }; Block.prototype.display = function() { switch(this.type){ case 'block': fill(0); rect(this.x,this.y,this.w,this.h); break; } }; var level = 0; var levels = [ [ 'bbbbbbbbbbbbbbbbbbbb', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..b..b.bbbbb......b', 'b..b..b...b........b', 'b..bbbb...b........b', 'b..b..b...b........b', 'b..b..b.bbbbb......b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'bbbbbbbbbbbbbbbbbbbb', ], ]; var drawLevel = function(){ blocks = []; for(var i = 0; i < levels[level].length;i++){ for(var j = 0; j < levels[level][i].length;j++){ switch(levels[level][i][j]){ case 'b': blocks.push(new Block(j20,i20,'block')); break; } } } }; drawLevel(); draw = function(){ background(255,255,255); for(var i = 0; i < blocks.length; i ++){ blocks[i].display(); } }; keyPressed = function(){ keys[keyCode] = true; }; keyReleased = function(){ keys[keyCode] = false; }; mouseClicked = function(){ Program.restart(); }; }}; // Get the canvas that ProcessingJS will use var canvas = document.getElementById("mycanvas"); // Pass the function to ProcessingJS constructor var processingInstance = new Processing(canvas, programCode); </script> <h3 class ='parallax' id='movement'>Player Constructor</h3> <p>The Player constructor and prototypes is the last big thing that we need to learn before our platformer comes together. This right here is probably the most complicated bit of code that we will come across. <h4>The constructor</h4> <pre><code class = 'javascript'> var Player = function(x,y){ this.x = x; this.y = y; this.w = 20; this.h = 20; this.px = 0; this.py = 0; this.xv = 0; this.yv = 0; this.grav = 0.32; this.canJump = false; this.jumpPower = 7; }; </code></pre> <p>Its just your basic constructor. We store player position, size, velocity, gravity and whether or not the player can jump on <code>this.</code> You can adjust the players gravity and jump power to your liking. Dont worry about <code>this.px</code> and <code>this.py</code> for now. They will be used in collision and represent previous coordinates. If using constructors is confusing, take a look at <a href='https://www.khanacademy.org/computing/computer-programming/programming'>Intro to JS</a>. They have an great tutorial on OOP. </p> <h4>Draw method prototype</h4> <p>This is where we will draw our player graphic. Play around with it all you want. Currently, it displays a blue rectangle with eyes. <pre><code class='javascript'> Player.prototype.draw = function() { fill(0,0,255); noStroke(); rect(this.x,this.y,this.w,this.h); fill(0); ellipse(this.x+6,this.y+10,4,10); ellipse(this.x+14,this.y+10,4,10); }; </code></pre> <h4>Player movement</h4> <p>Remember how I had you set up key presses at the very beginning? We finally get to code the player movement! Lets start with left and right movement.</p> <pre><code class='javascript'> Player.prototype.move = function(){ this.px = this.x; this.py = this.y; this.x += this.xv; this.xv = 0; if(keys[LEFT]){ this.xv = -3; } if(keys[RIGHT]){ this.xv = 3; } }; </code></pre> <p>This code allows the player to move left and right with the arrows. We increase the players x position by however much the x velocity is. If we are pressing LEFT, its -3, if we are pressing RIGHT, its 3, otherwise its nothing. We also set <code>this.px</code> and <code>this.py</code> values. This will be explained later. <h5>Adding in gravity.</h5> <p> To simulate gravity, we exponentially increase the amount that the player moves. The player starts slowly moving downwards, and the speed picks up as it goes. To do this, code the following. <pre><code class='javascript'> Player.prototype.move = function(){ this.px = this.x; this.py = this.y; this.y += this.yv; this.yv += this.grav; //Ignore below, we didnt change anything. this.x += this.xv; this.xv = 0; if(keys[LEFT]){ this.xv = -3; } if(keys[RIGHT]){ this.xv = 3; } };</code></pre> <p>Finally, we'll add in jumping. To do this, we check if the player can jump, and if it can, we set the y velocity to negative. <pre><code class='javascript'> Player.prototype.move = function(){ this.px = this.x; this.py = this.y; this.y += this.yv; this.yv += this.grav; this.x += this.xv; this.xv = 0; if(keys[LEFT]){ this.xv = -3; } if(keys[RIGHT]){ this.xv = 3; } //Ignore above, we didnt change anything. if(keys[UP]&&this.canJump){ this.yv = -this.jumpPower; this.canJump = false; } }; </code></pre> <p> We then want to create a new instance of Player to test how our program works so far. <pre><code class='javascript'> var player = new Player(200,200); </code></pre> <p>We then go down to our draw function (where we are drawing the blocks) and call our .draw and .move methods <pre><code class='javascript'> draw = function(){ background(255,255,255); player.draw(); player.move(); for(var i = 0; i < blocks.length; i ++){ blocks[i].display(); } }; </code></pre> <p>Your code should now run something like this. (Click to restart) <canvas id="mycanvas2"></canvas> <script> var programCode = function(processingInstance) { with (processingInstance) { size(400, 400); frameRate(30); frameRate(30); var keys = {}; var rectRect = function(x1,y1,w1,h1,x2,y2,w2,h2){ return(x1 + w1 > x2 && y1 + h1 > y2 && x1 < x2 + w2 && y1 < y2 + h2); }; var Player = function(x,y){ this.x = x; this.y = y; this.w = 20; this.h = 20; this.xv = 0; this.yv = 0; this.grav = 0.32; this.canJump = false; }; Player.prototype.draw = function() { fill(0,0,255); noStroke(); rect(this.x,this.y,this.w,this.h); fill(0); ellipse(this.x+6,this.y+10,4,10); ellipse(this.x+14,this.y+10,4,10); }; Player.prototype.move = function(){ this.y += this.yv; this.yv += this.grav; this.x += this.xv; this.xv = 0; if(keys[LEFT]){ this.xv = -3; } if(keys[RIGHT]){ this.xv = 3; } //Ignore above, we didnt change anything. if(keys[UP]&&this.canJump){ this.yv = -7; this.canJump = false; } }; var player = new Player(200,200); var blocks = []; var Block = function(x,y,type){ this.x = x; this.y = y; this.w = 20; this.h = 20; this.type = type; }; Block.prototype.checkColl = function(obj){ return(rectRect(this.x,this.y,this.w,this.h,obj.x,obj.y,obj.w,obj.h)); }; Block.prototype.display = function() { switch(this.type){ case 'block': fill(0); rect(this.x,this.y,this.w,this.h); break; } }; var level = 0; var levels = [ [ 'bbbbbbbbbbbbbbbbbbbb', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..b..b.bbbbb......b', 'b..b..b...b........b', 'b..bbbb...b........b', 'b..b..b...b........b', 'b..b..b.bbbbb......b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'bbbbbbbbbbbbbbbbbbbb', ], ]; var drawLevel = function(){ blocks = []; for(var i = 0; i < levels[level].length;i++){ for(var j = 0; j < levels[level][i].length;j++){ switch(levels[level][i][j]){ case 'b': blocks.push(new Block(j20,i20,'block')); break; } } } }; drawLevel(); draw = function(){ background(255,255,255); player.draw(); player.move(); for(var i = 0; i < blocks.length; i ++){ blocks[i].display(); } }; keyPressed = function(){ keys[keyCode] = true; }; keyReleased = function(){ keys[keyCode] = false; }; mouseClicked = function(){ player.y = 230; player.yv = 0; }; }}; // Get the canvas that ProcessingJS will use var canvas = document.getElementById("mycanvas2"); // Pass the function to ProcessingJS constructor var processingInstance = new Processing(canvas, programCode); </script> <p>If your code seems to not working, just ask me about it in the tips and thanks. <h3 class='parallax' id='collision'>Collisions</h3> <p>Lets go up to our Player method prototypes, and add a new one.</p> <pre><code class='javascript'> Player.prototype.collide = function(obj){ if(obj.checkColl(this)){ } }; </code></pre> <p>This code builds on our <code>Block.checkColl</code> method. Basically, the function will only run collision code if the player is colliding with the block.</p> <p>If the player is colliding with the block, we then check to see which side the player is colliding with. We can do this by checking where the player was in relation to the block before it collided with it. <pre><code class='javascript'> Player.prototype.collide = function(obj){ if(obj.checkColl(this)){ if(this.py <= obj.y - this.h) { //Collision with top of block } else if(this.px >= obj.x + obj.w) { //collision with right side } else if(this.px <= obj.x- this.w) { //collision with left side } else if(this.py >= obj.y + obj.h){ //collision with bottom } } }; </code></pre> <p>Next is just a matter of knowing how to run collisions. Heres what we are going to make the program do... <h5>Top Collisions</h5> <ul> <li>Stop player from moving down. <li>Allow player to jump again <li>Stop y velocity </ul> <h5>Right Collisions</h5> <ul> <li>Push player to rightmost edge <li>Stop x velocity </ul> <h5>Left Collisions</h5> <ul> <li>Push player to leftmost edge <li>Stop x velocity </ul> <h5>Bottom collisions</h5> <ul> <li>Push player to bottom edge <li>Make y velocity negative (bounce off ceiling) </ul> <p>That means the collision code would look something like</p> <pre><code class='javascript'> Player.prototype.collide = function(obj){ if(obj.checkColl(this)){ if(this.py <= obj.y - this.h) { this.y = obj.y - this.h; this.canJump = true; this.yv=0; } else if(this.px >= obj.x + obj.w) { this.x = obj.x+obj.w; this.xv = 0; } else if(this.px <= obj.x- this.w) { this.x = obj.x-this.w; this.xv = 0; } else if(this.py >= obj.y + obj.h){ this.y = this.py; this.yv = -this.yv; } } }; </code></pre> <h4>Calling collisions</h4> <p>The only thing left to do before we have a fully functioning platformer is to call collisions. We do this in our draw function.</p> <pre><code class='javascript'> draw = function(){ background(255,255,255); player.draw(); player.move(); for(var i = 0; i < blocks.length; i ++){ blocks[i].display(); //NEW CODE if(blocks[i].type === 'block'){ player.collide(blocks[i]); } } }; </code></pre> <p> Congratulations! You have just created your first platformer engine! It should run like below. (Click to restart)</p> <canvas id="mycanvas3"></canvas> <script> var programCode = function(processingInstance) { with (processingInstance) { size(400, 400); frameRate(30); frameRate(30); var keys = {}; var rectRect = function(x1,y1,w1,h1,x2,y2,w2,h2){ return(x1 + w1 > x2 && y1 + h1 > y2 && x1 < x2 + w2 && y1 < y2 + h2); }; var Player = function(x,y){ this.x = x; this.y = y; this.w = 20; this.h = 20; this.xv = 0; this.yv = 0; this.grav = 0.32; this.canJump = false; }; Player.prototype.draw = function() { fill(0,0,255); noStroke(); rect(this.x,this.y,this.w,this.h); fill(0); ellipse(this.x+6,this.y+10,4,10); ellipse(this.x+14,this.y+10,4,10); }; Player.prototype.move = function(){ this.px = this.x; this.py = this.y; this.y += this.yv; this.yv += this.grav; this.x += this.xv; this.xv = 0; if(keys[LEFT]){ this.xv = -3; } if(keys[RIGHT]){ this.xv = 3; } //Ignore above, we didnt change anything. if(keys[UP]&&this.canJump){ this.yv = -7; this.canJump = false; } }; Player.prototype.collide = function(obj){ if(obj.checkColl(this)){ if(this.py <= obj.y - this.h) { this.y = obj.y - this.h; this.canJump = true; this.yv=0; } else if(this.px >= obj.x + obj.w) { this.x = obj.x+obj.w; this.xv = 0; } else if(this.px <= obj.x- this.w) { this.x = obj.x-this.w; this.xv = 0; } else if(this.py >= obj.y + obj.h){ this.y = this.py; this.yv = -this.yv; } } }; var player = new Player(200,200); var blocks = []; var Block = function(x,y,type){ this.x = x; this.y = y; this.w = 20; this.h = 20; this.type = type; }; Block.prototype.checkColl = function(obj){ return(rectRect(this.x,this.y,this.w,this.h,obj.x,obj.y,obj.w,obj.h)); }; Block.prototype.display = function() { switch(this.type){ case 'block': fill(0); rect(this.x,this.y,this.w,this.h); break; } }; var level = 0; var levels = [ [ 'bbbbbbbbbbbbbbbbbbbb', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..b..b.bbbbb......b', 'b..b..b...b........b', 'b..bbbb...b........b', 'b..b..b...b........b', 'b..b..b.bbbbb......b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'bbbbbbbbbbbbbbbbbbbb', ], ]; var drawLevel = function(){ blocks = []; for(var i = 0; i < levels[level].length;i++){ for(var j = 0; j < levels[level][i].length;j++){ switch(levels[level][i][j]){ case 'b': blocks.push(new Block(j20,i20,'block')); break; } } } }; drawLevel(); draw = function(){ background(255,255,255); player.draw(); player.move(); for(var i = 0; i < blocks.length; i ++){ blocks[i].display(); if(blocks[i].type === 'block'){ player.collide(blocks[i]) } } }; keyPressed = function(){ keys[keyCode] = true; }; keyReleased = function(){ keys[keyCode] = false; }; mouseClicked = function(){ player.y = 230; player.yv = 0; }; }}; // Get the canvas that ProcessingJS will use var canvas = document.getElementById("mycanvas3"); // Pass the function to ProcessingJS constructor var processingInstance = new Processing(canvas, programCode); </script> <h3 class='parallax' id='types'>More Blocks and Levels</h3> <p>Your platformer is far from finished. While you do have collisions running, you can do so much more. To start, we are going to focus on two essential block types, lava and portals. <p>Go up to your levels array, replace it with this. You can always add more nested arrays for more levels. A good platformer generally has 15-25. <pre> <code> var levels = [ [ 'bbbbbbbbbbbbbbbbbbbb', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..P...............b', 'b...............@..b', 'b..................b', 'b......lll.........b', 'bbbbbbbbbbbbbbbbbbbb', ], [ 'bbbbbbbbbbbbbbbbbbbb', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b...b...b.....@....b', 'b.P.b...b..........b', 'b...blllb..........b', 'bbbbbbbbbbbbbbbbbbbb', ], ];</code> </pre> <p>Go to your drawLevel function, we need to push these new characters onto the blocks array. <pre> <code class='javascript'> var drawLevel = function(){ blocks = []; for(var i = 0; i < levels[level].length;i++){ for(var j = 0; j < levels[level][i].length;j++){ switch(levels[level][i][j]){ case 'b': blocks.push(new Block(j20,i20,'block')); break; //New Code case 'P': player.x = j20; player.y = i20; break; case '@': blocks.push(new Block(j20,i20,'portal')); break; case 'l': blocks.push(new Block(j20,i20,'lava')); break; } } } }; </code> </pre> <p>This allows us to</p> <ul> <li>Use the 'P' character in our levels array to set player's starting place <li>Use '@' to create a portal <li>Use 'l' to create lava. </ul> <p>Go to Block.prototype.display. There we will work on displaying the blocks.</p> <pre><code class='javascript'> Block.prototype.display = function() { switch(this.type){ case 'block': fill(0); rect(this.x,this.y,this.w,this.h); break; case 'portal': fill(187, 0, 255); ellipse(this.x+10,this.y+10,20,20); break; case 'lava': fill(255,0,0); rect(this.x,this.y,this.w,this.h); break; } }; </code></pre> <p>Feel free to adjust the graphics however you feel. We are currently just draing a simple ellipse for the portal and a rectangle for the lava.</p> <h4>Running collisions </h4> <p>We will now go to the draw function, and run collisions with the new block types. Lava should restart the level, while portals allow you to advance.</p> <pre><code class='javascript'> draw = function(){ background(255,255,255); player.draw(); player.move(); for(var i = 0; i < blocks.length; i ++){ blocks[i].display(); if(blocks[i].type === 'block'){ player.collide(blocks[i]) } if(blocks[i].checkColl(player)){ switch(blocks[i].type){ case 'portal': level ++; drawLevel() break; case 'lava': drawLevel(); } } } }; </code></pre> <p> The new code allows us to... <ul> <li>Check to see if the player is colliding with the block <li>Check that blocks type <li>if its a portal, advance to the level, draw it <li>if its a lava, restart the level </ul> <p> In this manner, we can add as many blocks and levels as we wish. You may notice the game freezes after level 2. This is because there is no level 3. In the draw function, add this code. </p> <pre><code class = 'javascript'> draw = function(){ background(255,255,255); player.draw(); player.move(); for(var i = 0; i < blocks.length; i ++){ blocks[i].display(); if(blocks[i].type === 'block'){ player.collide(blocks[i]) } if(blocks[i].checkColl(player)){ switch(blocks[i].type){ case 'portal': if(level < levels.length-1){ level ++; drawLevel() } else{ println('Game over'); noLoop(); //DONT JUST END PROGRAM HERE THO... } break; case 'lava': drawLevel(); } } } }; </code></pre> <canvas id="mycanvas4"></canvas> <script> var programCode = function(processingInstance) { with (processingInstance) { size(400, 400); frameRate(30); frameRate(30); var keys = {}; var rectRect = function(x1,y1,w1,h1,x2,y2,w2,h2){ return(x1 + w1 > x2 && y1 + h1 > y2 && x1 < x2 + w2 && y1 < y2 + h2); }; var Player = function(x,y){ this.x = x; this.y = y; this.w = 20; this.h = 20; this.xv = 0; this.yv = 0; this.grav = 0.32; this.canJump = false; }; Player.prototype.draw = function() { fill(0,0,255); noStroke(); rect(this.x,this.y,this.w,this.h); fill(0); ellipse(this.x+6,this.y+10,4,10); ellipse(this.x+14,this.y+10,4,10); }; Player.prototype.move = function(){ this.px = this.x; this.py = this.y; this.y += this.yv; this.yv += this.grav; this.x += this.xv; this.xv = 0; if(keys[LEFT]){ this.xv = -3; } if(keys[RIGHT]){ this.xv = 3; } //Ignore above, we didnt change anything. if(keys[UP]&&this.canJump){ this.yv = -7; this.canJump = false; } }; Player.prototype.collide = function(obj){ if(obj.checkColl(this)){ if(this.py <= obj.y - this.h) { this.y = obj.y - this.h; this.canJump = true; this.yv=0; } else if(this.px >= obj.x + obj.w) { this.x = obj.x+obj.w; this.xv = 0; } else if(this.px <= obj.x- this.w) { this.x = obj.x-this.w; this.xv = 0; } else if(this.py >= obj.y + obj.h){ this.y = this.py; this.yv = -this.yv; } } }; var player = new Player(200,200); var blocks = []; var Block = function(x,y,type){ this.x = x; this.y = y; this.w = 20; this.h = 20; this.type = type; }; Block.prototype.checkColl = function(obj){ return(rectRect(this.x,this.y,this.w,this.h,obj.x,obj.y,obj.w,obj.h)); }; Block.prototype.display = function() { switch(this.type){ case 'block': fill(0); rect(this.x,this.y,this.w,this.h); break; case 'portal': fill(187, 0, 255); ellipse(this.x+10,this.y+10,20,20); break; case 'lava': fill(255,0,0); rect(this.x,this.y,this.w,this.h); break; } }; var level = 0; var levels = [ [ 'bbbbbbbbbbbbbbbbbbbb', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..P...............b', 'b...............@..b', 'b..................b', 'b......lll.........b', 'bbbbbbbbbbbbbbbbbbbb', ], [ 'bbbbbbbbbbbbbbbbbbbb', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b..................b', 'b...b...b.....@....b', 'b.P.b...b..........b', 'b...blllb..........b', 'bbbbbbbbbbbbbbbbbbbb', ], ]; var drawLevel = function(){ blocks = []; for(var i = 0; i < levels[level].length;i++){ for(var j = 0; j < levels[level][i].length;j++){ switch(levels[level][i][j]){ case 'b': blocks.push(new Block(j20,i20,'block')); break; //New Code case 'P': player.x = j20; player.y = i20; break; case '@': blocks.push(new Block(j20,i20,'portal')); break; case 'l': blocks.push(new Block(j20,i20,'lava')); break; } } } }; drawLevel(); draw = function(){ background(255,255,255); player.draw(); player.move(); for(var i = 0; i < blocks.length; i ++){ blocks[i].display(); if(blocks[i].type === 'block'){ player.collide(blocks[i]) } if(blocks[i].checkColl(player)){ switch(blocks[i].type){ case 'portal': if(level < levels.length-1){ level ++; drawLevel() } else{ println('Game over. Dont just end the program here tho...'); noLoop(); //DONT JUST END PROGRAM HERE THO... } break; case 'lava': drawLevel(); break; } } } }; keyPressed = function(){ keys[keyCode] = true; }; keyReleased = function(){ keys[keyCode] = false; }; }}; // Get the canvas that ProcessingJS will use var canvas = document.getElementById("mycanvas4"); // Pass the function to ProcessingJS constructor var processingInstance = new Processing(canvas, programCode); </script> <h3 class='parallax' id='next'>The Next Step</h3> <p>You have just created a sucessful platformer, so the question is, what comes next? The next step would be to ramp up your game. This is still a pretty basic engine. </p> <p>Out of ideas? Try adding the following <ul> <li>More block types (tramps, ice, triangles) <li>Better graphics (red rects dont quite cut it) <li>A menu, win screen, how screen <li>More levels <li>A story? <li>Enemies </ul> <p>Who knows where your imagination might take you!</p> <footer class='parallax'>©Liam K. 2021</footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> <!-- Program Saver made by Bluebird --> <script>//1035246 big 1032738 good var save = function(){ html2canvas(document.body,{ allowTaint : false, useCORS: true, width:600, height:600, y: 0 }) .then(function(canvas){ b64Img = canvas.toDataURL(); window.top.postMessage(b64Img, "https://www.khanacademy.org/"); }); }; var handleSave = function(e) { if (JSON.parse(e.data).screenshot) { setTimeout(function() { save(); }, 1000) } }; window.savers = window.savers \|\| 0; window.addEventListener('message', handleSave); window.savers += 1; for (window.savers; window.savers > 1; window.savers -= 1) { window.removeEventListener('message', handleSave) } </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgP3ItIvsCAw
Votes	236
Spin-Offs	30
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Liam K.
Author Name	liamk.ka
Author ID	kaid_160653079463992085090428
Author Profile Access	PUBLIC

Archive Data

Added	1 years ago, 1731175241512
Updated	10 months ago, 1739372310000
Source Deleted	unknown