Skip to content
CIMON-Canvas v5.0.4

Script Editor Exercise

Exercise

Exercise: Making a Game with Script Editor

Please follow the below exercise to understand Scripting functionality.

Configuration

The following configuration is used to set up this exercise.

Tag Configuration

  1. Create the following tags:
    1. Color
      • Data type: STRING
      • Initial value: #FF000
    2. Game ON
      • Data type: BOOL
      • Initial value: false
    3. Points
      • Data type: INT (INT16)
      • Initial value: 0
    4. sleepTime
      • Data type: INT (INT16)
      • Initial value: 500
    5. level
      • Data type: INT (INT16)
      • Initial value: 0
    6. clicked
      • Data type: BOOL
      • Initial value: false
    7. difficulty
      • Data type: INT (INT16)
      • Initial value: 0
    8. default_sleep
      • Data type: INT (INT16)
      • Initial value: 500

Page Configuration

  1. Select the page and rename it to “Main Menu.” Under Appearances, select the background color to #000000.

Project Configuration 1

  1. Create three text displays.

The first one will say, “Main Menu”. Under Appearances, set the font color to #FFFFFF and font size to 30.

The second one will say, “Start Game!”. Under Appearances, set the font color to #FFFFFF.

The final one will say, “Exit Program”. Under Appearances, set the font color to #FFFFFF.

Set these on the screen evenly spaced apart in the middle going down the screen.

  1. Create two new pages. One will be named “Gameplay”. The second will be named “Selection”. Set the background color of both pages to #000000.

  2. On the Gameplay Page, create two text displays and one rectangle.

Drag one text display into the top center of the page. Under Appearances, set the font color to #FFFFFF.

Move the rectangle to the center of the screen. Drag-and-drop the Color tag onto the fill property.

Drag-and-drop the Points tag onto the text display.

The last text display will be placed on the bottom left of the screen. Change the text to “Exit”. Under Appearances, set the font color to #FFFFFF.

  1. On the "Selection" page, create three text displays.

The first will say, “Easy”. The second will say, “Medium”. The third will say, “Hard”. Place them on the screen and spread them out. Under Appearances, set the font color to #FFFFFF.

Script Configuration

  1. Create the following script and paste the below script:
    1. Gameplay
      • Running type: Manual
while(tag.read("Game ON")){
	var currPoint = tag.read("Points"); // saves the current points
	var chance = Math.floor( Math.random() * (100 - 1 + 1)) + 1; // random num generator
	tag.write("clicked", 0); // resets click status
	thread.msleep(100);
	if(chance > 50){ // 50/50 chance of being green or red
		tag.write("Color", "#00FF00");
	}
	else{
		tag.write("Color", "#FF0000");
	}
	thread.msleep(tag.read("sleepTime"));
	if(tag.read("Points") > currPoint){ // if the user gets a point
		tag.write("level", tag.read("Points") + 1); // increases the level
		thread.msleep(100);
		if(tag.read("sleepTime") > 250) // as long as sleep is not below 250 ms
			tag.write("sleepTime", tag.read("default_sleep") - (tag.read("Points") * 20)); // reduce it by 20 for every point
		thread.msleep(100);
	}
}
  • Create the following script and paste the below script:
    1. Exit Game
      • Running type: Manual
system.exit(); // will just quit the game
  • Create the following script and paste the below script:
    1. Start Game
      • Running type: Manual
page.open("Selection"); // opens the difficulty selection screen
  • Create the following script and paste the below script:
    1. Point
      • Running type: Manual
while(!tag.read("clicked")){ // while user has not clicked
	tag.write("clicked", 1); // will set that the user has clicked
	if(tag.read("Color") == "#FF0000")
	{
		tag.write("Points", tag.read("Points") - 1); // lose a point if red
	}
	if(tag.read("Color") == "#00FF00")
	{
		tag.write("Points", tag.read("Points") + 1); // gain a point if green
		thread.msleep(100);
		tag.write("Color", "#FF0000"); // change color to red.
	}
}
  • Create the following script and paste the below script:
    1. Difficulty
      • Running type: Manual
switch(tag.read("difficulty")){
	case 1:
		tag.write("sleepTime", 1500);
		tag.write("default_sleep", 1500);
		page.open("Gameplay");
		tag.write("Game ON", 1);
		thread.msleep(100);
		system.runScript("Gameplay");
		break;
	case 2:
		tag.write("sleepTime", 1000);
		tag.write("default_sleep", 1000);
		page.open("Gameplay");
		tag.write("Game ON", 1);
		thread.msleep(100);
		system.runScript("Gameplay");
		break;
	case 3:
		tag.write("sleepTime", 500);
		tag.write("default_sleep", 500);
		page.open("Gameplay");
		tag.write("Game ON", 1);
		thread.msleep(100);
		system.runScript("Gameplay");
		break;
}
  • Create the following script and paste the below script:
    1. Hard_Selection
      • Running type: Manual
tag.write("difficulty", 3); //difficulty set to hard
thread.msleep(100);
system.runScript("Difficulty");
  • Create the following script and paste the below script:
    1. Med_Selection
      • Running type: Manual
tag.write("difficulty", 2);// difficulty set to medium
thread.msleep(100);
system.runScript("Difficulty");
  • Create the following script and paste the below script:
    1. Easy_Selection
      • Running type: Manual
tag.write("difficulty", 1); //difficulty set to easy
thread.msleep(100);
system.runScript("Difficulty");
  • Create the following script and paste the below script:
    1. Return to Main Menu
      • Running type: Manual
page.open("Main Menu");
thread.msleep(100);
tag.write("Game ON", 0);
thread.msleep(100);
tag.write("Points", 0);
tag.write("level", 1);
thread.msleep(100);

Project Configuration 2

  1. On the "Main Menu" page, in the text display with “Start Game”, under the Actions properties, select On Press. Click Add New Command and use the Call Script command, calling the Start Game script.

    For the text display with “Exit Program”, under the Actions properties, select On Press. Click Add New Command and use the Call Script command, calling the Exit Game script.

    Now, on the "Selection" page, select the text display that says, “Easy”. under the Actions properties, select On Press. Click Add New Command and use the Call Script command, calling the Easy_Selection script.

    For each difficulty, put the respective script. For medium, bind the Med_Selection script. For hard, bind the Hard_Selection script.

    Finally, on the "Gameplay" page, select the rectangle. under the Actions properties, select On Press. Click Add New Command and use the Call Script command, calling the Points script.

    For the "Exit" text display, under the Actions properties, select On Press. Click Add New Command and use the Call Script command, calling the Return to Main Menu script.

Project Deployment

  1. Click Tools > Launch Simulator to launch the Canvas Simulator.

  1. Click on "Start Game!". This will open up the difficulty selection screen. Select any difficulty. This will then open up the gameplay screen.

  1. Click on the box when it turns green. The text at the top should increment the number of times you click the box. This will also cause the level to increase and the sleepTime tag to decrease. Click exit whenever the user is ready to move on.

  1. Click on “Start Game” again, and click a new difficulty. Once done with playing the game, click the “Exit Game” text to exit fully.