Help with a computer science 10 "Red Square" assignment

I have to create a game similar to the game in the link provided below.

http://www.hypedup.co.uk/games/redsquare.html

I am only in Grade Ten, so it doesn’t need to be fancy or with any hard code. The Marking rubric is below:

Base Level Skills

Using int, float and String variables

Drawing Rectangles and Ellipses

Using fill, stroke, strokeWeight

Writing Text

Using mouseX/mouseY or the keyPress for movement

If / Else If / Else Statements

Advanced Skills

Troubleshooting common errors

Searching the Internet to find new skills/code

Use commenting to organize and leave instructions for your program

If anyone has or could help me make the game, it would be very appreciated.
(If needed i can put the small amounts of code i have right now into the forum)

We are here to help you if you have questions. But we also encourage learning and thus can only provide you with some hints and answers to questions, but can’t make your homework for you. Thus, if you have a specific question to a problem you can’t solve, we will try to help you as much as we can, but we can’t just give you a finished game :sweat_smile:.

1 Like

Ok, I understand lol.

This is the code i have so far:

float speedx = 5;
float speedy = 5;
float y = 100;
float x = 400;

void setup() {
  size(800,800);
  rectMode(CENTER);
}


void draw(){
 background(#080000);
  rect(mouseX,mouseY,50,50);

//First Shape Moves Around the Screen.

y = y + speedy;
  x = x + speedx;
  if ((x > width - 50) || (x < 0)){
  speedx = speedx * -1; 
  }
 
  else if ((y > height - 5) || (y < 0)) {
    speedy = speedy * -1;
  }


rect(x,y,100,150);
 }

Basically what I need help with is starting to get 4 other shapes moving around the screen and them to speed up every certain amount of seconds. I just have no idea for the other shapes coordinates or things to get them moving as well.

Well, did you already take on Classes and how to create them in you class(school class)?
Anyway, if you did, i would suggest you to create a Class for your Enemies and maybe one for you Player. If not, you’ll have to do the same as you did 4 times basically. As for the increase in speed every 5 seconds, you’ll have to make use of either millis() or guess it from the frameRate, depending on if you already had this in school.

we have not learned any of this in my CS1 class yet.

Well, then you’ll have to reside to the basics… Lets start with the other 3 enemies. The speedx and speedy already can set the speed for all of them, so they don’t need to be changed for each enemy. But we need new x and y positions for the other 3 Enemies, so you’ll have to add another 3 like x1, x2, x3 and same for y. best would be to have the one you already got as x1 and go to x4, same for y.
Then we need to add the speedx and speedy to all enemies, and check for all enemies wether or not they already reached a border. And then just draw them.
Did you already learn about frameCount?

Correction: Since you are tasked to search the internet for new skills, i’ll just show you how millis() works.

millis() : You can invoke millis() inside your sketch, which will return an integer. The number represents the milliseconds that have passes since the sketch was started. So 1000 will be equal to 1 second. Since the number is calculated from the start of the sketch, which obviously can’t be taken as the player starting the game, we’ll have to get the millis() once we start the game (press a start button) in an integer variable called something like startMillis. And then get millis() - startMillis to know how many seconds have passes since the game started. Now, if this value is higher than lets say 5000(so 5 seconds have passes after the game really started/not the sketch) we will have to increase speedx and speedy by a certain amount. This can be done with a very simple if statement.

Alright, so I am just testing the new variables out and the 2nd rectangle still doesn’t show up on the screen.

float speedx = 5;
float speedy = 5;
float x1 = 400;
float x2 = 600;
float y1 = 100;
float y2 = 150;


void setup() {
  size(800,800);
  rectMode(CENTER);
}


void draw(){
 background(#080000);
  rect(mouseX,mouseY,50,50);

//First Shape Moves Around the Screen.

y1 = y1 + speedy;
  x1 = x1 + speedx;
  if ((x1 > width - 50) || (x1 < 0)){
  speedx = speedx * -1; 
  }
 
  else if ((y1 > height - 5) || (y1 < 0)) {
    speedy = speedy * -1;
  }


rect(x1,y1,100,150);
 }


{
//Second Shape Moves around the Screen


y2 = y2 + speedy;
  x2 = x2 + speedx;
  if ((x2 > width - 0) || (x2 < 0)){
  speedx = speedx * -1; 
  }
 
  else if ((y2 > height - 0) || (y2 < 0)) {
    speedy = speedy * -1;
  
  rect(x2,y2,100,100);
 }
}

yes, because in line 28 your draw program ends!
move the “}” down to the end

and 2 more “{}” wrong

and i think you need to use separate
speed1 speed2 xy’s, even if they use same speed “5”
their ± must be individual

1 Like

Yup, my bad :sweat_smile:

Ok. I got the 2nd shape to appear :slight_smile: but it only appears for a split second. Can someone help me simplify the code so the second shape bounces around the screen just like the first? I will be back in the morning as it is very late where I am.

Thank you guys for the help so far!

Please post the code you got now^^

float speedx = 5;
float speedy = 5;
float speedx2 = 5;
float speedy2 = 5;
float x1 = 400;
float x2 = 200;
float y1 = 100;
float y2 = 150;


void setup() {
  size(800,800);
  rectMode(CENTER); 
}



void draw(){
 background(#080000);
  rect(mouseX,mouseY,50,50);

//First Shape Moves Around the Screen.

y1 = y1 + speedy;
  x1 = x1 + speedx;
  if ((x1 > width - 50) || (x1 < 0)){
  speedx = speedx * -1; 
  }
 
  else if ((y1 > height - 5) || (y1 < 0)) {
    speedy = speedy * -1;
  }



rect(x1,y1,100,150);
 



//Second Shape Moves around the Screen


y2 = y2 + speedy;
  x2 = x2 + speedx;
  if ((x2 > width - 100) || (x2 < 0)){
  speedx2 = speedx2 * -1; 
  }
 
  else if ((y2 > height - 50) || (y2 < 0)) {
    speedy2 = speedy2 * -1;
  
  rect(x2,y2,100,100);
   }
 }
}

yes, go sleep first,
and tomorrow repair: “{}”
besides that the code should be formatted
( in processing IDE use [ctrl][t] / in forum use </> to show formatted code )
you can find out about “{” and its end
when you place the cursor behind a “{” or a “}” and the IDE will show you begin and end ( was that clear enough explained?)

also for

  y2 = y2 + speedy;
  x2 = x2 + speedx;

must use the speed_“2”

simplify code?
good you do first one, then 2 rectangles,
now you see the need of SETS of variables
one / each rectangle needs the “property” x , y, wx,hy, speedx, speedy
so, learn array or learn class

Yup ^^.
So, first of all, remove the last 2 }} as kll said, and also add one before the second rect();
Then, you didn’t add speedx2, but speedx to x2. This causes the second rect to not care about collision and only follow the moves of the first one.
Also make sure to use the correct sizes to check for the border. Since you used rectMode(CENTER) all positions like -100 or <0 should be half the size of the rect. In case of the second rect, those numbers should always be 50. For the first rect, since the size if different you’ll have to use different values to get the distances in each direction.

Since i asked him if he had classes and didn’t, i suggested him how to manage without classes, but in retrospective, it might have been wiser to show him how classes work, so i’ll do that now…
You could do the same as you already did using classes. This way you can create Objects that store the respective variables inside themselves, which would look similar to this in this case :

class Enemy{ //used to define the name of the class
  float x, y, w, h; //variables that are only within this class and individual for each instance of it. 
  float speedX, speedY;  

  Enemy(float x_, float y_, float w, float h, float speedX_, float speedY_) { // A constructor. Here is where you create a new Instance of this class and can set some basic variables
    x = x_;// you can either name the variables with different names to avoid confusion like adding _ or temp to the variablename.
    y = y_;
    this.w = w; // or you can refer to the variable of this instance by using this.w
    this.h = h;
    speedX = speedX_;
    speedY = speedY_;
  }

  void draw() { //just a function to draw each rectangle 
    rect(x, y, width, height);
  }

//you can add more methods like a setter
  void setSpeedX(float sx) {
    speedX = sx;
  }
  
// and you can get the variables inside by doing this 
  float getSpeedX() {
    return speedX;
  }
}
// you have to create a new variable using your new class
Enemy enemy1, enemy2;
//and inside your draw or setup method you can access this class by doing things like these
void setup() {
  enemy1 = new Enemy(400, 200, 100, 100, 5, 5);
  enemy2 = new Enemy(200, 500, 100, 150, 5, -5); //with -5 at the start it goes in different directions from the start. You can set each enemy with different starting variables.
}

void draw() {
  enemy1.draw(); //used to draw the enemy like rect() did.
  enemy2.draw(); //same for the 2nd one
  enemy1.setSpeedX(-5);//to change the speedX in the first enemy
  enemy1.setSpeedX(enemy1.getSpeedX()*-1); //to inverse the already existing number like you did before
}

You’ll have to figure the rest out yourself. Obviously we will still help you if you have any question, but i already almost did the whole thing myself now :sweat_smile:

Ok. so in line 42 of the code mentioned above, I keep getting the error “getSpeedX cannot be resolved to a variable.” Even though the variable is stated above, do you think it doesn’t recognize it because the program ends? does it need to be stated as a global variable?

Yeah, the problem was on my end, that i forgot that it should actually be enemy1.getSpeedX() and not just getSpeedX.