Great Java exercise for Hour of Code

Last Friday my Y12s and I attended an excellent Masterclass from the Manchester Met. Some degree course information was followed by a Masterclass where we explored Java and Processing and made a “pong” game.

This inspired me to explore some more after the event so the next two lessons we used the Java/Processing tutorial here Processing Hour of Code | Home

After whizzing through the tutorial we tried our hand at using the online editor to make a few things. You could do this too, with a high-performing GCSE or an A-level class, for the “Hour of Code” this week, or just because you can.

I used these lessons to do several things, pedagogically:

• Introduce a new high-level language (Java) other than Python.
• Introduce the concept of event loops for interactive programs (e.g. games)
• Reinforce the concept of modular programming
• Practice devising expressions – one of the most creative parts of programming for me.

I suggested we make a game with an “AI” element, a computer controlled character. We used the online editor at the page above, and I made the beginnings of the game and shared it here Skeleton Code

void setup() {
size(500, 400);
background(10, 80, 100);
charX = 250
charY = 200
}

void draw() {
background(10, 80, 100);
// add code here to make character move
drawChar()
drawPlayer()
}

void drawChar() {
fill(255,0,0);
ellipse(charX, charY, 30,30);
}

void drawPlayer() {
fill(0,0,255);
ellipse(mouseX,mouseY,40,40);
}

I invited the students to add code where indicated to make the character “blob” move towards the player “blob” which follows the mouse. Several attempts were made involving Selection, for example along the lines of…

if (mouseX < charX) {
    charX -= 20
    } else {
    charX += 20
}

but one student successfully made this work with just mathematics. Like I said, devising an expression to solve problems like this is fun and also makes the program more efficient. Here is what he came up with:

  accel = 30
  stepX = (mouseX - charX) / accel
  charX += stepX

This shows that all we have to do is calculate the difference between the X co-ordinates then somehow break that down into steps. The beauty of the above code is we can alter the accel variable to change the difficulty.

Then we needed to add some “collision detection”. This is where I resorted to the whiteboard and drew this image, and asked what mathematical theorem we were about to code..

Within a few seconds I got the answer I needed: “Pythagoras”. We can detect whether the two circles have touched, by calculating the diagonal distance between them and comparing with the sum of their radiuses. Hence this code:

  h = sqrt(x ** 2 + y ** 2);
     if (h < 35) {
       hitScreen()
      }

Now we have our computer “enemy” movement and our collision detection, we have a playable game. Here it is in full, copy and paste into the “Hello Processing” editor here to edit, or click here to play.

Did I achieve my pedagogical goals? Comment below or on Twitter please Mr Harrison, Head of Computing #loveteaching (@MrAHarrisonCS) / Twitter 🙂

void setup() {
   size(500, 400);
   background(10, 80, 100);
   charX = 250
   charY = 200
   accel = 50
 }
  
 void draw() {
   background(10, 80, 100);
   moveChar();
   checkHit();
   drawChar()
   drawPlayer()
  
 }
 void moveChar() {
     stepX = (mouseX - charX) / accel
     stepY = (mouseY - charY) / accel
     charX += stepX
     charY += stepY
 }
  
 void checkHit() {
     x = mouseX - charX;
     y = mouseY - charY;
     h = sqrt(x ** 2 + y ** 2);
     if (h < 35) {
       hitScreen()
      }
 }
 void hitScreen() {
      background(255, 128, 128);
      }
  
 void drawChar() {
   fill(255,0,0);
   ellipse(charX, charY, 30,30);
   }
   
 void drawPlayer() {
   fill(0,0,255);
   ellipse(mouseX,mouseY,40,40);
   }