66多个开源JavaScript游戏引擎

     利用 HTML(5) + Javascript + CSS就能开发惊人的游戏。下面将要介绍JavaScript游戏引擎包括了：3D、动画、 Canvas、Math、颜色、声音、WebGL等方面。    <h2 style="border-bottom:#666666 1px solid;border-left:#666666 1px solid;line-height:35px;background-color:#468ed9;text-indent:6px;color:#ffffff;font-size:21px;border-top:#666666 1px solid;border-right:#666666 1px solid;">1. General JS Game Engine</h2>    <p> <a href="/misc/goto?guid=4958187350449759825" target="_blank"><strong><span style="font-size:medium;">Akihabara</span></strong></a></p>    <hr />    <p>Akihabara is a set of libraries, tools and presets to create pixelated indie-style 8/16-bit era games in Javascript that runs in your browser without any Flash plugin, making use of <i>a small small small</i> subset of the HTML5 features, that are actually available on many modern browsers.</p>    <p><a href="/misc/goto?guid=4958190160423799643"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="Akihabara" border="0" alt="Akihabara" src="https://simg.open-open.com/show/0e3d864bf175f7d295fbc64e85fea1b2.png" width="450" height="358" /></a></p>    <p> </p>    <p><a href="/misc/goto?guid=4958190161168369117" target="_blank"><strong><span style="font-size:medium;">bdge</span></strong></a></p>    <hr />    <p>BDGE is a game engine written in Javascript that uses HTML5 Canvas and Audio to create in-browser games.</p>    <p><acronym><a href="/misc/goto?guid=4958190161908394371"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="bdge" border="0" alt="bdge" src="https://simg.open-open.com/show/93e37f386e30fdd83704af29395845a4.png" width="450" height="276" /></a> </acronym></p>    <p><acronym></acronym></p>    <p><acronym><a href="/misc/goto?guid=4958190162641343593" target="_blank"><strong><span style="font-size:medium;">Canvex: FPS game engine</span></strong></a></acronym></p>    <hr />    <p>Canvex is an experimental browser-based <acronym>FPS</acronym> game engine in the HTML <code><canvas></code> tag, which be believed to work in the following browsers, on any operating system and with no external plugins.</p>    <p><a href="/misc/goto?guid=4958190163382870183"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="Canvex FPS game engine" border="0" alt="Canvex FPS game engine" src="https://simg.open-open.com/show/2e7d3d5496c8d6d78bc65f8392f99eb9.png" width="450" height="368" /></a></p>    <p> </p>    <p><a href="/misc/goto?guid=4958190164113322012" target="_blank"><strong><span style="font-size:medium;">Cocos2D</span></strong></a></p>    <hr />    <p>Cocos2d-javascript is a 2D game/graphics engine based on cocos2d-iphone but designed to run in the web browser. It uses the latest features available in HTML 5 allowing real-time rendering of 2D graphics without the need for plug-ins such as Adobe Flash.</p>    <p><a href="/misc/goto?guid=4958190164853317175"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="Cocos2D" border="0" alt="Cocos2D" src="https://simg.open-open.com/show/1d74739162d5c5b6a45f71a478ab96a4.png" width="450" height="338" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190165585138827" target="_blank"><strong><span style="font-size:medium;">Crafty</span></strong></a><strong><span style="font-size:medium;"> </span></strong></p>    <hr />    <p>Crafty is a lightweight, modular JavaScript game engine to easily produce high quality games. Includes a large variety of components such as animation, event management, redraw regions, collision detection, sprites and more.</p>    <p> <a href="/misc/goto?guid=4958190166340697652"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="Crafty is a lightweight modular JavaScript game engine" border="0" alt="Crafty is a lightweight modular JavaScript game engine" src="https://simg.open-open.com/show/64aa3c0a947c32453a367fd2a05124a8.png" width="450" height="358" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190167103895040" target="_blank"><strong><span style="font-size:medium;">Diggy</span></strong></a></p>    <hr />    <p>Diggy is a DHTML Game Engine (DGE).</p>    <p><a href="/misc/goto?guid=4958190167859058079"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="Diggy" border="0" alt="Diggy" src="https://simg.open-open.com/show/2a97ef4023befeae5580306c7ca77a02.png" width="450" height="300" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190168604411098" target="_blank"><strong><span style="font-size:medium;">FlixelJS</span></strong></a></p>    <hr />    <p>FlixelJS is direct port of Flixel from AS3 to Javascript (HTML5/Canvas).  </p>    <p><a href="/misc/goto?guid=4958190169361008274"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="FlixelJS" border="0" alt="FlixelJS" src="https://simg.open-open.com/show/2363e7ba54d9f8c205463f7d47722e95.png" width="450" height="311" /></a>  <br />  </p>    <p><a href="/misc/goto?guid=4958190170106685348" target="_blank"><strong><span style="font-size:medium;">GameJS</span></strong></a></p>    <hr />    <p>GameJS is a library for writing 2D games or other interactive graphics applications for the HTML Canvas. GameJs already provides sprites, sprite groups (and collision detection between any of the two), font rendering, image handling, an event loop with keyboard/mouse support as well as resource preloading, AStar search, javascript server integration with RingoJs and more.</p>    <p><a href="/misc/goto?guid=4958190170855067249"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="GameJS" border="0" alt="GameJS" src="https://simg.open-open.com/show/c9a8b72568d038766c0f9a38a52244de.png" width="450" height="452" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190171604703598" target="_blank"><strong><span style="font-size:medium;">GammaJS</span></strong></a></p>    <hr />    <p>Gamma is a new Javascript library which can be used to create 2.5D platform games for a web browser using the power of HTML, JavaScript, CSS and WebGL.</p>    <p> <a href="/misc/goto?guid=4958190172335370125"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="GammaJS" border="0" alt="GammaJS" src="https://simg.open-open.com/show/2e414b8912de1f9533a64e9390d03e3c.png" width="450" height="279" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190173080335958" target="_blank"><strong><span style="font-size:medium;">gameQuery</span></strong></a></p>    <hr />    <p>gameQuery is a jQuery plug-in to help make javascript game development easier by adding some simple game-related classes. It’s still in an early stage of development and may change a lot in future versions. The project is hosted on GitHub (it was hosted on Google Code before) and a 推ter page where you can follow the daily progress of the development.</p>    <p><a href="https://simg.open-open.com/show/9dfadd2d3b6dbba86a9f6666faa4f90c.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="gameQuery" border="0" alt="gameQuery" src="https://simg.open-open.com/show/27a295b45e35110d00b79987ae1cc125.png" width="450" height="311" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190173835495184" target="_blank"><strong><span style="font-size:medium;">gTile: Javascript tile based game engine</span></strong></a></p>    <hr />    <p>gTile is a browser based game engine entirely in Javascript and DHTML. A two dimensional tile based view has been chosen for simplicity and accessibility. Game play is achieved through rich interactions and behaviors of game objects, rather than fancy graphics or animation.</p>    <p>The engine is perhaps best suited to creating adventure and roguelike style games, but may also be used to create 2D virtual world representations of communities and geographical locations.</p>    <p> <a href="https://simg.open-open.com/show/75cc364efc017cd9359b388aaab0ece0.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="gTile Javascript tile based game engine" border="0" alt="gTile Javascript tile based game engine" src="https://simg.open-open.com/show/f7b18a8cfa4817c8e9940aa8755438e7.png" width="450" height="292" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190174589066461" target="_blank"><strong><span style="font-size:medium;">Impact</span></strong></a></p>    <hr />    <p>Impact is a JavaScript Game Engine that allows you to develop HTML5 Games in no time. Games created with Impact require no browser plugins or any software installations – just a modern browser that supports the Canvas tag.</p>    <p> <a href="https://simg.open-open.com/show/8350509fda57262abdc37ae594131258.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="Impact" border="0" alt="Impact" src="https://simg.open-open.com/show/667a3f37bbd48b9c70e230c39015889f.png" width="450" height="199" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190175335819238" target="_blank"><strong><span style="font-size:medium;">Isogenic Engine</span></strong></a></p>    <hr />    <p>The Isogenic Game Engine is a project to create a fully-featured modern game engine written entirely in Javascript, running on all the latest web browsers and utilising either HTML Canvas or standard HTML elements as the draw space.</p>    <p><a href="https://simg.open-open.com/show/f6ac59b960c188d661ed64a02af7f7db.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="Isogenic Engine" border="0" alt="Isogenic Engine" src="https://simg.open-open.com/show/ebcde8ba5cfb9840afc156ab8a84787f.png" width="450" height="315" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190176092380089" target="_blank"><strong><span style="font-size:medium;">Javascript 2D Game Engine</span></strong></a></p>    <hr />    <p>The Javascript 2D Game Engine (for want of a more exciting name), is more or less just that. It’s a 2D engine I’ve developed, in javascript, with the primary purpose for creating games. It models shapes as rigid bodies, which can collide and be influenced by forces. Runga Kutta 4 is used to produce (fairly) stable integration for springs and and charge.</p>    <p>Now at version 4, the 2D engine now uses HTML 5′s canvas tag, and Google’s ExplorerCanvas to get it working in IE. The canvas is fairly widespread these days, so it should be supported fairly widely.</p>    <p><a href="https://simg.open-open.com/show/e507793ce40515bf9ee953f05ada77ba.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="Javascript 2D Game Engine" border="0" alt="Javascript 2D Game Engine" src="https://simg.open-open.com/show/00f4f9e44aa0bba9cd51fa1a71d7cdab.png" width="450" height="268" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190176849275830" target="_blank"><strong><span style="font-size:medium;">Javascript Game Engine with CSS</span></strong></a></p>    <hr />    <p>This is a free game engine developed for programming browser based games.  It uses the Javascript language and CSS (Cascading Style Sheets) to dress up the page.  They run pretty reliably together.  Use this engine to create your own game.  This project is intended for beginners, wanting to learn how to program video games.  Better if you’re a web designer that knows some CSS.</p>    <p><a href="https://simg.open-open.com/show/bb0c2191fa9b7cbfa44a2921cb0f8c81.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="Javascript Game Engine with CSS" border="0" alt="Javascript Game Engine with CSS" src="https://simg.open-open.com/show/fb01b25205b0dce11268e56721bee004.png" width="450" height="223" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190177594404384" target="_blank"><strong><span style="font-size:medium;">Javascript Gamelib:Javascript games programming library</span></strong></a></p>    <hr />    <p>Brent Silby has built upon the official 2.09 version of the Gamelib released by Scott. He says his improvements are:</p>    <ul>     <li>properties for sprites such as jumping, falling, fallspeed, etc. </li>     <li>tile handling for backgrounds and platforms. It’s basically the same as the sprite module, but (of course) the tiles are not updated on each cycle to save speed. "This is incomplete but I have used it in my games," he says. </li>     <li>the old V2.09 gamelib modules have been kept in a separate folder </li>    </ul>    <p> <a href="https://simg.open-open.com/show/49f48cea4ced49a67d9c61235302ea0f.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="Javascript Gamelib" border="0" alt="Javascript Gamelib" src="https://simg.open-open.com/show/3370fbf9491e4c91c8b58077027c5e72.png" width="450" height="343" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190178337324955" target="_blank"><strong><span style="font-size:medium;">jGen</span></strong></a></p>    <hr />    <p>jGen is a game engine build in JavaScript,</p>    <p> <a href="https://simg.open-open.com/show/d3caee9c74bccaadf10a0ef252e9386a.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="jGen" border="0" alt="jGen" src="https://simg.open-open.com/show/c0863cd49601093b127075f54b4122d2.png" width="450" height="268" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190179096455188" target="_blank"><strong><span style="font-size:medium;">jsGameSoup</span></strong></a></p>    <hr />    <p>jsGameSoup is a Free Software framework for making games for the web using Javascript and HTML5. Abstract away some of the complexity of developing Javascript games for multiple browsers. Currently runs under new versions of Firefox (Gecko), Safari/Chrome (WebKit), IE 6.0 and higher. Doesn’t depend on any proprietary technologies like Flash or Silverlight.</p>    <p> <a href="https://simg.open-open.com/show/67d398aab03ce4c40aaee15cd768fa8e.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="jsGameSoup" border="0" alt="jsGameSoup" src="https://simg.open-open.com/show/932469769cb4a4a5ee435ce32bcd17d8.png" width="450" height="163" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190179846826345" target="_blank"><strong><span style="font-size:medium;">js-verge</span></strong></a></p>    <hr />    <p>js-verge is a javascript game engine largely based on (and importing file assets from) the VERGE game engine.</p>    <p><a href="https://simg.open-open.com/show/5d9f5ef6989bd9972504ef55e1af429c.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="js-verge" border="0" alt="js-verge" src="https://simg.open-open.com/show/e68c9fe7b310d20b3bf6aacea345b147.png" width="450" height="414" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190180599230122" target="_blank"><strong><span style="font-size:medium;">Propulsion</span></strong></a></p>    <hr />    <p>Propulsion is a JavaScript game development framework for the HTML5 canvas element.Some features of Propulsion include:</p>    <ul>     <li>Support for any type of two dimensional game development. </li>     <li>Code patterns that are simple, yet robust and make sense for use with JavaScript. </li>     <li>A clear separation between different parts of the framework. </li>     <li>Support for collisions between any convex polygons. </li>    </ul>    <p>Propulsion is licensed under the MIT License.</p>    <p><a href="https://simg.open-open.com/show/456f3f27a42356ff073039e4efd65303.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="Propulsion" border="0" alt="Propulsion" src="https://simg.open-open.com/show/dc7d477c6d5a95c6a65330ff4b90405d.png" width="450" height="336" /></a> </p>    <p> </p>    <p><span style="font-size:medium;"><a href="/misc/goto?guid=4958190181348463704" target="_blank"><strong>Rosewood</strong></a></span></p>    <hr />    <p>Rosewood is a 2D Javascript gaming engine for all your browser-based gaming needs, without the flash.</p>    <p><a href="https://simg.open-open.com/show/57651071bd1396ccc2f7b83dcadc10e0.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="Rosewood" border="0" alt="Rosewood" src="https://simg.open-open.com/show/8c0aa08c14cfa4b530d98f05a616a835.png" width="450" height="264" /></a> </p>    <p> </p>    <p></p>    <p><a href="/misc/goto?guid=4958190164113322012" target="_blank"><strong><span style="font-size:medium;">ryanwilliams</span></strong></a></p>    <hr />    <p>ryanwilliams is a re-implementation of cocos2d for the Web using HTML5 and JavaScript.</p>    <p><a href="https://simg.open-open.com/show/363f5408c0d67af73ad59feeffeaa154.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="ryanwilliams" border="0" alt="ryanwilliams" src="https://simg.open-open.com/show/f35292da9810d0d6191f89881f0ee285.png" width="450" height="231" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190182805779431" target="_blank"><strong><span style="font-size:medium;">Sarien.net</span></strong></a></p>    <hr />    <p>Sarien.net interpreter is 2D Adventure JS game engine based GPL license.</p>    <p><a href="https://simg.open-open.com/show/a11fc99b9107f9aeba01743d63b2e6f6.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="Sarien.net interpreter is 2D Adventure" border="0" alt="Sarien.net interpreter is 2D Adventure" src="https://simg.open-open.com/show/db5311981fb817a766a49a0448a21276.png" width="450" height="234" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190183568410795" target="_blank"><strong><span style="font-size:medium;">The ClanFX Javascript Game Engine</span></strong></a></p>    <hr />    <p>clanfx is a 2D, tile-based Javascript game engine developed using Javascript and CSS. It currently works in Firefox, Epiphany and Opera browsers. Features include many animated sprites, spell effects, buildings, tiles/textures and basic game AI.</p>    <p><a href="https://simg.open-open.com/show/21354ee487c9fc7d249bccf0ac1185c1.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="The ClanFX Javascript Game Engine" border="0" alt="The ClanFX Javascript Game Engine" src="https://simg.open-open.com/show/e6b8e663f9044e2b3e25695c81e03169.png" width="450" height="248" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190184309513687" target="_blank"><strong><span style="font-size:medium;">The GMP Javascript Game Engine</span></strong></a></p>    <hr />    <p>GMP is a fast, free, javascript game engine, dual licenced under GPLv2 and MIT licenses. It’s small, simple, and easy to learn and use.</p>    <p><a href="https://simg.open-open.com/show/685883f6051c8c977644216ad9a3913b.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="The GMP Javascript Game Engine" border="0" alt="The GMP Javascript Game Engine" src="https://simg.open-open.com/show/00538bc1caa90e3ea56cedd87c497e69.png" width="450" height="362" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190185068181892" target="_blank"><strong><span style="font-size:medium;">The Render Engine</span></strong></a></p>    <hr />    <p>The Render Engine is a cross-browser, open source game engine written entirely in JavaScript. Designed from the ground up to be extremely flexible, it boasts an extensive API and uses the newest features of today’s modern browsers.</p>    <p><a href="https://simg.open-open.com/show/58a4f2c95bb2c8475bfc480a1b0a709b.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="The Render Engine" border="0" alt="The Render Engine" src="https://simg.open-open.com/show/15ddc1f3c5f024180aeca48462bc959a.png" width="450" height="266" /></a> </p>    <p> </p>    <h3><a href="/misc/goto?guid=4958190185826061894" target="_blank">Tom’s Halls – A JavaScript Platform Game Engine</a></h3>    <hr />    <p>Tom’s Halls is a JavaScript platform game engine. Version 3.0 of Tom’s Halls basically "completes" the game – literally, as there is now a game-won sequence. Game-wise the playing area has been increased to 41 screens, various new retro sprites make an appearance, and many of the existing screens have been tweaked and revised.</p>    <p><a href="https://simg.open-open.com/show/57211d1d236cfb84788ed4ae5cf61d40.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="Tom's Halls - A JavaScript Platform Game Engine" border="0" alt="Tom's Halls - A JavaScript Platform Game Engine" src="https://simg.open-open.com/show/090aa42f2d7aa43e90967c63cff5aea0.png" width="450" height="249" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190186575316956" target="_blank"><strong><span style="font-size:medium;">Unity3D</span></strong></a></p>    <hr />    <p>Unity 3 is a game development tool(JS background, include commercial  and free version) that has been designed to let you focus on creating amazing games.</p>    <p><a href="https://simg.open-open.com/show/cb93a8fcaaa4c055169f088d4e7735cb.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="Unity3D" border="0" alt="Unity3D" src="https://simg.open-open.com/show/2e4a408707ad1f15d9842378770af096.png" width="450" height="330" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190187320136978" target="_blank"><strong><span style="font-size:medium;">vegalib</span></strong></a></p>    <hr />    <p>Vegalib is a library and other related tools for creating games using Vexi. <br /> <a href="https://simg.open-open.com/show/22d0df32a3dd762955983d24b685750c.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="vegalib" border="0" alt="vegalib" src="https://simg.open-open.com/show/e8ef2f14cfe1860783d9e8b4ac4634a8.png" width="450" height="298" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190188083695437" target="_blank"><strong><span style="font-size:medium;">xc.js</span></strong></a></p>    <hr />    <p><strong>xc.js</strong> is a framework for HTML Canvas games in Javascript. It’s simple and fun to use and you can even try it out right here in your browser.</p>    <p>But that’s not all. <strong>xc.js</strong> also runs on other platforms. You can write your games in Javascript and run them in all sorts of cool places (like on your phone!).</p>    <p><a href="https://simg.open-open.com/show/ea0bb76d7452eae779fbbd95ef5b4314.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="xc.js is a framework for HTML Canvas games in Javascript" border="0" alt="xc.js is a framework for HTML Canvas games in Javascript" src="https://simg.open-open.com/show/0a614c0acd170187961923b1b80c4223.png" width="450" height="298" /></a> </p>    <p> </p>    <h2 style="border-bottom:#666666 1px solid;border-left:#666666 1px solid;line-height:35px;background-color:#468ed9;text-indent:6px;color:#ffffff;font-size:21px;border-top:#666666 1px solid;border-right:#666666 1px solid;">2. Some 3D JavaScript Engine</h2>    <p><a href="/misc/goto?guid=4958190188834133697" target="_blank"><strong><span style="font-size:medium;">C3DL</span></strong></a></p>    <hr />    <p>The Canvas 3D JS Libary (C3DL) is a JavaScript library that will make it easier to write 3D applications using WebGL. It provides a set of math, scene, and 3d object classes that makes WebGL more accessible for developers that want to develop 3D content in browser but do not want to have to deal in depth with the 3D math needed to make it work.</p>    <p><a href="https://simg.open-open.com/show/122f332ada2fea0368e7e48eb21f6a87.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="C3DL" border="0" alt="C3DL" src="https://simg.open-open.com/show/dac59264fca519fa53847711324520e7.png" width="450" height="462" /></a> </p>    <p> </p>    <p></p>    <p><a href="/misc/goto?guid=4958190189585364453" target="_blank"><strong><span style="font-size:medium;">CopperLicht? – fast WebGL JavaScript 3D Engine</span></strong></a></p>    <hr />    <p>CopperLicht is a JavaScript 3D engine for creating games and 3d applications in the webbrowser. It uses the WebGL canvas supported by modern browsers and is able to render hardware accelerated 3d graphics without any plugins.</p>    <p><a href="https://simg.open-open.com/show/d940197397a92c269efdeeae29370624.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="CopperLicht- fast WebGL JavaScript 3D Engine" border="0" alt="CopperLicht- fast WebGL JavaScript 3D Engine" src="https://simg.open-open.com/show/0d65f26e1c52593b31a91803fc86cb94.png" width="450" height="291" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190190334365771" target="_blank"><strong><span style="font-size:medium;">GLGE</span></strong></a></p>    <hr />    <p>GLGE is a javascript library intended to ease the use of WebGL; which is basically a native browser javascript API giving direct access to openGL ES2, allowing for the use of hardware accelerated 2D/3D applications without having to download any plugins.</p>    <p>The aim of GLGE is to mask the involved nature of WebGL from the web developer, who can then spend his/her time creating richer content for the web.</p>    <p> <a href="https://simg.open-open.com/show/1f8a9772bf76b472f902787d063f9dc5.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="GLGE" border="0" alt="GLGE" src="https://simg.open-open.com/show/433dcbdbab73a5cfc42604ca3a0ffb61.png" width="450" height="285" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190191099879683" target="_blank"><strong><span style="font-size:medium;">JS3D (alpha): The 3d Javascript Graphics Layer</span></strong></a></p>    <hr />    <p>JS3D is a library which allows you to have interactive 3d objects on your website, such as the spinning cube at the top of the page. The 3d effect is created using actual text, try selecting the text on the cube above! This is different from the approach of, for instance, these folks, who have made a better quality renderer, which is much more processor intensive. To see more functionality scroll to the demo section.</p>    <p><a href="https://simg.open-open.com/show/27196e125ddc4c4285dbf6939d811da4.png"><img style="border-right-width:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="JS3D (alpha) The 3d Javascript Graphics Layer" border="0" alt="JS3D (alpha) The 3d Javascript Graphics Layer" src="https://simg.open-open.com/show/e9b3a3af51c9e000c844a5b8da5b1fd7.png" width="313" height="490" /></a> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958190191851809026" target="_blank"><strong><span style="font-size:medium;">O3D</span></strong></a></p>    <hr />    <p>WebGL implementation of O3D is an open-source JavaScript API for creating rich, interactive 3D applications in the browser. Originally built as a browser plug-in, this new implementation of O3D is a JavaScript library implemented on top of WebGL.</p>    <p> </p>    <p><a href="/misc/goto?guid=4958190192604455683" target="_blank"><strong><span style="font-size:medium;">Pre3d: a JavaScript 3d rendering engine</span></strong></a></p>    <hr />    <p>Pre3d is a Javascript 3D rendering engine.</p>    <p> </p>    <p><a href="/misc/goto?guid=4958190193358656178" target="_blank"><strong><span style="font-size:medium;">Sandy 3D</span></strong></a></p>    <hr />    <p>Sandy is a Flash 3D engine, available in 3 versions: AS2, AS3 and haXe(to JS).</p>    <p> </p>    <p><a href="/misc/goto?guid=4958190194120954523" target="_blank"><strong><span style="font-size:medium;">SpiderGL</span></strong></a></p>    <hr />    <p>SpiderGL is a JavaScript 3D Graphics library which relies on WebGL for realtime rendering.</p>    <p>SpiderGL provides typical structures and algorithms for realtime rendering to developers of 3D graphics web application, without forcing them to comply with some specific paradigm (i.e. it is not a scene graph) nor preventing low level access to the underlying WebGL graphics layer.</p>    <p> </p>    <p><a href="/misc/goto?guid=4958190194857613405" target="_blank"><strong><span style="font-size:medium;">three.js</span></strong></a></p>    <hr /> three.js is a javascript 3D engine. The aim of this project is to create a lightweight 3D engine with a very low level of abstraction (aka for dummies). Currently the examples are the documentation. Be aware that the API may change from revision to revision breaking backwards compatibility.    <p> </p>    <h2 style="border-bottom:#666666 1px solid;border-left:#666666 1px solid;line-height:35px;background-color:#468ed9;text-indent:6px;color:#ffffff;font-size:21px;border-top:#666666 1px solid;border-right:#666666 1px solid;">3. JavaScript physics engine</h2>    <p><a href="/misc/goto?guid=4958185307304423879" target="_blank"><strong><span style="font-size:medium;">Box2DFlash</span></strong> </a></p>    <hr />    <p>This is a port of <i>Box2DFlash</i> 2.1a to JavaScript . I developed an ActionScript 3 -to- JavaScript converter to generate the code.</p>    <p>There already exists a port to JavaScript called <i>Box2dJs</i>, but it’s not up-to-date and you have to import a big amount of JavaScript files in every project, whereas my version is stored in a single file.</p>    <p> </p>    <h2 style="border-bottom:#666666 1px solid;border-left:#666666 1px solid;line-height:35px;background-color:#468ed9;text-indent:6px;color:#ffffff;font-size:21px;border-top:#666666 1px solid;border-right:#666666 1px solid;">4. Animation JavaScript Framework</h2>    <p><a href="/misc/goto?guid=4958190196291958672" target="_blank"><strong><span style="font-size:medium;">sprite.js</span></strong></a></p>    <hr />    <p>The sprite.js framework lets you create animations and games using sprites in an efficient way. The goal is to have common framework for Desktop and mobile browsers.</p>    <p>sprite.js has been tested on Chromium, Firefox, Android emulator and Opera.</p>    <p> </p>    <h2 style="border-bottom:#666666 1px solid;border-left:#666666 1px solid;line-height:35px;background-color:#468ed9;text-indent:6px;color:#ffffff;font-size:21px;border-top:#666666 1px solid;border-right:#666666 1px solid;">5. Sound JavaScript library</h2>    <p><a href="/misc/goto?guid=4958190197037670392" target="_blank"><strong><span style="font-size:medium;">SoundManager</span></strong></a></p>    <hr />    <p>Using HTML5 and Flash, SoundManager 2 provides reliable cross-platform audio under a single API</p>    <div class="entry">     <li>100% Flash-free MP3 + MP4/AAC where supported. Works on iPad, iPhone iOS 4 </li>     <li>Seamless flash fallback for MP3/MP4 content, if needed </li>     <li>HTML5/Flash API switching is transparent, handled internally </li>     <li>WAV + OGG playback possible via HTML5, if supported </li>     <li>See useHTML5Audio for implementation details </li>     <li>This browser’s <em><HTML5></em> vs. <em>Flash</em> support (best guess): <p> </p> <h2 style="border-bottom:#666666 1px solid;border-left:#666666 1px solid;line-height:35px;background-color:#468ed9;text-indent:6px;color:#ffffff;font-size:21px;border-top:#666666 1px solid;border-right:#666666 1px solid;">6. Canvas JavaScript library</h2> <p><a href="/misc/goto?guid=4958190197781919475" target="_blank"><strong><span style="font-size:medium;">Artisan JS</span></strong></a> </p>      <hr /> <p>ArtisanJS is a JavaScript library that aims to make in-browser drawing very, very easy.</p> <p> </p> <p><a href="/misc/goto?guid=4958190198520468948" target="_blank"><strong><span style="font-size:medium;">burst</span></strong></a></p>      <hr /> <p>Burst is a javascript vector animation engine for the HTML5 Canvas supporting SVGs, Blender3D objects, timelines, easing, command chaining and callbacks</p> <p> </p> <p><a href="/misc/goto?guid=4958190199265852622" target="_blank"><strong><span style="font-size:medium;">CAAT</span></strong></a></p>      <hr /> <p>CAAT: Canvas Advanced Animation Tookit CAAT in essence is a multi-instance director-based Scene graph manager.</p> <p> </p> <p><a href="/misc/goto?guid=4958190200018663229" target="_blank"><strong><span style="font-size:medium;">canto-js</span></strong></a></p>      <hr /> <p>canto.js is a small JavaScript library that improves the HTML5 Canvas drawing API to support features such as:</p>      <ul>       <li>method chaining </li>       <li>relative coordinates </li>       <li>polylines </li>       <li>SVG path commands </li>       <li>turtle graphics </li>       <li>easier specification of drawing attributes </li>      </ul> <p> </p> <p><a href="/misc/goto?guid=4958190200751191907" target="_blank"><strong><span style="font-size:medium;">CAKE – Canvas Animation Kit Experiment</span></strong></a></p>      <hr /> <p>CAKE is a JavaScript scene graph library for the HTML5 canvas tag. You could think of it as SVG sans the XML and not be too far off.</p> <p> </p> <p><a href="/misc/goto?guid=4958190201502994337" target="_blank"><strong><span style="font-size:medium;">CamanJS</span></strong></a></p>      <hr /> <p>CamanJS is an attempt at providing a simple to use interface for dynamically manipulating images completely in JS. It strives to provide much of the basic functionality you would find in something like Photoshop. By this I mean, image contrast, brightness, levels, saturation, etc.</p> <p> </p> <p><a href="/misc/goto?guid=4958190202240403843" target="_blank"><strong><span style="font-size:medium;">CanvasContext2DWrapper</span></strong></a></p>      <hr /> <p>Wrapper for HTML5 Canvas Context 2D properties and methods, enabling chaining.</p> <p>It’s intended to be simple, small and not add new functionalities besides method chaining, it doesn’t overwrite the native prototypes/objects and can be used interchangeably with native Context2D methods/properties, works just as a wrapper to native calls.</p> <p> </p> <p><a href="/misc/goto?guid=4958190202981307682" target="_blank"><strong><span style="font-size:medium;">canvg</span></strong></a></p>      <hr /> <p>canvg is a Javascript SVG parser and renderer. It takes a URL to a SVG file or the text of an SVG file, parses it in JavaScript, and renders the result on a Canvas element. The rendering speed of the examples is about as fast as native SVG.</p> <p> </p> <p><a href="/misc/goto?guid=4958190203729022834" target="_blank"><strong><span style="font-size:medium;">doodle.js</span></strong></a></p>      <hr /> Doodle-js is An Animation Library for JavaScript. Some of the features:      <ul>       <li>Use the Canvas drawing API with sprites and a scene graph. </li>       <li>Event handling and dispatch for objects. </li>       <li>Nodes maintain transforms, bounds, and other useful properties. </li>       <li>If you’re coming from ActionScript 3, you’ll feel right at home! </li>      </ul> <p> </p> <p><a href="/misc/goto?guid=4958190204468854134" target="_blank"><strong><span style="font-size:medium;">easel.js</span></strong></a></p>      <hr /> <p>The new Canvas element in HTML5 is powerful, but it can be difficult to work with. It has no internal concept of discrete display elements, so you are required to manage updates manually. The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.</p> <p> </p> <p><a href="/misc/goto?guid=4958190205219421983" target="_blank"><strong><span style="font-size:medium;">gury.js</span></strong></a></p>      <hr /> <p>gury.js is a jQuery inspired canvas utility library.</p> <p> </p> <p><a href="/misc/goto?guid=4958190205974521855" target="_blank"><strong><span style="font-size:medium;">fabric.js</span></strong></a></p>      <hr /> <p>Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. It is also an SVG-to-canvas parser.</p> <p>Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes — rectangles, circles, ellipses, polygons, or more complex shapes consisting of hundreds or thousands of simple paths. You can then scale, move, and rotate these objects with the mouse; modify their properties — color, transparency, z-index, etc. You can also manipulate these objects altogether — grouping them with a simple mouse selection.</p> <p> </p> <p><a href="/misc/goto?guid=4958190206706221296" target="_blank"><strong><span style="font-size:medium;">HTML 5 Canvas Library</span></strong></a></p>      <hr /> <p>A basic HTML 5 canvas drawing library for those familiar with the java.awt.Graphics class in Java. It also comes with a JavaScript implementation of the game Breakout to demonstrate using the library.</p> <p> </p> <p><a href="/misc/goto?guid=4958190207452358722" target="_blank"><strong><span style="font-size:medium;">layered-canvas-library</span></strong></a></p>      <hr /> <p>The Layered Canvas Library (LCL) is a javascript library that helps manage objects on the Canvas element. The LCL implements a two tier layer manager that creates and contains items within it. The layer manager attaches mouse events to each item contained, and allows the user to define handlers for each event, per item.</p> <p>The layer manager also allows for each layer contained to be promoted, or demoted over another layer. The layer manager, and each layer, and item contained, is defined with a draw function. The draw function executes user defined code to draw the item, layer, or each layer contained consecutively.</p> <p> </p> <p><a href="/misc/goto?guid=4958190208193646736" target="_blank"><strong><span style="font-size:medium;">MooTools Canvas Library</span></strong></a></p>      <hr /> <p>This library provides functionality to manage and interact with the content of a html5 canvas element. It emulates layers and items that can be manipulated and managed and provides mouse-events to the items.</p> <p>This library is inspired by Michael Camden’s layered-canvas-library but I made this one a little more compact, skipped some features, added some and tried to streamline the way the lib is interacted with. It is built utilizing many features of the MooTools javascript framework which is responsible for reduced filesize, great OOP and flexible events.</p> <p> </p> <p><a href="/misc/goto?guid=4958190208938298893" target="_blank"><strong><span style="font-size:medium;">Pixastic</span></strong></a></p>      <hr /> <p>Pixastic is a JavaScript library which allows you to perform a variety of operations, filters and fancy effects on images using just a bit of JavaScript.</p> <p> </p> <p><a href="/misc/goto?guid=4958190209686600862" target="_blank"><strong><span style="font-size:medium;">processing.js</span></strong></a></p>      <hr /> <p>Processing.js is the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins.</p> <p>You write code using the Processing language, include it in your web page, and Processing.js does the rest. It’s not magic, but almost.</p> <p> </p> <p><a href="/misc/goto?guid=4958190210435298611" target="_blank"><strong><span style="font-size:medium;">Rapha?l</span></strong></a></p>      <hr /> <p>Rapha?l is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.</p> <p> </p> <p><strong><a href="/misc/goto?guid=4958190211179255326" target="_blank"><span style="font-size:medium;">Stackblur</span></a></strong></p>      <hr /> <p>Stackblur is a Javascript / Canvas based implementation library.</p> <p> </p> <p><a href="/misc/goto?guid=4958190211925780277" target="_blank"><strong><span style="font-size:medium;">toxiclibsjs</span></strong></a></p>      <hr /> <p>Toxiclibs.js is a javascript port of Karsten Schmidt’s Toxiclibs for Java and Processing. Toxiclibs.js works great with the Processing.js visualization library for but is not dependent on it. It can be used with other libraries such as Raphael.js, Three.js or by itself.</p> <p> </p> <p><a href="/misc/goto?guid=4958190212664918053" target="_blank"><strong><span style="font-size:medium;">Unveil.js</span></strong></a></p>      <hr /> <p>Unveil is a data exploration and visualization toolkit that utilizes data-driven software design.</p> <p> </p> <h2 style="border-bottom:#666666 1px solid;border-left:#666666 1px solid;line-height:35px;background-color:#468ed9;text-indent:6px;color:#ffffff;font-size:21px;border-top:#666666 1px solid;border-right:#666666 1px solid;">7. WebGL</h2> <p><a href="/misc/goto?guid=4958190213408320975" target="_blank"><strong><span style="font-size:medium;">WebGLU</span></strong></a></p>      <hr /> WebGLU is both a set of low-level utilities and a high-level engine for developing WebGL based applications. WebGLU is designed such that a developer can focus on the end result with a minimum of fuss and code, but doesn’t hand hold developers who want more control. This is achieved by exposing the raw GL object and also many lower-level functions for working with it and the WebGL API.<p> </p> <h2 style="border-bottom:#666666 1px solid;border-left:#666666 1px solid;line-height:35px;background-color:#468ed9;text-indent:6px;color:#ffffff;font-size:21px;border-top:#666666 1px solid;border-right:#666666 1px solid;">8. Color</h2> <p><a href="/misc/goto?guid=4958190214167826516" target="_blank"><strong><span style="font-size:medium;">color.js</span></strong></a></p>      <hr /> <p>color.js can be used in any ECMAScript environment as it does not make use of the DOM. color.js is very useful on the server-side and the client-side, The color.js CSS module defines all of the standard CSS colors for use in color.js.</p> <p> </p> <h2 style="border-bottom:#666666 1px solid;border-left:#666666 1px solid;line-height:35px;background-color:#468ed9;text-indent:6px;color:#ffffff;font-size:21px;border-top:#666666 1px solid;border-right:#666666 1px solid;">9. Math</h2> <p><a href="/misc/goto?guid=4958190214923381669" target="_blank"><strong><span style="font-size:medium;">Sylvester</span></strong></a></p>      <hr /> <p>Sylvester is a JavaScript library designed to let you do mathematics with vectors and matrices without having to write lots of loops and throw piles of arrays around.</p> <p>It includes classes for modelling vectors and matrices in any number of dimensions, and for modelling infinite lines and planes in 3-dimensional space. It lets you write object-oriented easy-to-read code that mirrors the maths it represents.</p> </li>    </div>