I've been working with p5.js a bit, and I've figured out how to get an object to detect collisions, but I'm quite confused on how to handle those collisions. I try setting the player velocity to 0, but then the player gets stuck. I've also tried separated the collisions to each side, but that doesn't work either.
Here is my player constructor with the collision functions:
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);
image(playerImg, this.pos.x, this.pos.y, this.w, this.h);
}
run() {
this.update();
}
isOnFloor() {
return(this.pos.y >= canvasHeight - this.h);
}
collides(x, y, w, h) {
if (this.pos.x >= x - this.w && this.pos.x <= x+w &&
this.pos.y >= y - this.h && 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;
}
}
collidesXL(x) { //X axis Left
if (this.pos.x >= x - this.w) {
return true;
} else {
return false;
}
}
collidesXR(x, w) { //X axis Right
if (this.pos.x <= x+w) {
return true;
} else {
return false;
}
}
collidesYT(y, h) { //Y axis Top
if (this.pos.y <= y+h) {
return true;
} else {
return false;
}
}
collidesYB(y) { //Y axis Bottom
if (this.pos.y >= y - this.h) {
return true;
} else {
return false;
}
}
}
As you can see, I've created many functions trying to get collision handling working. Here is my main code, with the collision handling on line 62. Line 54 shows code I've commented out because it didn't work.
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;
let velocityDebug = false; //keep this off because of lag
function setup() {
createCanvas(canvasWidth, canvasHeight)
player = new Player()
block = new Block(canvasWidth / 3, canvasHeight / 1.2, 200, 25)
}
function preload() {
playerImg = loadImage(palyerImageData);
}
function draw() {
background(50, 200, 255)
player.run();
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;
}
function keyReleased() {
player.vel.x = speed;
}
/*if (player.collides(block.x, block.y, block.w, block.h)) {
player.vel.y = 0;
player.vel.x = 0;
player.grav = 0;
} else {
player.grav = gravity;
}*/
if (player.collides(block.x, block.y, block.w, block.h)) {
if (player.collidesXL(block.x)) {
}
if (player.collidesXR(block.x, block.w)) {
}
if (player.collidesYT(block.y, block.h)) {
}
if (player.collidesYB(block.y)) {
}
} else {
player.acc = acceleration;
player.grav = gravity;
}
if (velocityDebug) {
console.log("Y Vel: " + player.vel.y)
console.log("X Vel:" + player.vel.x)
}
}
// 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);
image(playerImg, this.pos.x, this.pos.y, this.w, this.h);
}
run() {
this.update();
}
isOnFloor() {
return (this.pos.y >= canvasHeight - this.h);
}
collides(x, y, w, h) {
if (this.pos.x >= x - this.w && this.pos.x <= x + w &&
this.pos.y >= y - this.h && 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;
}
}
collidesXL(x) { //X axis Left
if (this.pos.x >= x - this.w) {
return true;
} else {
return false;
}
}
collidesXR(x, w) { //X axis Right
if (this.pos.x <= x + w) {
return true;
} else {
return false;
}
}
collidesYT(y, h) { //Y axis Top
if (this.pos.y <= y + h) {
return true;
} else {
return false;
}
}
collidesYB(y) { //Y axis Bottom
if (this.pos.y >= y - this.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)
}
display() {
fill(this.color)
rect(this.x, this.y, this.w, this.h)
}
}
const palyerImageData = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAA0CAYAAACO0MgGAAAAAXNSR0IArs4c6QAAAIRlWElmTU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABagAwAEAAAAAQAAADQAAAAAVBoiPQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAABKVJREFUWAnNl0usXlMUx2+13k1VS6US10A0EpGIx0AnEkFC0KAe1Wpuq+mVOxYGRuIxkCYkBDEyqIFHpQyIICZK4lVK00gkEgaox0BKlVv1+52z/6fne3+fkZX8zt577b3XXnudtfd3vgVTvXIsqr+Leg3ltbACjim6ecpv4WXYVXTtOZVqQelIkQEXo9gGP8FO2AO/gsbPgEvhRjgAc/AjHAd/QY9oVNkAX8IVNkbIXfTvBRdSNN4hUdyA9nM4ufSqXwh62mZR0VNMXQT74FwbiH2VpLKclkbPqtVTJ5ZyWLG4dBqWd7oHxtvH6bivdJ7QPWhIO2NfYMy6Mi7OVlt/C+XK0tH9Uou6b3F80V5F+VKpLzJuinH6Gb63MaEkNT9g3lJYAvMxfCYNDSuTeOv4f8ocU+8gVLuOYY054L9KnNFGZTOG96NYVqwemdB6nDLWZpK2auuUnixPVIxTHVtysC5kxiH4BRbqsR3G9ztYC0pSsG4Nf3qAlC3wZlUr7ykrnoNyN+TUTXJAVjPvfcgiiXnj4VY634OIya/37szB4mTjmV15Ur0vLgOlORx186jiXhQfgTEbJV6rXljXlYHZfc+8rOYdrOfPgRfTNOitXq4Cb8BX4Q04H5QOo00s6r5qssY9TfZp4GpYDBfAH/AV/AYvQl6WRnMCqQ6WeJ4Rc1TMbw27QFvywtq6yqsORavhtv1FuA02grF0wUvgJjBfx/aUsZUkXmfT+hrMjofBsKyH10ExW3J6K0Ue/ZSJsWN2wD3wJ6woPE/5O9wP3g3dYUPVu5oLOVjZCa+U0rbxzcu+g/rNcDkYruyQai3dHru6hh8CvXwE8gvhS9KIYgbMwJNgxtju8Lxt2NPkRD25Em4HJV7WrfrpsffiegpMO8WsaeylYgYcglXwIPjWFfXzVa1ewMmKu3EHT4PZ8QAcho6QZAsO/Az0VnEHisYVvbulqtVG45SqjyHzqvF2upLyGmyHt8FOd6DEy+667yKLzlB/DE4Bw1ndx058FNzSNnAHeUlUGzHW7UXscJzXq4fnCfATQDmix3fCatgISvfkWtsZ4+gsD4KePws/gAepStlPqZj8SrZWt+pnXsgzNP3iUXwfbWlnzod0XOO2Ta/9oIF+IUBdSXtydCndpbbMICOww1B8AypN8mHSL8bt8RrVjtfqrIbdVnKV6lAZFP9M0o72drXTLZ2DylEeZ57pW6VbFIPKtpft+qDx6g/r8bgyrseVvf+N4XF3d/SaGzIj+evdkZQcGetRobA/hqep57Or3wkd4ltvVwzM0uUfn3dhZRmWa7U0xy9yR8wx5ZMy7XrKfXB6aU9sPJ7ejQG/47KI9vx18Zo8zQYylnHjmYGz1DWaRdSnby31L2A5KNHXrT7PDNhKn9tPu+1xdP5MaXwZKNHXrdYznm1B5x2dgdG3hjZ9t6LU+KmlM3OasVFsRqOn+ZaIvhnYqqTPz4Q9sLT0Rd8Y2USHnk6Sq3FgHfNMR39Mlcb4DA1/+k8CpR3TWjP4GSPrGaLxJRlqSu0GP5WUfjGtewY/Y3wDQzQ+7U+Jn0tr4AC4Nb9yJhXvEXe5Hbzoz/sX+27EJnwBpM8AAAAASUVORK5CYII=";
body, html {
margin: 0;
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
I've been working on this for weeks now, and I've done a ton of tests, but nothing works. I can't seem to stop the player from falling through the platform without changing the player velocity to 0, which of course, makes the player unable to move. Please help. What should I do to fix this?
Here is the full code on replit, along with a demo that you can try:
Code: https://replit.com/@STCollier/Player-Movement-Script?v=1 Demo: https://player-movement-script.stcollier.repl.co/
Thank you so much!