• Choose a category
• All
• Classic-Fiction

ball.nexty = (ball.y += ball.velocityy);

}

}

function testWalls() {

var ball;

var testBall;

for (var i = 0; i ball = balls[i];

if (ball.nextx+ball.radius > theCanvas.width) {

ball.velocityx = ball.velocityx*-1;

ball.nextx = theCanvas.width - ball.radius;

} else if (ball.nextx-ball.radius < 0 ) {

ball.velocityx = ball.velocityx*-1;

ball.nextx = ball.radius;

} else if (ball.nexty+ball.radius > theCanvas.height ) {

ball.velocityy = ball.velocityy*-1;

ball.nexty = theCanvas.height - ball.radius;

} else if(ball.nexty-ball.radius < 0) {

ball.velocityy = ball.velocityy*−1;

ball.nexty = ball.radius;

}

}

}

function render() {

var ball;

for (var i =0; i

ball = balls[i];

ball.x = ball.nextx;

ball.y = ball.nexty;

context.fillStyle = ball.usercolor;

context.beginPath();

context.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,true);

context.closePath();

context.fill();

}

}

}

This Is Just the Tip of the Iceberg

There is much more you can do with ElectroServer than what we showed you in this chapter. Sending and receiving PublicMessage events can only get you so far when designing multiuser/multiplayer applications.

To start designing multiplayer applications seriously, you will need to delve into the extension and plug-in architecture of ElectroServer, as well as explore plug-in events, which are used to communicate to the server portion of an application. We suggest you check out http://www.electrotank.com/es5.html for more information about the socket server. You can also read ActionScript for Multiplayer Games and Virtual Worlds by Jobe Makar (New Riders). Even though it centers on Flash and an earlier version of ElectroServer, the architectural information about designing apps for a socket server is well worth your time.

At the same time, ElectroServer can be used with technologies other than Canvas (Flash, iOS, etc.), so Canvas will be able to communicate with other socket servers via JavaScript and WebSockets. We chose to base this example on ElectroServer because it allowed us to create a full application for you to test and work through. Other libraries and tools are bound to appear very soon that can work with canvas; for example, the SmartFoxServer Ajax API. Still in beta, this API uses the Google Web Toolkit to connect to the SmartFox socket server through an Ajax connection in JavaScript. This library requires the SmartFoxServer BlueBox add-on module. In theory, this means SmartFoxServer could be used in conjunction with Canvas right now.

Conclusion

Over the past 11 chapters, you have been immersed in the world of HTML5 Canvas. We have given you dozens of examples and applications to work from and through so you can start building your own creations. From simple text displays to high-performance games, we have showed you many ways to bring some of the magic of previous RIA (Rich Internet Application) technologies into the plug-in-less browser experience.

We offered many strategies for integrating Canvas with other HTML5 technologies, as well as techniques for handling text, displaying graphics, scrolling bitmaps, creating animation, detecting multiple types of collisions, embedding and manipulating video, playing music, handling sound effects, creating user interfaces, optimizing code, and preparing apps for mobile platforms. We even introduced you to the future of 3D and multiuser applications directly in the web browser.

The true future, though, is up to you. HTML5 and Canvas are dynamic topics that are still in a rapid state of change and adoption. While this book is a good starting point,