How can I make the y coordinate increase/decrease without still rotating?

javamacc

I am trying to recreate the game Flappy Birds (happily named Flappy Ducks). When the "duck" is flying upwards or diving, I made the duck a rotated picture of my original "duck.draw". However, when I press "space" the duck moves upward in a circular fashion (the way I rotated it). How can I make the "duck" go straight up and down?

Here's my code:

var duck;
var play = false;
var space = 32;
var enter = 13;
var checked = false;

function setup() {
  var myCanvas = createCanvas(500, 600);
  myCanvas.parent("duckGame");

  duck = new Duck(400, 500);
}

function draw() {
  background(146, 211, 232);
  ground();

  // moving grass
  for (var i = 0; i < grassXs.length; i++) {
    stroke(21, 74, 0);
    strokeWeight(3);
    line(grassXs[i], 553, grassXs[i] - 5, 568);
    grassXs[i] -= 3;
    if (grassXs[i] <= -20) {
      grassXs[i] = width;
    }
  }
  strokeWeight(1);
  noStroke();
  /////////////////////////////////////////////////

  // START THE GAME AND MAKE DUCK MOVE UP AND DOWN
  if(!checked) {
    whenToFly();
  }

  if(keyIsPressed && keyCode == enter) {
    checked = true;
  }

  if(keyIsPressed && keyCode == space && checked == true) {
    play = true;
    duck.fly();
  } else if(checked == true){
    play = true;
    duck.dive();
  }
  ///////////////////////////////////////////////////////

}

// grass
var grassXs = [];
for (var i = 0; i < 26; i++) { 
  grassXs.push(i*20);
}

function ground() {
  strokeWeight(3);
  fill(247, 217, 146);
  rect(0, 550, width, 50);
  strokeWeight(1);
  fill(150, 250, 110);
  rect(0, 553, width, 15);
}
////////////////////////////////////////////////////////

function whenToFly() {
  if(play == false) {
    duck.draw();
  }
}
////////////////////////////////////////////////////////

function Duck(x, y) {
  this.x = x;
  this.y = y;

  this.draw = function() {
    var yellow = color(255, 255, 0);
    var gray = color(230, 230, 230);
    var orange = color(230, 46, 0);
    var dandelion = color(255, 191, 0);

    push();
    scale(0.6);

    // row 1
    noStroke();
    fill(0);
    for(var a = 0; a < 6; a++) {
      rect(a*5 + this.x, this.y, 5, 5);
    }
    // row 2
    for(var b = 0; b < 9; b++) {
      noStroke();
      if(b > 7) {
        fill(0);
      }
      else if(b > 5) {
        fill(255);
      }
      else if(b > 4) {
        fill(0);
      }
      else if(b > 1) {
        fill(255);
      }
      else {
        fill(0);
      }
      rect(b*5 + (this.x - 10), this.y + 5, 5, 5);
    }
    // row 3
    for(var c = 0; c < 11; c++) {
      noStroke();
      if(c > 9) {
        fill(0);
      }
      else if(c > 5) {
        fill(255);
      }
      else if(c > 4) {
        fill(0);
      }
      else if(c > 2) {
        fill(yellow); // yellow
      }
      else if(c > 0) {
        fill(255);
      }
      else {
        fill(0);
      }
      rect(c*5 + (this.x - 15), this.y + 10, 5, 5);
    }
    // row 4
    for(var d = 0; d < 14; d++) {
      noStroke();
      if(d > 12) {
        fill(0);
      }
      else if(d > 11) {
        fill(255);
      }
      else if(d > 10) {
        fill(0);
      }
      else if(d > 8) {
        fill(255);
      }
      else if(d > 7) {
        fill(gray); // gray
      }
      else if(d > 6) {
        fill(0);
      }
      else if(d > 3) {
        fill(yellow);
      }
      else {
        fill(0);
      }
      rect(d*5 + (this.x - 25), this.y + 15, 5, 5);
    }
    // row 5
    for(var e = 0; e < 15; e++) {
      noStroke();
      if(e > 13) {
        fill(0);
      }
      else if(e > 12) {
        fill(255);
      }
      else if(e > 11) {
        fill(0);
      }
      else if(e > 9) {
        fill(255);
      }
      else if(e > 8) {
        fill(gray);
      }
      else if(e > 7) {
        fill(0);
      }
      else if(e > 5) {
        fill(yellow);
      }
      else if(e > 4) {
        fill(0);
      }
      else if(e > 0) {
        fill(255);
      }
      else {
        fill(0);
      }
      rect(e*5 + (this.x - 30), this.y + 20, 5, 5);
    }
    // row 6
    for(var f = 0; f < 15; f++) {
      noStroke();
      if(f > 13) {
        fill(0);
      }
      else if(f > 10) {
        fill(255);
      }
      else if(f > 9) {
        fill(gray);
      }
      else if(f > 8) {
        fill(0);
      }
      else if(f > 6) {
        fill(yellow);
      }
      else if(f > 5) {
        fill(0);
      }
      else if(f > 0) {
        fill(255);
      }
      else {
        fill(0);
      }
      rect(f*5 + (this.x - 30), this.y + 25, 5, 5);
    }
    // row 7
    for(var g = 0; g < 16; g++) {
      noStroke();
      if(g > 9) {
        fill(0);
      }
      else if(g > 6) {
        fill(yellow);
      }
      else if(g > 5) {
        fill(0);
      }
      else if(g > 4) {
        fill(yellow);
      }
      else if(g > 1) {
        fill(255);
      }
      else if(g > 0) {
        fill(yellow);
      }
      else {
        fill(0);
      }
      rect(g*5 + (this.x - 30), this.y + 30, 5, 5);
    }
    // row 8
    for(var h = 0; h < 16; h++) {
      noStroke();
      if(h > 14) {
        fill(0);
      }
      else if(h > 8) {
        fill(orange);
      }
      else if(h > 7) {
        fill(0);
      }
      else if(h > 4) {
        fill(yellow);
      }
      else if(h > 3) {
        fill(0);
      }
      else if(h > 0) {
        fill(yellow);
      }
      else {
        fill(0);
      }
      rect(h*5 + (this.x - 25), this.y + 35, 5, 5);
    }
    // row 9
    for(var i = 0; i < 14; i++) {
      noStroke();
      if(i > 7) {
        fill(0);
      }
      else if(i > 6) {
        fill(orange);
      }
      else if(i > 5) {
        fill(0);
      }
      else if(i > 2) {
        fill(dandelion);
      }
      else {
        fill(0);
      }
      rect(i*5 + (this.x - 20), this.y + 40, 5, 5);
    }
    // row 10
    for(var j = 0; j < 14; j++) {
      noStroke();
      if(j > 12) {
        fill(0);
      }
      else if(j > 7) {
        fill(orange);
      }
      else if(j > 6) {
        fill(0);
      }
      else if(j > 0) {
        fill(dandelion);
      }
      else {
        fill(0);
      }
      rect(j*5 + (this.x - 20), this.y + 45, 5, 5);
    }
    // row 11
    for(var k = 0; k < 12; k++) {
      noStroke();
      if(k > 6) {
        fill(0);
      }
      else if(k > 1) {
        fill(dandelion);
      }
      else {
        fill(0);
      }
      rect(k*5 + (this.x - 15), this.y + 50, 5, 5);
    }
    // row 12
    for(var l = 0; l < 5; l++) {
      noStroke();
      fill(0);
      rect(l*5 + (this.x - 5), this.y + 55, 5, 5);
    }
    pop();
  }

  this.fly = function() {
    push();
    rotate(100);
    translate(-190, 80);
    this.draw();
    pop();
    this.y -= 5;
  }

  this.dive = function() {
    push();
    rotate(-100);
    translate(140, -160);
    this.draw();
    pop();
    this.y += 5;
  }
}

If needed, here is my HTML and CSS code too:

(HTML)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Flappy Ducks</title>
    <script src="libraries/p5.js" type="text/javascript"></script>

    <script src="libraries/p5.dom.js" type="text/javascript"></script>
    <script src="libraries/p5.sound.js" type="text/javascript"></script>

    <script src="sketch.js" type="text/javascript"></script>

    <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <p id="title">Flappy Ducks</p>
    <div id="duckGame"></div>
  </body>
</html>

(CSS)

body {
  background: black;
}

#title {
  font-size: 32px;
  color: white;
  text-align: center;
}

#duckGame {
  position: relative;
  left: 450px;
  margin-bottom: 20px;
}

GoToLoop

My advise: Avoid scale(), rotate() and any such transformations. :-B
It makes collision checks much more math intensive if you know what I mean. :(|)

BtW, I've got a Beaver game I've adapted from Khan Academy. I find it's worth a look: O:-)
https://forum.Processing.org/two/discussion/8997/hoppy-beaver

You can play my Pjs (JS Mode) version here:
http://studio.ProcessingTogether.com/sp/pad/export/ro.9bTfM49wCIJza

And the original Khan's spin-off Pjs below:
https://www.KhanAcademy.org/computing/computer-programming/programming-games-visualizations/side-scroller/a/scoring-and-winning

TfGuy44

You're drawing the duck in a weird way. Why not just have an image and draw an image?

Anyway, I suspect the issue you have is that you are calling rotate() before you call translate(). Try swapping those two functions around and see how that changes things.