var canvasWidth = window.innerWidth
var canvasHeight = window.innerHeight
let player;
var playerImg;
let platform;
let speed = 5;
let acceleration = 0.075;
let jumpForce = -10;
let gravity = 0.25;
function setup() {
createCanvas(canvasWidth, canvasHeight)
player = new Player()
block = new Block(canvasWidth / 3, canvasHeight / 1.2, 200, 25)
frameRate(15);
}
function preload() {
playerImg = loadImage(palyerImageData);
}
let first = true;
function draw() {
background(50, 200, 255, 20)
let initX = player.pos.x;
let initY = player.pos.y;
player.update();
block.display();
if (keyIsPressed && keyCode === UP_ARROW && player.isOnFloor()) {
player.vel.y = jumpForce;
} else if (keyIsPressed && keyCode === RIGHT_ARROW) {
player.pos.x += player.vel.x;
} else if (keyIsPressed && keyCode === LEFT_ARROW) {
player.pos.x -= player.vel.x;
} else {
player.vel.x = speed;
}
// Calculate the direction of movement so we no what edges to detect collisions with.
let deltaX = player.pos.x - initX;
let deltaY = player.pos.y - initY;
// This doesn't do anything here. It would need to be declared globally
/*
function keyReleased() {
player.vel.x = speed;
} */
if (player.collides(block.x, block.y, block.w, block.h)) {
let dir = '';
if (deltaY < 0) dir += 'N';
else if (deltaY > 0) dir += 'S';
if (deltaX < 0) dir += 'W';
else if (deltaX > 0) dir += 'E';
let tr = block.inside(player.pos.x + player.w, player.pos.y);
let br = block.inside(player.pos.x + player.w, player.pos.y + player.h);
let tl = block.inside(player.pos.x, player.pos.y);
let bl = block.inside(player.pos.x, player.pos.y + player.h);
push();
stroke('red');
strokeWeight(2);
if (dir === 'E' ||
deltaX > 0 && player.collidesY(block.y, block.h) &&
// The player's right side collided with the block's left side
player.collidesXL(block.x, block.w) &&
// And either both the top right and bottom right of the player are inside the block or neither of them are.
xnor(tr, br)) {
// simple case: our right edge collided with the block's left edge
player.pos.x = block.x - player.w - 1;
line(block.x, block.y, block.x, block.y + block.h);
} else if (dir === 'W' ||
deltaX < 0 && player.collidesY(block.y, block.h) && player.collidesXR(block.x, block.w) && xnor(tl, bl)) {
// simple case: our left edge collided with the block's right edge
player.pos.x = block.x + block.w + 1;
line(block.x + block.w, block.y, block.x + block.w, block.y + block.h);
} else if (dir === 'S' ||
deltaY > 0 && player.collidesX(block.x, block.w) && player.collidesYB(block.y, block.h) && xnor(bl, br)) {
// simple case: our bottom edge collided with the block's top edge
player.pos.y = block.y - player.h - 1;
// reset velocity due to gravity
if (player.vel.y > 0) {
player.vel.y = player.grav;
}
line(block.x, block.y, block.x + block.w, block.y);
} else if (dir === 'N' ||
deltaY < 0 && player.collidesX(block.x, block.w) && player.collidesYT(block.y, block.h) && xnor(tl, tr)) {
// simple case: our top edge collided with the block's bottom edge
player.pos.y = block.y + block.h + 1;
line(block.x, block.y + block.h, block.x + block.w, block.y + block.h);
} else {
// nasty case, we collided from a corner, we need to determine whether to constrain the player's position in the X or in the Y direction.
let slope = deltaY / deltaX;
stroke('limegreen');
strokeWeight(6);
// At this point only one corner should be inside the box
if (tr) {
// At the point where the player's Top Right intersected the block, was the block's Bottom Left above or below the player's Top Right
if (initX + player.w >= block.x || initY + (block.x - (initX + player.w)) * slope > block.y + block.h) {
// Since the players TR was below the block's BL at the time of collision, constrain the Player's Y position
player.pos.y = block.y + block.h + 1;
} else {
player.pos.x = block.x - player.w - 1;
}
point(block.x, block.y + block.h);
} else if (br) {
if (initX + player.w >= block.x || initY + player.h + (block.x - (initX + player.w)) * slope < block.y) {
player.pos.y = block.y - player.h - 1;
// reset velocity due to gravity
if (player.vel.y > 0) {
player.vel.y = player.grav;
}
} else {
player.pos.x = block.x - player.w - 1;
}
point(block.x, block.y);
} else if (bl) {
if (initX <= block.x + block.w ||
initY + player.h + (initX - (block.x + block.w)) * slope < block.y) {
player.pos.y = block.y - player.h - 1;
// reset velocity due to gravity
if (player.vel.y > 0) {
player.vel.y = player.grav;
}
} else {
player.pos.x = block.x + block.w + 1;
}
point(block.x + block.w, block.y);
} else if (tl) {
if (initX <= block.x + block.w ||
initY + (initX - (block.x + block.w)) * slope > block.y + block.h) {
player.pos.y = block.y - player.h - 1;
} else {
player.pos.x = block.x + block.w + 1;
}
point(block.x + block.w, block.y + block.h);
}
}
pop();
}
player.display();
}
function xnor(a, b) {
return (a && b) || (!a && !b);
}
// Player class (same as above)
class Player {
constructor() {
this.w = 50;
this.h = 125;
this.pos = createVector(0, 0);
this.vel = createVector();
this.acc = acceleration;
this.grav = gravity;
}
update() {
this.vel.y += this.grav;
this.pos.y += this.vel.y;
this.vel.x += this.acc;
this.pos.y = constrain(this.pos.y, 0, canvasHeight - this.h);
this.pos.x = constrain(this.pos.x, 0, canvasWidth - this.w);
}
display() {
image(playerImg, this.pos.x, this.pos.y, this.w, this.h);
}
isOnFloor() {
return (this.pos.y >= canvasHeight - this.h);
}
collides(x, y, w, h) {
if (this.pos.x + this.w >= x && this.pos.x <= x + w &&
this.pos.y + this.h >= y && this.pos.y <= y + h) {
return true;
} else {
return false;
}
}
collidesY(y, h) {
if (this.pos.y >= y - this.h && this.pos.y <= y + h) {
return true;
} else {
return false;
}
}
collidesX(x, w) {
if (this.pos.x >= x - this.w && this.pos.x <= x + w) {
return true;
} else {
return false;
}
}
// Check if the right side of the player is inside the box
collidesXL(x, w) { //X axis Left
if (this.pos.x + this.w >= x && this.pos.x + this.w <= x + w) {
return true;
} else {
return false;
}
}
// Check if the left side of the player is inside the box
collidesXR(x, w) { //X axis Right
if (this.pos.x <= x + w && this.pos.x >= x) {
return true;
} else {
return false;
}
}
// Check if the top side of the player is inside the box
collidesYT(y, h) { //Y axis Top
if (this.pos.y <= y + h && this.pos.y >= y) {
return true;
} else {
return false;
}
}
// Check if the bottom side of the player is inside the box
collidesYB(y, h) { //Y axis Bottom
if (this.pos.y + this.h >= y && this.pos.y <= y + h) {
return true;
} else {
return false;
}
}
}
class Block {
constructor(x, y, w, h) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.color = color(225, 225, 255, 20)
}
display() {
fill(this.color)
stroke(0, 0, 0, 50);
rect(this.x, this.y, this.w, this.h)
}
inside(x, y) {
return x >= this.x && x <= this.x + this.w &&
y >= this.y && y <= this.y + this.h;
}
}
const palyerImageData = "data:image/png;base64,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";
body, html {
margin: 0;
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>