# How to have my image move horizontally?

**URL:** <https://discourse.processing.org/t/how-to-have-my-image-move-horizontally/6321>\
**Category:** Coding Questions\
**Created:** [December 5, 2018, 8:40am UTC](https://discourse.processing.org/t/how-to-have-my-image-move-horizontally/6321 "2018-12-05T08:40:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![CyanNi](https://avatars.discourse-cdn.com/v4/letter/c/34f0e0/32.png) [@CyanNi](https://discourse.processing.org/u/CyanNi)\
**Post date:** [December 5, 2018, 8:40am UTC](https://discourse.processing.org/t/how-to-have-my-image-move-horizontally/6321/1 "2018-12-05T08:40:51Z")

</div>

I’m working on my game that’s based on the chrome dino run game that plays whenever you’re offline.  
However, I’m facing a problem, I can’t get my image to move the way the dino does in the game.  
I’m sorry for bothering you, but help or links to a useful resourceful would be nice.  
My Code:

```auto
float bunHeight = 250, bunPosX = 40;
float speed = 4;
PImage bun;
PImage bg;
boolean jump=false;
int score = 0;
int highscore = 0;

void setup() {
  size(500, 500);
  //protag
  bun = loadImage("Bun.png");
  //bg
  bg = loadImage("background.png");
  println(" use UP ARROW key ");
}
void draw() {
  ///background?
  background(bg);
  fill(255);
  rect(250, 245, 50, 50);
  //draw the bun/protag
  image(bun, bunPosX, 10+bunHeight);
  //High Score Text
  fill(255, 0, 0);
  textSize(20);
  text("High Score: " + highscore, 70, 20); //display high score in 
  //enables jump
  if (jump) {
    bunHeight -= speed;
    if (bunHeight < 150) speed = -speed;
    if (bunHeight > height/2) {
      speed = -speed;
      jump = false;
    }
  }
}
//Enables Jump by pressing up
void keyReleased() { 
  if ( keyCode == UP) 
    jump = true;
}

```

![Bun](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7c6be4a51b0087c2c1b35d7d218d09afef54c07f.png)  
Here’s bun image

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [December 5, 2018, 8:56am UTC](https://discourse.processing.org/t/how-to-have-my-image-move-horizontally/6321/2 "2018-12-05T08:56:27Z")

</div>

The dinosaur doesn’t move horizontally! Instead, obstacles move horizontally towards the dinosaur!

Keep the dino in place, and change the X position of the obstacles you are drawing…

---

<div class="post-metadata">

**Author:** ![CyanNi](https://avatars.discourse-cdn.com/v4/letter/c/34f0e0/32.png) [@CyanNi](https://discourse.processing.org/u/CyanNi)\
**Post date:** [December 5, 2018, 9:05am UTC](https://discourse.processing.org/t/how-to-have-my-image-move-horizontally/6321/3 "2018-12-05T09:05:28Z")

</div>

Oh.  
OH!  
OHHH!  
I understand a bit  
Can you explain a bit more, please?

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [December 5, 2018, 10:00am UTC](https://discourse.processing.org/t/how-to-have-my-image-move-horizontally/6321/4 "2018-12-05T10:00:16Z")

</div>

Example:

```auto
class Foe {
   float x, y, w, h;
   Foe(){
     x = width;
     y = 300;
     w = 40;
     h = 40;
   }
   void draw(){
     x-=10;
     if( x < -w ){
       x = width;
     }
     fill(255,0,0);
     noStroke();
     rect(x,y-h,w, h); 
   }
}
     

float x=100, y=300, dy=0, ddy=0.32, w=40, h=100;

Foe foe;

void setup(){
  size(800,400);
  foe = new Foe();
}

void draw(){
  background(0);
  dy+=ddy;
  y+=dy;
  if( y >= 300 ){
    dy = 0;
    y = 300;
  }
  fill(0,200,0);
  noStroke();
  rect(x-w/2, y-h, w, h);
  stroke(255);
  line(0,300,width,300);
  foe.draw();
}

void mousePressed(){
  if( y == 300 ){
    dy = -10;
  }
}

```

This might be too much help.