d2jsp
Log InRegister
d2jsp Forums > Off-Topic > Computers & IT > Programming & Development > Iso Processing Javascript Help Or Advice Asap > Beginner Stuff
12Next
Add Reply New Topic New Poll
Member
Posts: 16,404
Joined: Mar 28 2009
Gold: 7.69
Oct 11 2016 10:56pm
Assignment is due tomorrow afternoon. What I need to do is make it so the 2 animations are not aloud to go past the edges of the screen. I'm not necessarily asking for the answer but just need guidance in the right direction.

Would an 'if' statement be the easiest way to keep the animations from going past the edges? And would I put it inside the keyPressed or draw function?

Heres the code: (forgive me im noob)

Code
//superhero variables
var xPos = 250;
var yPos = 200;
var x_one = 210;
var y_one = 230;
var x_two = 250;
var y_two = 200;
var x_three = 290;
var y_three = 230;
//villain variables
var x_eartwo = 51;
var x_ear = 17;
var x_mouthtwo = 47;
var x_mouth = 21;
var x_eyetwo = 42;
var x_eye = 29;
var x_Three = 34;
var x_Two = 66;
var x_One = 5;
var x = 25;
var y = 176;
var ytwo = 155;
var ythree = 133;
var yfour = 149;
var yfive = 147;
var ysix = 165;
var ysev = 174;


var superhero = function() {

background(0, 128, 255);

//grass
noStroke();
fill(25, 204, 61);
rect(0, 300, 410, 300);

//cape
fill(255, 0, 0);
triangle(x_one, y_one, x_two, y_two, x_three, y_three);

//ghost hero
fill(20, 18, 18);
ellipse(xPos, yPos, 30, 30);




};
//////////villain/////////////

var villain = function() {


//appendage
fill(255, 0, 0);
stroke(0, 89, 255);
rect(x,ysev,18,85);

//head
triangle(x_One,y,x_Two,y,x_Three,ythree);

//eyes
stroke(13, 28, 4);
fill(145, 127, 47);
ellipse(x_eye,ytwo,7,7);
ellipse(x_eyetwo,ytwo,7,7);

//mouth
noFill();
line(x_mouth,ysix,x_mouthtwo,ysix);

//ears
fill(179, 16, 16);
ellipse(x_ear,yfour,7,12);
ellipse(x_eartwo,yfive,7,12);

};

keyPressed = function() {

//superhero//

if (keyCode === LEFT) {
xPos = xPos - 10;
x_one = x_one - 10;
x_two = x_two - 10;
x_three = x_three - 10;
}

else if (keyCode === RIGHT) {
xPos = xPos + 10;
x_one = x_one + 10;
x_two = x_two + 10;
x_three = x_three + 10;
}

else if (keyCode === UP) {
yPos = yPos - 10;
y_one = y_one - 10;
y_two = y_two - 10;
y_three = y_three - 10;
}
else if (keyCode === DOWN) {
yPos = yPos + 10;
y_one = y_one + 10;
y_two = y_two + 10;
y_three = y_three + 10;
}

//villain//

else if (keyCode === 65) { //move left. Letter "A"
x = x - 10;
x_One = x_One - 10;
x_Two = x_Two - 10;
x_Three = x_Three - 10;
x_eye = x_eye - 10;
x_eyetwo = x_eyetwo - 10;
x_mouth = x_mouth - 10;
x_mouthtwo = x_mouthtwo - 10;
x_ear = x_ear - 10;
x_eartwo = x_eartwo - 10;
}
else if (keyCode === 68) { //move right. Letter "D"
x = x + 10;
x_One = x_One + 10;
x_Two = x_Two + 10;
x_Three = x_Three + 10;
x_eye = x_eye + 10;
x_eyetwo = x_eyetwo + 10;
x_mouth = x_mouth + 10;
x_mouthtwo = x_mouthtwo + 10;
x_ear = x_ear + 10;
x_eartwo = x_eartwo + 10;
}
else if (keyCode === 83) { //move down. Letter "S"
ysev = ysev + 10;
y = y + 10;
ythree = ythree + 10;
ytwo = ytwo + 10;
ysix = ysix + 10;
yfour = yfour + 10;
yfive = yfive + 10;
}
else if (keyCode === 87) { //move up. Letter "W"
ysev = ysev - 10;
y = y - 10;
ythree = ythree - 10;
ytwo = ytwo - 10;
ysix = ysix - 10;
yfour = yfour - 10;
yfive = yfive - 10;
}

};





draw = function() {
superhero();
villain();

};


This post was edited by Shakti on Oct 11 2016 11:24pm
Member
Posts: 3,939
Joined: Feb 1 2013
Gold: 2,749.09
Warn: 20%
Oct 11 2016 11:32pm
this is garbage
Member
Posts: 16,404
Joined: Mar 28 2009
Gold: 7.69
Oct 11 2016 11:42pm
Quote (boxboxbox @ Oct 12 2016 12:32am)
this is garbage


lol yeah. I said im a noob -.-

can you help or nah
Member
Posts: 32,925
Joined: Jul 23 2006
Gold: 3,804.50
Oct 12 2016 02:03pm
Do you know the coordinates for the edge of the screen? In your movement functions, don't do anything if it'll cause you to go beyond
Member
Posts: 16,404
Joined: Mar 28 2009
Gold: 7.69
Oct 12 2016 02:22pm
Quote (carteblanche @ Oct 12 2016 03:03pm)
Do you know the coordinates for the edge of the screen? In your movement functions, don't do anything if it'll cause you to go beyond

(0,0) to (400, 400)

Yeah, im trying to think about how i would say "if *variable* is >= 380 then stop"

This post was edited by Shakti on Oct 12 2016 02:23pm
Member
Posts: 32,925
Joined: Jul 23 2006
Gold: 3,804.50
Oct 12 2016 02:24pm
Quote (Shakti @ Oct 12 2016 04:22pm)
(0,0) to (400, 400)


so check if the new position would be out of bounds. if so, do nothing

eg:

Code
if (keyCode === LEFT) {
if (xPos - 10 < 0) { do nothing }
Member
Posts: 16,404
Joined: Mar 28 2009
Gold: 7.69
Oct 12 2016 02:37pm
Quote (carteblanche @ Oct 12 2016 03:24pm)
so check if the new position would be out of bounds. if so, do nothing

eg:

Code
if (keyCode === LEFT) {
if (xPos - 10 < 0) { do nothing }

Awesome i understand what youre saying.

But the { do nothing } or { dont go past this point } is where im a little lost


Code
if (keyCode === LEFT) {
if (xPos >= 380) {
//do nothing//
}
xPos = xPos - 10;
x_one = x_one - 10;
x_two = x_two - 10;
x_three = x_three - 10;
}

Member
Posts: 32,925
Joined: Jul 23 2006
Gold: 3,804.50
Oct 12 2016 02:41pm
Quote (Shakti @ Oct 12 2016 04:37pm)
Awesome i understand what youre saying.

But the { do nothing } or { dont go past this point } is where im a little lost


Code
if (keyCode === LEFT) {
if (xPos >= 380) {
//do nothing//
}
xPos = xPos - 10;
x_one = x_one - 10;
x_two = x_two - 10;
x_three = x_three - 10;
}


your function's job is just to move the character. since you determined you dont wanna move, you can just `return`.
Member
Posts: 16,404
Joined: Mar 28 2009
Gold: 7.69
Oct 12 2016 02:56pm
Quote (carteblanche @ Oct 12 2016 03:41pm)
your function's job is just to move the character. since you determined you dont wanna move, you can just `return`.


GOT IT! Thanks !!

Code
keyPressed = function() {

//superhero//

if (keyCode === LEFT) {
if (xPos - 10 < 0) { // dont allow go past left side
return xPos;
}
xPos = xPos - 10;
x_one = x_one - 10;
x_two = x_two - 10;
x_three = x_three - 10;

}

else if (keyCode === RIGHT) {
if (xPos + 10 >= 380) { // dont allow go past left side
return xPos;
}
xPos = xPos + 10;
x_one = x_one + 10;
x_two = x_two + 10;
x_three = x_three + 10;
}

else if (keyCode === UP) {
if (yPos - 10 <= 5) { // dont allow to go past top side
return yPos;
}
yPos = yPos - 10;
y_one = y_one - 10;
y_two = y_two - 10;
y_three = y_three - 10;
}
else if (keyCode === DOWN) {
if (yPos + 10 >= 380){ // dont allow to go past bottom side
return yPos;
}
yPos = yPos + 10;
y_one = y_one + 10;
y_two = y_two + 10;
y_three = y_three + 10;
}

//villain//

else if (keyCode === 65) { //move left. Letter "A"
if (x - 10 <= 2) { // dont allow to go past left side
return x;
}
x = x - 10;
x_One = x_One - 10;
x_Two = x_Two - 10;
x_Three = x_Three - 10;
x_eye = x_eye - 10;
x_eyetwo = x_eyetwo - 10;
x_mouth = x_mouth - 10;
x_mouthtwo = x_mouthtwo - 10;
x_ear = x_ear - 10;
x_eartwo = x_eartwo - 10;
}
else if (keyCode === 68) { //move right. Letter "D"
if (x + 10 >= 380) { // dont allow to go past left side
return x;
}
x = x + 10;
x_One = x_One + 10;
x_Two = x_Two + 10;
x_Three = x_Three + 10;
x_eye = x_eye + 10;
x_eyetwo = x_eyetwo + 10;
x_mouth = x_mouth + 10;
x_mouthtwo = x_mouthtwo + 10;
x_ear = x_ear + 10;
x_eartwo = x_eartwo + 10;
}
else if (keyCode === 83) { //move down. Letter "S"
if (ysev + 10 >= 320) { // dont allow to go past bottom side
return ysev;
}
ysev = ysev + 10;
y = y + 10;
ythree = ythree + 10;
ytwo = ytwo + 10;
ysix = ysix + 10;
yfour = yfour + 10;
yfive = yfive + 10;
}
else if (keyCode === 87) { //move up. Letter "W"
if (ysev - 10 <= 35) { // dont allow to go past top side
return ysev;
}
ysev = ysev - 10;
y = y - 10;
ythree = ythree - 10;
ytwo = ytwo - 10;
ysix = ysix - 10;
yfour = yfour - 10;
yfive = yfive - 10;
}


};
Member
Posts: 23,862
Joined: Aug 16 2006
Gold: 20.00
Oct 12 2016 04:50pm
Quote (boxboxbox @ Oct 12 2016 12:32am)
this is garbage


don't pretend you write anything cleaner you pleb
Go Back To Programming & Development Topic List
12Next
Add Reply New Topic New Poll