Greetings Processing forum,
I am trying to make a simple game to dodge moving sprites in a group using the p5.js and the p5.play libraries. However, I have come upon an issue where now I want to detect if there is a collision with the objects that need to be dodged and the sprite itself. The restriction of my game states that I must use emojis in order to design and develop my game. In this case, I have sprites in a group that are of different scales with an image applied to them. Without a collision the speed of each sprite in the group is constant and does not change, this is defined by a variable named blockSpeed1. When I apply a collision with this group to the playable character the speed subsequently becomes affected by the size of each sprite (The bigger the sprite the faster the object travels). I would like them to move at a constant speed regardless of the gravity. However I do think it looks cooler when they’re moving at different speeds. But because I have the sprites in a group their position gets reset too quickly.
I have tried to condense my code as much as possible, however here is a repl.it link to my entire code in case it is of some use. https://repl.it/@DavidJonesADA/HotDoubleProtools Thanks for any help in advance!
In the preload function I have loaded the images I am using.
function preload() {
rocketShip = loadImage("assets/rocketship.png")
orangeSquare = loadImage("assets/orange-square.png")
comet = loadImage("assets/comet.png")
}
In the setup function I have declared the values for player 1. Created the canvas and called the function where the asteroids are.
function setup() {
createCanvas(900, 750);
asteroids1 = new Group();
blocks()
//player1
player1 = createSprite(width, height / 2);
player1.addImage(rocketShip)
player1.position.x = 225;
player1.position.y = player_positionY;
player1.rotation = -45
player1.scale = 0.35
}
In the draw function I have called the other functions im using, and set the collision for player1 and the sprites. Displacing, bouncing and overlapping have the same effect. Removing the collision all together gets rid of the different speeds.
function draw() {
r = Math.floor((Math.random() * 6) + 0); //gets a random number from 0 to 6 to remove from the array
player1.collide(asteroids1)
background(28)
asteroidMovement()
drawSprites(); //draws all the sprites
blocksExisting++
}
This is my function that creates the sprites moving downwards in the group.
function blocks() {
if (blocksExisting === 0) {
for (var i = 0; i < 6; i++) {
var c = createSprite((i + 25 + i * 75), (random(0, -75)));
c.addImage(comet); //here i have added an image
c.scale = (random(0.1 , 0.25)) //here is where i have set the sprite to have a random scale. Changing this to a constant number instead of a random one will stop the gravity differences.
asteroids1.add(c);
asteroids1.mass = 1;
}
}
}
This is the function that makes the sprites in the group move downwards.
function asteroidMovement(c) {
//asteroid 1
for (var i = 0; i < asteroids1.length; i++) {
asteroids1[i].position.y += asteroids1[i].width * blockSpeed1;
if (asteroids1[i].position.y > 900) {
asteroids1.removeSprites()
blocksExisting = 0
blocks()
blockSpeed = 0
}
}
if (asteroids1.length == 6) {
asteroids1[r].remove(c);
console.log(r)
}