Space Man Design

Southwest Coder Dojo


Southwest Coder Dojo is a member of Coder Dojo International, an organization of free, volunteer-led coding clubs. We were founded to provide introductory coding experiences for youth and teens (ages 11-18). Our volunteer mentors are software developers and software industry professionals from the Twin Cities.

Register with Hennepin County Library to attend our Dojo events. Tickets are free, but seats are limited. No experience in programming required. Remember to bring your laptop!


This week we continue with Space Man by breaking down the elements of the game and designing our Space Man. Along the way, we'll learn how event-driven programming works, do some programming to get colors and make our Spaceman appear and disappear.

To get work this week, we'll need the following links:

The Lesson

We created a new spreadsheet and broke down the Space Man game into a list of tasks.  The list includes the following:
  • Draw the space man
  • Choose the number of times you can be wrong (we chose 6)
  • Choose a word
  • Enter a letter and see if the letter is in the word
  • See how long the word is / reveal the letters
  • Place to enter guesses
  • Know if you've won or lost

onEdit(e)

We learned that the onEdit function is a program that runs when a cell is changed on the spreadsheet. We also learned that the 'e' passed is an event object that can give us information about the sheet. 


Step 1: Choosing colors for Space Man

function onEdit(e) {
     var ui = SpreadsheetApp.getUi();
     var c = e.range.getBackground();
     ui.alert(c);
}
The program above allows you to collect colors from a cell. We used this program to collect the color values that we are going to use for our Space Man.  In our case, we chose black (#000000), white (#ffffff), red (#ff0000) and green (#6aa84f).


Step 2: Draw the Space Man


We drew the Space Man on the spreadsheet.


Step 3: Make the Leg Appear and Disappear

function onEdit(e) {
    var val = e.range.getValue();
    if (val === 0) {        e.range.getSheet().getRange("B23:D25").setBackgroundColor('#ffffff');
    } else {         e.range.getSheet().getRange('D23').setBackgroundColor('#000000');         e.range.getSheet().getRange('C24').setBackgroundColor('#000000');         e.range.getSheet().getRange('B25').setBackgroundColor('#000000');     }
}


We then wrote a program that made a leg appear and disappear. By entering a 1 or a 0 on the sheet, if the cell values are correct, your leg will appear and disappear.