Making a Jenga block tower with Blockly

[ElenaRenn]

Hi everyone! Here’s a tutorial for making a Jenga tower that can fall down in Cospaces, just using Blockly.

Have a go playing with this example: https://cospac.es/edu/v8dL


Set camera to orbit and move to the side. Check “Use in Blockly”


Take a Flex cuboid:


With snapping on (toggle with “s”), resize the block so it’s 2 squares wide, 2 squares high and 6 squares long.

Label “woodBlock1”, and add it to Blockly:

and turn Physics on.


Copy and stack the blocks like a Jenga tower, until you have 12 blocks (4 rows, 3 in each row). Keep snapping (s) on to keep everything nicely aligned.


To use these blocks for coding, they need to be labelled differently. Open the Hierarchy from the Scenes tab on the left:


Here you can see all your objects in the scene. Label all the wooden blocks according to number (there should be 12). Don’t forget to press enter every time you finish editing the names!


We’re going to make a list, so an action can be repeated across all 12 items more easily.

Open the coding window and select Blockly.
Open “Variables”, and create a Variable called “woodBlocks”. This will be the name of your list.

Now some blocks will appear in the Variables section. Add the “set … to” block to your scene.


Go to “Lists” and find “create list with…”


Then add the first “woodBlock” item:



You can place the first item into the list, copy + paste the block and select the next number from the drop down menu to get the next one.
You’ll need more than three slots in this block, so add more with the little cog button and drag the symbol across to make new slots:


You should end up with 12 blocks in the list.

Now we need to define what all the items in the list will do.
In Control flow -> Loops find this block:


Add it to the bottom of the code. Then find “woodBlocks” in your Variables and add it to the end of the green block.


Look in Events for this activation block:


Place it inside the first green block and make sure it says “Item”.


This means when you click (activate) any one of the wooden blocks in the scene, something will happen. We want the block to move a little towards the camera, like you’re nudging it with your hand.

To create this action we need to use a Physics block. In Physics -> Simple you will find this block:


Place in your code like this and place the Variable “Item” in the first space.


We want every block to be pushed towards the camera, so for that we need the position of the camera. Under Values you can find a block for this:


Then drag it to replace the xyz values you see in the blue block. You can just delete this spare coordinates block.


Change the velocity to 2. The code should all look like this:


Press “Play” and see if it works!



If you want to experiment a little more, you can change the velocity to a different number, change the colours, or make the tower taller for a more spectacular fall!

First example space: https://cospac.es/edu/v8dL
Second example space: https://cospac.es/edu/vGlQ

[btcostello05]

I love this, I want to try this out with some kids soon!

[Daniel_Pers]

Very nice job !
I like this interactivity. It reminds me of the game Boom Blox on the Wii:

Your tutorial is very well done too!
What tool do you use to create GIFs?

[jorganiser]

@ElenaRenn

Hi everyone! Here’s a tutorial for making a Jenga tower that can fall down in Cospaces, just using Blockly.

Have a go playing with this example: cospac.es



Set camera to orbit and move to the side. Check “Use in Blockly”



Take a Flex cuboid:



With snapping on (toggle with “s”), resize the block so it’s 2 squares wide, 2 squares high and 6 squares long.

Label “woodBlock1”, and add it to Blockly:

and turn Physics on.



Copy and stack the blocks like a Jenga tower, until you have 12 blocks (4 rows, 3 in each row). Keep snapping (s) on to keep everything nicely aligned.



building_tower.gif435x537 794 KB

To use these blocks for coding, they need to be labelled differently. Open the Hierarchy from the Scenes tab on the left:



Here you can see all your objects in the scene. Label all the wooden blocks according to number (there should be 12). Don’t forget to press enter every time you finish editing the names!



15_Screen Shot 2017-11-21 at 11.40.59.png864x685 142 KB

We’re going to make a list, so an action can be repeated across all 12 items more easily.

Open the coding window and select Blockly.

Open “Variables”, and create a Variable called “woodBlocks”. This will be the name of your list.

Now some blocks will appear in the Variables section. Add the “set … to” block to your scene.



Go to “Lists” and find “create list with…”



Then add the first “woodBlock” item:



You can place the first item into the list, copy + paste the block and select the next number from the drop down menu to get the next one.

You’ll need more than three slots in this block, so add more with the little cog button and drag the symbol across to make new slots:



list_making.gif472x729 397 KB

You should end up with 12 blocks in the list.

Now we need to define what all the items in the list will do.

In Control flow -> Loops find this block:



Add it to the bottom of the code. Then find “woodBlocks” in your Variables and add it to the end of the green block.



Look in Events for this activation block:



Place it inside the first green block and make sure it says “Item”.



This means when you click (activate) any one of the wooden blocks in the scene, something will happen. We want the block to move a little towards the camera, like you’re nudging it with your hand.

To create this action we need to use a Physics block. In Physics -> Simple you will find this block:



29_Screen Shot 2017-11-21 at 13.10.32.png813x67 9.67 KB

Place in your code like this and place the Variable “Item” in the first space.


30_Screen Shot 2017-11-21 at 13.18.05.png826x155 16.5 KB

We want every block to be pushed towards the camera, so for that we need the position of the camera. Under Values you can find a block for this:



Then drag it to replace the xyz values you see in the blue block. You can just delete this spare coordinates block.



32_Screen Shot 2017-11-21 at 13.18.36.png800x90 11 KB

Change the velocity to 2. The code should all look like this:



33_Screen Shot 2017-11-21 at 13.21.28.png803x476 41.3 KB

Press “Play” and see if it works!



If you want to experiment a little more, you can change the velocity to a different number, change the colours, or make the tower taller for a more spectacular fall!

giant_blocks.gif600x590 808 KB

First example space: cospac.es

Second example space: cospac.es

Very awesome - well done.

[ElenaRenn]

Hi Daniel,
I’m glad you like it, thanks!

LICEcap is a simple program for directly capturing gifs from your screen: https://www.cockos.com/licecap/
Sometimes that didn’t work for me though, so I also use Quicktime screen capture and convert it to a gif with Photoshop, but that’s a little more time consuming.

[TWierstra]

Hi Elena,

I liked this one very much and translated it to Dutch for my students. I hope that is okay.

Kinde regards.

Jenga in CoSpaces

Hallo! Met deze tutorial maak je Jenga in Cospaces, met Blockly.

Zet de camera op ‘orbit’ en zet hem aan de zijkant. Selecteer “Use in Blockly”

Selecteer een ‘Flex cuboid’:

Verander het formaat van het blok met snapping aan (met “s”), zodat het 2 vierkanten breed, 2 vierkanten hoog en 6 vierkanten lang is.

Geef het label de naam “woodBlock1”, en voeg toe aan Blockly:

En zet ‘Physics’ aan.

Kopieer dit blok en stapel de blokken op als een Jenga toren, in totaal 12 blokken (4 rijen, 3 in elke rij). Zorg dat ‘snapping’ (s) aan staat zodat alles recht komt te staan.

Om deze blokken te kunnen programmeren moeten ze allemaal een eigen naam (label) hebben. Open de ‘Hierarchy’ links in het ‘Scenes’ tabblad:

Hier zie je alle objecten in de scene. Geef alle blokken een eigen naar(label) met en nummer. Er moeten 12 zijn. Vergeet niet op ‘enter’ te drukken na elke naamswijziging.

We gaan een lijst maken zodat we straks een actie gemakkelijker kunnen herhalen voor alle blokken.
Open het coding scherm en selecteer ‘Blockly’.
Open “Variables”, en maak een ‘Variable’ met de naam “woodBlocks”.

Nu verschijnen een aantal blokken in je ‘Variables’ sectie. Voeg het “set … to” block toe in je scene.

Ga naar “Lists” en zoek “create list with…”

Voeg nu het “woodBlock” item toe:

Je kun het eerste item in de lijst plaatsen, kopieer + plak de blokken en selecteer steeds het volgende nummer uit het dropdown-menu.Je hebt meer dan 3 plekken nodig. Voeg dus meer toe door op het tandwieltje te drukken en te slepen.

Er zouden dus uiteindelijk 12 blokken in de lijst moeten staan.

Nu moeten we gaan bepalen wat alle items in de lijst gaan doen.
In Control flow -> Loops vind je dit blok:

Voeg deze onderaan je code toe. Zoek vervolgens “woodBlocks” in in je Variables en voeg deze toe aan het einde van je groene blok.

Zoek in Events dit blok:

Plaats deze in het eerste groene blok en zorg dat het ingesteld is als “Item”.

Dit betekend dat wanneer je een blok aanklikt in de scene dat er iets gaat gebeuren. Willen dat het blok een beetje naar de camera zal gaan.
Om dit voor elkaar te krijgen moeten we een ‘Physics block’ gebruiken. In Physics -> Simple zul je dit blok vinden:

Plaats je code zoals het voorbeeld hieronder in je code en zet de Variable “Item” in het eerste vak.

We willen dat elk blok naar de camera toe wordt gedrukt, dus moeten we de positie van de camera weten. Onder ‘Values’ kun je een blok vinden hiervoor:

Sleep deze om de xyz waarden die je ziet te veranderen in het blauwe blok. Je kunt het reservere coördinaten blok verwijderen.

Verander de ‘velocity’ naar 2. De code zou er zo uit moeten zien:

Druk op “Play” en bekijk of alles goed werkt.

Je kunt nog experimenteren door de ‘velocity’ aan te passen, de kleuren te veranderen of de toren groter te maken.

Originele versie in het engels: Making a Jenga block tower with Blockly

[ElenaRenn]

Great idea! I hope your students enjoy it.

[makyna2198]

Hello Elena,

Would you be able to resubmit this same assignment with the updated software?

I would really appreciate it

[Nikolay]

@ElenaRenn

cospac.es

Hi @makyna2198,

You can remix and explore and this CoSpace in updated version here:

CoSpaces Edu :: Jenga clone (upd)