← Back to all posts
##### Collisions and Animation

So, I'm currently developing a game in the Javascript editor P5.JS called 'Pixel the Alien', based on the classic retro platformer format from back in the day.

But I have two problems: collisions and animation. Here is my snippet of code for the collisions...

if(x >= b1X-b1Width && x <= b1X+b1Width && y >= b1Y-b1Height/2 && y <= b1Y+b1Height/2) {
y = y ;
velocity = 0 ;
jumpCounter = 0 ;
fallingSpeed = 0 ;
}

There's a problem with this, and it's jumping off - once you are on, you can't get off. I want to fix it, but I don't know how to fix this problem. Does anyone know?

And there's a problem with my animation. Here's the snippet of code for the animation...

function player1() {

``````image(pixelIdle, x, y, pixelWidth, pixelHeight);

if (lookingRight == true) {
lookingLeft = false ;
step = step+1
}
else if (step == 0) {
image(pixelRight1, x, y, pixelWidth, pixelHeight);
}
else if (step == 1) {
image(pixelRight2, x, y, pixelWidth, pixelHeight);
step = 0 ;
}

if (lookingRight == false && lookingLeft == false) {
image(pixelIdle,x,y,pixelWidth,pixelHeight)
}``````

}

Since I've been trying to figure out the collisions code problem (with the help of my uncle), the animations stopped working. Great(!).

I need help to figure this out, and suggest something, then that would be great, because I am stumped at the moment when it comes to the collisions and animation.

By the way, accessing the game via Repl.it is very slow, so copy and paste this into the official P5.JS website (editor.p5.js.org). Here is the code for my game:

// 'X' Variables
var x = 3;

// 'Y' Variables
var y = 335;

// Pixel's Variables
var pixelWidth = 145 ;
var pixelHeight = 145 ;

let pixelIdle;
let pixelRight1 ;
let pixelRight2 ;
let moonBlock ;
let themeTune ;
let pixelBeep ;

}

// Gravity Variables
var jump = false; //are we jumping?
var direction = 1; //the force of gravity in the 'Y' direction
var velocity = 2; //speed of player
var jumpPower = 10; //the strength of the jump
var fallingSpeed = 2; //equal to velocity
var minHeight = y; //height of the surface
var maxHeight = 5; //height of the sky
var jumpCounter = 0; //keeps track of how much we are jumping

// Animation Variables
var step = 0 ;
var lookingRight = true ;
var lookingLeft = false ;

// Platform Variables
var b1X = 400 ;
var b1Y = 300 ;
var b1Height = 150 ;
var b1Width = 25 ;

function setup() {
createCanvas(595, 550);
themeTune.loop();
themeTune.setVolume(0.1)

}

function draw() {

gravity();
player1();

background(38, 0, 43);

// Background/Platform
noStroke();
fill(139, 139, 139);
image(moonBlock, 0, 300+150, 595/4, 100);
image(moonBlock, 149, 300+150, 595/4, 100);
image(moonBlock, 1492, 300+150, 595/4, 100);
image(moonBlock, 149
3, 300+150, 595/4, 100);

//Platform 1
image(moonBlock,b1X,b1Y,b1Height,b1Width);

if(x >= b1X-b1Width && x <= b1X+b1Width && y >= b1Y-b1Height/2 && y <= b1Y+b1Height/2) {
y = y ;
velocity = 0 ;
jumpCounter = 0 ;
fallingSpeed = 0 ;
}

// Jump Boundaries
fill(38,0,43);
rect(0, maxHeight, 595, 1)

//Pixel the Alien
//image(pixel, x, y, pixelWidth, pixelHeight);
player1();

//Movement
if (keyIsPressed) {
if (key === 'ArrowRight') {
x += 2;
lookingRight = true ;
} else {
lookingRight = false ;
}
}

if (keyIsPressed) {
if (key === 'ArrowLeft') {
x -= 2;
lookingLeft = true ;
} else {
lookingLeft = false ;
}
}

function gravity() {
if (y >= minHeight && jump == false) {
y = y;
jumpCounter = 0 ;
} else {
y = y + (direction * velocity);
}

``````if (jump == true) {
if (y <= maxHeight || jumpCounter >= jumpPower) {
if (y >= minHeight) {
y = minHeight ;
} else {
velocity = fallingSpeed;
}
} else {
velocity = -jumpPower ;
jumpCounter = jumpCounter-1 ;
}
} else {
velocity = fallingSpeed;
}``````

}

function player1() {

``````image(pixelIdle, x, y, pixelWidth, pixelHeight);

if (lookingRight == true) {
lookingLeft = false ;
step = step+1
}
else if (step == 0) {
image(pixelRight1, x, y, pixelWidth, pixelHeight);
}
else if (step == 1) {
image(pixelRight2, x, y, pixelWidth, pixelHeight);
step = 0 ;
}

if (lookingRight == false && lookingLeft == false) {
image(pixelIdle,x,y,pixelWidth,pixelHeight)
}``````

}

if (keyIsPressed) {
if (key === 'ArrowUp') {
jump = true;
} else {
jump = false
}
}

}

Many thanks,

• Umar Qureshi