I'm trying to make my gif "jump", while also coming back to rest at a y value of 730. No more, no less. It would work to the same extent as the Dinosaur game, when the wifi is out. I'd like to include a gravity function as well. I'm not sure how to do that. (I'm VERY new to coding.) Any tips?
[Code is below]
let img; //background
var bgImg; //also the background
var x1 = 0;
var x2;
var scrollSpeed = 4; //how fast background is
let bing; //for music
let cat = { //coordinates for catbus
x:70,
y:730
}
var mode; //determines whether the game has started
function preload() {
bgImg = loadImage("backgwound.png"); //importing background
bing=loadSound('catbus theme song.mp3'); //importing music
}
function setup() {
createCanvas(1000, 1000); //canvas size
img = loadImage("backgwound.png"); //background in
x2 = width;
bing.loop() //loops the music
catGif=createImg("catgif.gif") //creates catbus
catGif. position(cat.x, cat.y) //creates position
catGif. size(270,100) //creates how big
mode = 0; //game start
textSize(50); //text size
}
function draw() {
let time = frameCount; //start background loop
image(img, 0 - time, 0);
image(bgImg, x1, 2, width, height);
image(bgImg, x2, 2, width, height);
x1 -= scrollSpeed;
x2 -= scrollSpeed;
if (x1 <= -width) {
x1 = width;
}
if (x2 <= -width) {
x2 = width;
} //end background loop
fill("white") //text colour
if(mode==0){
text('Press SPACE to start the game.',150,500); //what text to type
}
if(mode==0){
text('CATBUS BIZZARE ADVENTURE',135,450) //what text to type
}
}
function pickRandom() {
x = random(20, width - 20);
}
I've updated your p5.js sketch to point you in the right direction.
I've introduced a few variables that are defined at the top of your code before setup:
let gravity = 0.1;
let velocity = 0;
let upForce = 3;
let startY = 730;
let startX = 70;
...
You can tweak these numbers to fit your game. But the basic premise here is that each frame we add the velocity to the cat.y and the velocity is incremented each frame by the gravity:
cat.y = cat.y + velocity;
velocity = velocity + gravity;
However, there's a caveat, we don't want to add the velocity to the cat.y if the cat is at its startY, as startY is the grass:
if (cat.y > startY) {
velocity = 0;
cat.y = startY;
}
catGif.position(cat.x, cat.y); // reposition the gif
And lastly, when you hit spacebar, jump! (And get rid of the starting screen)
function keyPressed() {
if (keyCode === 32) {
//spacebar
mode = 1;
velocity -= upForce;
}
}