/* TicTacToe * ------------------ * iio.js version 1.4 */ // define a new iio app function TicTacToe( app, settings ){ // set the background color to black app.set({ color: 'black' }); // add a 3x3 grid to app center var grid = app.add( new iio.Grid({ pos: app.center, // make the grid as big as the smaller screen dimension width: ( app.height < app.width ) ? app.height : app.width, color:'white', lineWidth: 5, R:3, C:3 })); // define boolean to indicate player turns var xTurn = true; // define a function to be called when the grid is clicked grid.onMouseDown = function( grid, event, pos, cell ){ // if the clicked cell is empty if(!cell.taken){ // add a new Text object to the cell cell.add( new iio.Text({ // depending upon the current turn // set the object text and color text: xTurn ? 'X' : 'O', color: xTurn ? 'red' : 'iioblue', size: cell.width, font: 'sans-serif', })); // create a new property in cell to // indicate that it is not empty cell.taken = true; // change turns xTurn = !xTurn; } } // if settings are passed and preview is active if( settings && settings.preview ) // generate 4 random selections for( var i=0; i<4; i++ ) grid.onMouseDown( grid, {}, {}, grid.objs[iio.randomInt( 0,8 )] ); } // start the app on an existing canvas iio.start( TicTacToe, 'canvasId' );