/* TicTacToe * ------------------ * iio.js version 1.4 */ // define a new iio app DragDrop = function( app, settings ){ var color = iio.Color.random(); // create a random app color var size = 450; if (settings && settings.preview) size = 80; // set the background to the inverse app.set({ color: iio.Color.invert(color) }); // add position text if (!settings || !settings.preview) { var positionText = app.create('position text', app.center, color); positionText.text = positionText.pos; } var selectDistance; // distance between object center and mouse pos var selectedObj; // set event listener on canvas for mouse move iio.addEvent(app.canvas, 'mousemove', function(event){ // if an object is selected if(selectedObj) { // move the object to mouse position plus the select distance selectedObj.pos = app.eventVector(event).add(selectDistance); // set the text to the objects position if (positionText) positionText.text = selectedObj.pos; // redraw the app app.draw(); } }); // common object properties and functions var common = { pos: app.center, outline: color, lineWidth: 10, // called when the object is clicked onMouseDown: function(obj, event, pos){ selectDistance = iio.Vector.sub(obj.pos, pos); selectedObj = obj; }, // called when the object is released onMouseUp: function(obj){ selectedObj = undefined; } } // create one of three shapes var shape = iio.randomInt(0,3); switch(shape) { // create a square (iio.Rectangle) case 0: app.create(common,{ width:size }); break; // create a circle (iio.Ellipse) case 1: app.create(common,{ radius:size/2 }); break; // create a triangle (iio.Polygon) default: app.create(common,{ vs: [ [ 0,-size/1.4 ], [ size/1.5, size/2 ], [ -size/1.5, size/2 ] ] }); } } // start the app fullscreen iio.start( DragDrop );