Choose your own adventure example


#1

Here are two possible solutions to a challenge that came up in a student project. I’m posting here to show how to achieve the same effect in both Blockly and JavaScript.

This student was creating a choose your own adventure style story, where a choice made in one scene would affect how the story would be presented in the next scene, without having to make a different scene for each possible choice.

Solution 1 in Blockly:

See it in action

This code allows the user to choose a character in one scene by clicking on a character (three objects are already in the scene), saves that choice to a global variable, then creates the chosen character object in the second scene.

Scene 1:

Scene 2:

These threads were useful for understanding how to use global variables in blockly:
http://forum.maker.cospaces.io/t/global-variables/117/4
http://forum.maker.cospaces.io/t/using-the-javascript-block/24




Solution 2 in JavaScript:

This code creates three character objects, then allows the user to choose a character by clicking on the character, saves that choice to a global variable, then creates the chosen character object in the second scene.

See it in action

Scene 1:

var elephant = Scene.createItem('LP_Elephant',-3.75, 10.87, 0);
var man = Scene.createItem('LP_Man',-0.01, 9.71, 0);
var horse = Scene.createItem('LP_Horse',4, 10.71, 0);

elephant.onActivate(function(){
    Space.setProperty('character','elephant');
    Space.goTo('cdqDrgNuh3qHuq64oao8PB');
});

man.onActivate(function(){
    Space.setProperty('character','man');
    Space.goTo('cdqDrgNuh3qHuq64oao8PB');
});

horse.onActivate(function(){
    Space.setProperty('character','horse');
    Space.goTo('cdqDrgNuh3qHuq64oao8PB');
});

Scene 2:

if (Space.getProperty('character') == 'elephant'){
    Scene.createItem('LP_Elephant',0,10,0);
} else if(Space.getProperty('character') == 'man') {
    Scene.createItem('LP_Man',0,10,0);
} else if(Space.getProperty('character') == 'horse'){
    Scene.createItem('LP_Horse',0,10,0);
}

Alternate solution in JavaScript

This version of the Scene 1 code is what I was aiming for originally, but since I’m new to JavaScript it took a while to figure out why I couldn’t pass arguments to callback functions.

See it in action

var elephant = Scene.createItem('LP_Elephant',-3.75, 10.87, 0);
var man = Scene.createItem('LP_Man',-0.01, 9.71, 0);
var horse = Scene.createItem('LP_Horse',4, 10.71, 0);

function changeScene(choice){
    Space.setProperty('character',choice);
    Space.goTo('cdqDrgNuh3qHuq64oao8PB');
}

elephant.onActivate(changeScene.bind(this, 'elephant'));
man.onActivate(changeScene.bind(this,'man'));
horse.onActivate(changeScene.bind(this,'horse'));

This link explains how passing arguments to callback functions is not possible by default, but there are ways to do it, like the binding that I use above.

If you want to go down a deeper rabbit hole, here’s an explanation of what callback functions and asynchronous programming are in JS.


#2

Super useful and insightful example tutorial. Thanks, @ianostrom!