| 28 Janvier 2018 |
LightBot
by Adrien Meyer (Student from DI)
LightBot
In this first phase, we explored the principles of instructing a machine about what it must do, and when.
Programming a computer, is like making it “know” what we want it to do, and how we want it to behave.
In this LightBot game, the purpose is to make the little robot walk and jump and switch on light bulbs. But, unlike a regular game where you, the player, click a mouse or tap a screen when it is time to jump, here we need to program the robot. It means that we need to compose a block of instructions for it to execute when we say Go.
The robot will then execute the exact program as we wrote it ahead of time.
We went through 3 stages:
Stage 1 : Instructions Set
We saw how we can add instructions (i.e. actions) from the bottom row, to the program area (the yellow box). The instructions in the bottom, are everything the robot is able to understand, and knows to do.
We just compose a music for the machine, with the instructions: it will play its part when told to start.
Stage 2 : Procedures
Procedures are small (or big!) blocks of code (i.e. instructions) inside a program.
A Procedure has a name (for example: PROC1) and the main program is able to call (i.e. run, execute, invoke) a procedure by its name, as much as needed.
In the above example, instead of repeating 3 times the exact same series of instructions to advance and light up and turn right, we can instead gather together this sequence inside a Procedure, and then we tell the robot to execute 3 times the procedure!
Stage 3 : Loops
A loop, in programming, means: repeating something a certain number of times.
In this stage, we instruct the robot to repeat the same procedure again and again.
Instead of adding multiple times the “call” to P1 from the main program, here we decided to make the procedure P1 call itself again!
The robot will never end the loop… but fortunately the game is successfully over the moment we light up the last bulb 🙂
Code Monster
But programming is not really clicking on big buttons to make a robot turn right or jump.
In this phase, let’s see what real code looks like.
We’re going to use JavaScript, a very famous language used in every Website on the entire Internet.
In JavaScript, we write instructions on on each line. Beware of the “case”! (capital/small letters). It’s very important for the computer to understand each instruction.
We learn here to manipulate the Canvas, i.e. to draw lines and polygons and circles on the white, empty Web page.
“c” is the name of our canvas here.
On the “c” canvas, we select the fill color, then we paint a rectangle using the function “fillRect”.
A function is like a procedure, but it accepts parameters. This way, the fillRect function can be used to draw any rectangle of any dimensions, at any position, because these are the parameters that we pass, when invoking the function.
We’ve covered the use of a variable, which is like a small box in the head of the program, in which you can put a value (for example, the number 80, above), and which has a name (in this example: “size” is the name of the variable, and we place the value “80” inside).
Using this variable, it is possible for us to change the value in one single place, and then our two rectangles will be painted differently.
Then, we’ve covered… loops again!
This time, in JavaScript, we’ve used the for loop, in which we indicate how many times the piece of code inside the { } is to be repeated.
In a for loop, every iteration (i.e. every time the inner block of code is executed) can know the current number of iteration: here we’ve used the variable “i” to count the number of iterations in our loops.
See how we use “i” inside another variable “b”, in order to compute a Color variable “rgba” to make a gradient from black to blue!
Conclusion
By assembling JavaScript instructions, we can make a Website behave like a program: it will run our instructions and, as a developer, we know in advance the exact outcome of the program… (unless there are bugs! But that’s another story…)
