Further Explorations - HTML5 Canvas - page 906

Further Explorations with ElectroServer

Displaying text on HTML5 Canvas is interesting, but as we have shown you in this topic, you
can do much more. Let's add some graphics to the previous demo. We have added a second
application for you to peruse, named CH11EX3.html . This application adds the bouncing ball
demo app from Chapter 5 to the chat application we just created. It allows chatters to “send”
bouncing balls to each other by clicking on the Canvas.

Theheartoftheappissimplyanotheruseofthe EsObject instancefromthechatapplication,
whichiscreatedwhentheuserclicksonthecanvas.This EsObject instanceaddsinformation
about a ball that one user created for the others in the room:

function function eventMouseUp ( event ) {

var var mouseX ;

var

var mouseY ;
iif ( event . layerX || event . layerX == 0 ) { // Firefox
mouseX = event . layerX ;
mouseY = event . layerY ;
} else

else iif ( event . offsetX || event . offsetX == 0 ) { // Opera
mouseX = event . offsetX ;
mouseY = event . offsetY ;

}
ballcounter ++ ;
var var maxSize = 8 ;

var

var minSize = 5 ;
var

var maxSpeed = maxSize + 5 ;
var

var tempRadius = Math . floor ( Math . random () * maxSize ) + minSize ;
var

var tempX = mouseX ;
var var tempY = mouseY ;

var var tempSpeed = maxSpeed - tempRadius ;

var

var tempAngle = Math . floor ( Math . random () * 360 );
var var tempRadians = tempAngle * Math . PI / 180 ;

var

var tempvelocityx = Math . cos ( tempRadians ) * tempSpeed ;
var var tempvelocityy = Math . sin ( tempRadians ) * tempSpeed ;

var var pmr = new new PublicMessageRequest ();

pmr . message = "" ;
pmr . roomId = _room . id ;
pmr . zoneId = _room . zoneId ;
var

var esob = new new ElectroServer . EsObject ();

esob . setFloat ( "tempX" , tempX );
esob . setFloat ( "tempY" , tempY );
esob . setFloat ( "tempRadius" , tempRadius );
esob . setFloat ( "tempSpeed" , tempSpeed );
esob . setFloat ( "tempAngle" , tempAngle );