Project:Tic-tac-toe

Specification

Tic-tac-toe project

Version: 1.0 (2015-01-23)

• Category: Interactivity
• Author: SpinetiX S.A.
• License: GPL Version 3
• Target: Elementi

Description

Tic-tac-toe (or Noughts and crosses, Xs and Os) is a game for two players, X and O, who take turns marking the spaces in a 3×3 grid. The player who succeeds in placing three respective marks in a horizontal, vertical, or diagonal row wins the game.

This interactive project was built using jSignage interactive functions. A mouse cursor is added by default to facilitate playing the game on non interactive screens.

How to use it

To use this project onto an HMP, follow these steps:

1. Configure the player for interactivity.
   • For faster reactivity, you can reduce the rendering latency to 500ms and activate "Reduce latency to 60ms [...]" option.
2. Publish the project on the HMP.
3. If you don't have a touchscreen, simply connect an USB HID mouse to the HMP USB port.

Configuration

• Add mouse cursor

  Select weather a mouse cursor is added or not. Deafult value is "Yes".

Sample code

var step = 0, 
    icons = ['X', 'O'],
    status = new Array(9),
    winPatterns = [ [0,1,2], [3,4,5], [6,7,8], [0,3,6], [1,4,7], [2,5,8], [0,4,8], [6,4,2] ],
    table = null, 
    jsonParams;

function checkWin() {
    if ( step > 4 ) {
        for ( i = 0; i < winPatterns.length; i++ ){
            var pattern = winPatterns[ i ];
            if ( status[ pattern[0] ] != '' 
                    && status[ pattern[0] ] == status[ pattern[1] ] 
                    && status[ pattern[0] ] == status[ pattern[2] ] ) {
                return 'Game won by ' + status[ pattern[0] ] + ' !';
            }
        }
    } 
    return ( step == 9 ? "Cat's game !" : false );
}
 
function doAction( event, idx ) {
    if ( status[ idx ] != '' ) {
        return;
    }    
    $( event.currentTarget ).text( icons[ step % 2 ] );
    status[ idx ] = icons[ step % 2 ];
    step++;
    var r = checkWin();
    if ( r !== false ) {
        $.textArea( { fontSize: 180, frame: { backColor: 'white', backOpacity: 0.7 } } )
            .text( r )
            .click( function() {
                $(this).end();
                startGame();
            })
            .removeAfter()
            .addTo('svg');
    }
}

function startGame() {
    step = 0;
    status = ['', '', '', '', '', '', '', '', '', ''];
    if ( table ) {
        table.end();
    }
    table = $.table( {  
        rows: 3, columns: 3,
        renderToSVG: function( primary, secondary ) {
            return $.textArea( { 
                fontSize: 'max', frame: { frameColor: 'black'}  
            } ).click( function( event ) { 
                doAction( event, primary * 3 + secondary );
            } );
        }
    } ).removeAfter().addTo('svg');
    table.attr('pointer-events','boundingBox'); // to ensure that cells catch the click events
}

$(function(){ 
    jsonParams = $.parseJSON( $('#jsonParams').text() );
    if ( jsonParams.addCursor ){
        var svg = $('svg');
        var r = 10;
        var cursor = $.rect( { x: -r, y: -r, width: 2*r, height: 2*r, fill: 'blue', pointerEvents: 'none' } );
        cursor.addTo( svg );
        svg.mousemove( function( evt ){
            var click = $.getLocalCoord( svg[0], evt.clientX, evt.clientY );
            cursor.attr( { transform: 'translate(' + click.x + ',' + click.y + ')' } );
        });
    }

    startGame();
});