# Game with arrow key
**URL:** https://discourse.processing.org/t/game-with-arrow-key/26314
**Category:** Coding Questions
**Created:** [December 16, 2020, 9:00pm UTC](https://discourse.processing.org/t/game-with-arrow-key/26314 "2020-12-16T21:00:28Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@Jayda](https://discourse.processing.org/u/Jayda)
#### Post date: [December 16, 2020, 9:00pm UTC](https://discourse.processing.org/t/game-with-arrow-key/26314/1 "2020-12-16T21:00:28Z")
Here is three things I want to do
1. Keep the red ball remain in the canvas when it meets the boundary.
(the whole interface disappears when it meets the boundary)
2. Create a random “Green” target, and the goal is to use the red ball to hit this
target, every successful hit will score1-point.
3. Re-create a new random “Yellow Target” when the last one is hit.
```auto
function setup() {
createCanvas(300, 400);
}
let x = 150;
let y = 150;
let score = 0;
function draw() {
if (keyIsDown(LEFT_ARROW)) {
x -= 5;
}
if (keyIsDown(RIGHT_ARROW)) {
x += 5;
}
if (keyIsDown(UP_ARROW)) {
y -= 5;
}
if (keyIsDown(DOWN_ARROW)) {
y += 5;
}
background(220);
fill(255, 0, 0);
if (x <= width-20 && x >= 20) {
ellipse(x, y, 30);
fill(0, 255, 0);
ellipse(20, 30, 30);
fill(0);
text(score, 10, 20);
}
}
```
I have no idea how to do them…
---
### Author:  [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [December 17, 2020, 8:21am UTC](https://discourse.processing.org/t/game-with-arrow-key/26314/2 "2020-12-17T08:21:23Z")
> [@Jayda](#):
>
> ```auto
> function setup() {
> createCanvas(300, 400);
> }
>
> let x = 150;
> let y = 150;
> let score = 0;
>
> function draw() {
> if (keyIsDown(LEFT_ARROW)) {
> x -= 5;
> }
> if (keyIsDown(RIGHT_ARROW)) {
> x += 5;
> }
> if (keyIsDown(UP_ARROW)) {
> y -= 5;
> }
> if (keyIsDown(DOWN_ARROW)) {
> y += 5;
> }
>
> background(220);
> fill(255, 0, 0);
> if (x <= width-20 && x >= 20) {
> ellipse(x, y, 30);
>
> fill(0, 255, 0);
> ellipse(20, 30, 30);
> fill(0);
> text(score, 10, 20);
> }
> }
>
> ```
here is my prototype. The movement is still buggy (i added movement and staying withing borders)
```auto
float x = 300, y = 300, xs = 0, ys = 0, friction = 0.9, r = 10, acc = 0.3;
boolean accelerate[] = new boolean[4];
void setup() {
size(600,600);
}
void draw() {
background(0);
ellipse(x,y,r*2,r*2);
x += xs;
y += ys;
println(x,y,xs,ys);
xs *= friction;
ys *= friction;
if(x + r > width) {
xs = 0;
x = width-r;
} else if(x - r < 0) {
xs = 0;
x = r;
}
if(y + r > height) {
ys = 0;
y = height-r;
} else if(y - r < 0) {
ys = 0;
y = r;
}
if(keyPressed && keyCode == LEFT) {
xs -= acc;
ys = 0;
}
if (keyPressed && keyCode == RIGHT) {
xs += acc;
ys = 0;
}
if (keyPressed && keyCode == UP) {
ys -= acc;
xs = 0;
}
if (keyPressed && keyCode == DOWN) {
ys += acc;
xs = 0;
}
}
//void keyPressed() {
// if(keyCode == LEFT) {
// accelerate[0] = true;
// }
// if (keyCode == RIGHT) {
// accelerate[0] = true;
// }
// if (keyCode == UP) {
// accelerate[0] = true;
// }
// if (keyCode == DOWN) {
// accelerate[0] = true;
// }
//}
```
---
### Author:  [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [December 17, 2020, 8:26am UTC](https://discourse.processing.org/t/game-with-arrow-key/26314/3 "2020-12-17T08:26:10Z")
added the circles and score varriable
```auto
float x = 300, y = 300, xs = 0, ys = 0, friction = 0.9, r = 20, acc = 0.3, tx = 500, ty = 300, tr = 10;
int score = 0;
boolean accelerate[] = new boolean[4];
void setup() {
size(600,600);
}
void draw() {
background(0);
fill(255);
ellipse(x,y,r*2,r*2);
x += xs;
y += ys;
println(x,y,xs,ys);
xs *= friction;
ys *= friction;
if(x + r > width) {
xs = 0;
x = width-r;
} else if(x - r < 0) {
xs = 0;
x = r;
}
if(y + r > height) {
ys = 0;
y = height-r;
} else if(y - r < 0) {
ys = 0;
y = r;
}
if(keyPressed && keyCode == LEFT) {
xs -= acc;
ys = 0;
}
if (keyPressed && keyCode == RIGHT) {
xs += acc;
ys = 0;
}
if (keyPressed && keyCode == UP) {
ys -= acc;
xs = 0;
}
if (keyPressed && keyCode == DOWN) {
ys += acc;
xs = 0;
}
fill(255,0,0);
circle(tx,ty,tr*2);
if(dist(x,y,tx,ty) < tr + r) {
tx = random(tr, width-tr);
ty = random(tr, height-tr);
score++;
}
}
```
edit: a bit better version:
```auto
float x = 300, y = 300, xs = 0, ys = 0, friction = 0.9, r = 20, acc = 0.6, tx = 500, ty = 300, tr = 10;
int score = 0;
boolean pressed[] = new boolean[4];
void setup() {
size(600,600);
}
void draw() {
background(0);
fill(255);
ellipse(x,y,r*2,r*2);
x += xs;
y += ys;
println(x,y,xs,ys);
xs *= friction;
ys *= friction;
if(x + r > width) {
xs = 0;
x = width-r;
} else if(x - r < 0) {
xs = 0;
x = r;
}
if(y + r > height) {
ys = 0;
y = height-r;
} else if(y - r < 0) {
ys = 0;
y = r;
}
if(pressed[2]) {
xs -= acc;
ys = 0;
}
if (pressed[3]) {
xs += acc;
ys = 0;
}
if (pressed[0]) {
ys -= acc;
xs = 0;
}
if (pressed[1]) {
ys += acc;
xs = 0;
}
fill(255,0,0);
circle(tx,ty,tr*2);
if(dist(x,y,tx,ty) < tr + r) {
tx = random(tr, width-tr);
ty = random(tr, height-tr);
score++;
}
}
void keyPressed() {
if(key == 'w') pressed[0] = true;
if(key == 's') pressed[1] = true;
if(key == 'a') pressed[2] = true;
if(key == 'd') pressed[3] = true;
}
void keyReleased() {
if(key == 'w') pressed[0] = false;
if(key == 's') pressed[1] = false;
if(key == 'a') pressed[2] = false;
if(key == 'd') pressed[3] = false;
}
```
---
### Author:  [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [December 17, 2020, 9:13am UTC](https://discourse.processing.org/t/game-with-arrow-key/26314/4 "2020-12-17T09:13:38Z")
here is the final code!
```auto
float x = 300, y = 300, xs = 0, ys = 0, friction = 0.9, r = 20, acc = 1, tx = 500, ty = 300, tr = 10;
int score = 0;
boolean pressed[] = new boolean[4];
void setup() {
size(600,600);
}
void draw() {
background(0);
fill(255);
ellipse(x,y,r*2,r*2);
x += xs;
y += ys;
xs *= friction;
ys *= friction;
if(x + r > width) {
xs = 0;
x = width-r;
} else if(x - r < 0) {
xs = 0;
x = r;
}
if(y + r > height) {
ys = 0;
y = height-r;
} else if(y - r < 0) {
ys = 0;
y = r;
}
if(pressed[2]) {
xs -= acc + abs(ys);
ys = 0;
}
if (pressed[3]) {
xs += acc + abs(ys);
ys = 0;
}
if (pressed[0]) {
ys -= acc + abs(xs);
xs = 0;
}
if (pressed[1]) {
ys += acc + abs(xs);
xs = 0;
}
fill(255,0,0);
circle(tx,ty,tr*2);
if(dist(x,y,tx,ty) < tr + r) {
tx = random(tr, width-tr);
ty = random(tr, height-tr);
score++;
}
}
void keyPressed() {
if(key == 'w') pressed[0] = true;
if(key == 's') pressed[1] = true;
if(key == 'a') pressed[2] = true;
if(key == 'd') pressed[3] = true;
}
void keyReleased() {
if(key == 'w') pressed[0] = false;
if(key == 's') pressed[1] = false;
if(key == 'a') pressed[2] = false;
if(key == 'd') pressed[3] = false;
}
```
---
### Author:  [@Jayda](https://discourse.processing.org/u/Jayda)
#### Post date: [December 17, 2020, 3:23pm UTC](https://discourse.processing.org/t/game-with-arrow-key/26314/5 "2020-12-17T15:23:18Z")
Wow is so good and complicated
---
### Author:  [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [December 17, 2020, 3:27pm UTC](https://discourse.processing.org/t/game-with-arrow-key/26314/6 "2020-12-17T15:27:19Z")
Platformers are difficult. I suggest you try something easier.