#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

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

edited March 2016

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>
<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>
<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;
}
``````