Viewing Program

Program Data

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

Title	Green Ghost's Platformer Tutorial
ID	5853117066723328
Created	4 years ago, 1611614335920
Updated	2 years ago, 1684816737016
Code	// A new and improved platformer collision tutorial by Green Ghost! // Credit to ScusX for teaching me the concept for this collision system! // Feel free to read the code, learn, and use whatever you find! If you're unsure of what you're allowed to do, read the Khan Academy guidelines. // I would advise that you take the Khan Academy Processing JS courses before tackling this code, since there a many helpful concepts that you should know before attempting this. // Set some stuff up size (600, 600, P2D); smooth(); // Variables for scales and forces in the platformer var blockSz = 40; var playerSz = blockSz / 4 * 3; var playerSpeed = 4; var playerJumpAmt = 12; var gravityAmt = 0.6; // These will eventually be the player and list of blocks var player, blocks = []; // Map of the level var level = [ " ", " ", "000 000 00 000", "0 0 0 0 0 00 ", "0 0 0 0 0 0 ", "000 000 00 000", " ", "000 000 ", " 00 0 000", " 0", " 0", " 0 0 000", " @ 0 0", " 0 0", "000000 0000" ].join(""); // Join the strings together. Not necessary and can make it tricky to design levels, but this just allows you to use one loop to create blocks. You may not want to use this exact method. // Collide two square objects function collide(x1, y1, sz1, x2, y2, sz2) { return x1 < x2 + sz2 && x1 + sz1 > x2 && y1 < y2 + sz2 && y1 + sz1 > y2; } // Draw the background function drawBackground() { background(20, 20, 25); fill(45, 40, 45); triangle(50, 450, 150, 400, 150, 500); rect(170, 430, 130, 40); } // Draw a block function drawBlock(x, y, sz) { rectMode(CENTER); colorMode(HSB); noStroke(); fill((x / 5 + y + frameCount) % 255, 150, 255); rect(x + sz / 2, y + sz / 2, sz, sz); colorMode(RGB); stroke(255, 255, 255, 100); strokeWeight(sz / 6); noFill(); rect(x + sz / 2, y + sz / 2, sz / 6 * 5, sz / 6 * 5); strokeWeight(sz / 10); rect(x + sz / 2, y + sz / 2, sz / 3, sz / 3); noStroke(); rectMode(CORNER); } // Draw the player function drawPlayer (x, y, sz) { fill(255, 255, 245); noStroke(); rect(x, y, sz, sz); fill(20, 20, 25); arc(x + sz / 2, y + sz / 2, sz / 3 * 2, sz / 3 * 2, 0, 180); arc(x + sz / 7 * 2, y + sz / 3, sz / 4, sz / 3, 181, 360); arc(x + sz / 7 * 5, y + sz / 3, sz / 4, sz / 3, 181, 360); } // Block constructor function Block (x, y, sz) { this.x = x * sz; this.y = y * sz; this.sz = sz; } // Draw the block Block.prototype.display = function() { drawBlock(this.x, this.y, this.sz); }; // Determine if the block is hitting anything Block.prototype.collide = function(x, y, sz) { return collide(this.x, this.y, this.sz, x, y, sz); }; // Player constructor function Player (sz, speed, jumpAmt) { this.x = 0; // player coordinates this.y = 0; this.prevX = 0; // player previous coordinates this.prevY = 0; this.startX = 0; // player spawn coordinates this.startY = 0; this.sz = sz; // player size this.speed = speed; // player speed this.jumpAmt = jumpAmt; // player jump amount this.grav = 0; // player gravity this.keys = []; // keeps track of which keys are being pressed this.canJump = false; // keeps track of if the player can jump or not this.collideNum = 0; // keeps track of which block the player hit } // Draw the player Player.prototype.display = function() { drawPlayer(this.x, this.y, this.sz); }; // Move the player on the x axis Player.prototype.moveX = function() { // Save the previous x position this.prevX = this.x; // Use the key events to move the player's x position if (this.keys[LEFT]) { this.x -= this.speed; } if (this.keys[RIGHT]) { this.x += this.speed; } // Constrain the x axis to the canvas this.x = constrain(this.x, 0, width - this.sz); }; // Move the player on the y axis Player.prototype.moveY = function() { // Save the previous y position this.prevY = this.y; // If you can jump and the "up" key is pressed, make the gravity go negative if (this.keys[UP] && this.canJump) { this.grav = -this.jumpAmt; } // Move the player on the y axis smoothly this.y += this.grav; this.grav += gravityAmt; // Respawn if you fall of the screen if (this.y > height) { this.reset (); } }; // Collide the player on the x axis Player.prototype.collideX = function() { if (this.collide(blocks)) { var curBlock = blocks[this.collideNum]; if (this.prevX < curBlock.x) { // If you hit the left side of a block this.x = curBlock.x - this.sz; } else { // If you hit the right side of a block this.x = curBlock.x + curBlock.sz; } } }; // Collide the player on the y axis Player.prototype.collideY = function() { this.canJump = false; if (this.collide(blocks)) { var curBlock = blocks[this.collideNum]; if (this.prevY < curBlock.y) { // If you hit the top of a block this.y = curBlock.y - this.sz; this.grav = 0; this.canJump = true; } else { // If you hit the bottom of a block this.y = curBlock.y + curBlock.sz; this.grav = -this.grav / 2; } } }; // Collide the player with a list of any solid objects Player.prototype.collide = function(list) { for (var i = 0; i < list.length; i++) { if (list[i].collide(this.x, this.y, this.sz)) { this.collideNum = i; // This keeps track of which block the player hit return true; } } return false; }; // Set the players position and spawn point Player.prototype.setPos = function(x, y) { this.x = x * blockSz + (blockSz - this.sz) / 2; this.y = y * blockSz + (blockSz - this.sz); this.startX = this.x; this.startY = this.y; }; // Method for when a key is pressed Player.prototype.keyDown = function (code) { this.keys[code] = true; }; // Method for when a key is released Player.prototype.keyUp = function (code) { this.keys[code] = false; }; // Reset the player to its spawn point Player.prototype.reset = function () { this.x = this.startX; this.y = this.startY; this.grav = 0; this.keys = []; this.canJump = false; }; // Create a new player player = new Player(playerSz, playerSpeed, playerJumpAmt); // Loop through level array and create new blocks for (var i = 0; i < level.length; i++) { if (level[i] === "0") { // Add a block to the list blocks.push(new Block(i % (width / blockSz), Math.floor(i / (width / blockSz)), blockSz)); } else if (level[i] === "@") { // Set the player's spawn point player.setPos(i % (width / blockSz), Math.floor(i / (width / blockSz))); } // Blank spaces [" "] don't do anything } // Animate everything draw = function() { // Move everything /* It's important to calculate all movement on the x axis seperate from the y axis because that's what tells the computer which side of a block the player is colliding with. */ player.moveX(); player.collideX(); player.moveY(); player.collideY(); // Draw everything drawBackground(); for (var i = 0; i < blocks.length; i++) { blocks[i].display(); } player.display(); }; // User interaction function keyPressed () { player.keyDown(keyCode); } function keyReleased () { player.keyUp(keyCode); }
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgN2ckOyyCgw
Votes	233
Spin-Offs	21
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Green Ghost
Author Name	GreenGhost1
Author ID	kaid_145655330786057731504264
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739450074124
Updated	10 months ago, 1739450082646
Source Deleted	unknown