CSSoch Games

Games library for the CSSoch Curriculum

This library provides all the necessary functionality to integrate games and projects with the CSSoch framework.

Installation

The package is now publicly available (this may change to private in the future). You can link to the library using the Unpkg CDN or install it using npm.

npm

npm install gameslib

unpkg

<script src="https://unpkg.com/gameslib/dist/main.js"></script>

Usage

Basic Setup

The following code imports the game library and creates a new game object of type 'rocket'.

import Game from 'gameslib';
let gameObj = new Game.default('rocket');

The argument 'rocket' states the type of the game. Other game types include - 'maze' and 'draw' (though these are currently unavailable). More game types will be added in the future.

Options

When creating the game object, certain options need to be configured which can be done through the 'setup' method:

gameObj.setup(options, assessment);

The first option is the structure of the game. This can either be 'codingEnvironment' or 'playgroundEnvironment'. The coding environment is for games that require both a game window and a blockly window for writing code. The playground environment is simpler and only contains blocks which the students link together. Options are divided into two categories: 'blockly' and 'game'. The following table is a list of options required for the coding environment.

Blockly

| Option | Type | Description | | --- | --- | --- | | toolboxRef | String | ID for toolbox div in html (this is where the toolbox will go) | | blocklyAreaRef | String | ID for blockly area div in html (this div will hold the blockly window) | | blocklyRef | String | ID for blockly div in html (this is where the blockly worspace will go) | | renderer (Optional) | String | One of three: "Thrasos", "Zelos", "Geras". This option will be provided in the CMS UI | | categoriesInToolbox | Boolean | Whether there are categories in toolbox or not. This option will be provided in the CMS UI |

Game

| Option | Type | Description | | --- | --- | --- | | canvas | String | ID for canvas div in html (this is where the game window will go) | | Project | Boolean | Whether the game is a project or not. This option will be provided in the CMS UI |

The playground environment requires only the 'blocklyAreaRef' and 'blocklyRef' fields under the 'blockly' category. The 'game' category is not needed.

Note: When loading the playground environment, an additional boolean parameter needs to be passed in for assessment to the setup method. This is to allow for concurrent running of game instances, and is not required for the coding environment.

Assets

The game assets need to be provided in the form of a dictionary with the key being the name of the file (without the path and the extension), and the value being the entire file path. Eg: {'RocketImage': '../assets/rocket/RocketImage.png'}.

gameObj.loadAssets(assetsDict);

There is an other category of images for blockly. These blockly assets are passed as a dictionary in the same way as the game assets.

gameObj.loadBlocklyImgs(blocklyAssetsDict);

Levels

The game object requires json config files in order to load levels. These json files shall be uploaded by the game developer throught the CMS UI. The json needs to be passed onto the game object.

gameObj.loadLevel(json);

Note: The latest versions of all the assets and json file levels used in the games can be found under the corresponding 'assets' and 'json' folders.

Running the Code

To run the code, the following method can be called:

gameObj.runCode();

Other Functionality

// Restart the game
gameObj.restart();

// Set function to be called when the user fails
gameObj.setFailure(callback);
// Set function to be called when the user succeeds
gameObj.setSuccess(callback);

// Return a string form of the user's code
gameObj.fetchCode();
// Load the code into the workspace
gameObj.loadCode(code);

// Load the solution into the workspace
gameObj.loadSolution();

Note: The failure callback must accept a string argument. This is the fail code. The fail code must be mapped with the code provided in the CMS to find the appropriate message to display to the student. If no message is available for the fail code, or there is any other problem with the code, the 'DEFAULT' code's message can be displayed.

Tech

This library has 4 dependencies:

• Blockly - Used for the block based programming interface used in the games
• P5 - For the game engine and
• FastAverageColor - Used in the playground environment for getting the average colour of images
• jQuery

Roadmap

• More features to be added to the library to make it more flexible, including functionality to lock the workspace, pause the game, etc.
• More game types will continuously be added to the library and examples for these shall be made available under the GamesTest folder.
• Refer to the CSSoch Games Project for details on work being done.

Note: The GamesTest folder contains a set of demos on how to use a few different types of games.