2008 - A Year of Awesome JavaScript Games It's been a great year for JavaScript games. It looks like DHTML and canvas-based games are now capable of taking over some of the areas where Flash used to dominate. Many people have been building remakes of classic video games like Super Mario, Pac-Man, Breakout, Space Invaders, Bomberman or T&C Surf Designs. Others took the old arcade traditions and applied them to their own ideas, giving us cool games like Matt Hackett's Spacius, Mark Wilcox's Invaders from Mars, VertigoProject's RedLine Racing or a twist on the classic Tetris game. We've even seen some roleplaying games, like the very cool Tombs of Asciiroth or the more graphical CanvasQuest by Andrew Wooldridge and the Prototype based ProtoRPG by Pierre Chassaing. 2008 also saw a few libraries for JavaScript / DHTML game development pop up, most notably GameJS (pictured to the left with its demo game, Jetris) and GameQuery, the latter being an extension to the popular jQuery library. Demos Emulation Graphics Audio Odds and ends
Canvas tutorial <canvas> is an HTML element which can be used to draw graphics via scripting (usually JavaScript). This can, for instance, be used to draw graphs, combine photos, or create simple (and not so simple) animations. The images on this page show examples of <canvas> implementations which will be created in this tutorial. This tutorial describes how to use the <canvas> element to draw 2D graphics, starting with the basics. First introduced in WebKit by Apple for the OS X Dashboard, <canvas> has since been implemented in browsers. Before you start Using the <canvas> element is not very difficult, but you do need a basic understanding of HTML and JavaScript. In this tutorial See also A note to contributors Due to an unfortunate technical error that occurred the week of June 17, 2013, we lost the history of this tutorial, including attributions to all past contributors to its content.
Fabric.js Javascript Canvas Library Preparing Yourself for Modern JavaScript Development There is a lot going on in the JavaScript world these days, both in and out of the browser. Talk about script loaders, client side MVC frameworks, minifiers, AMD, Common.js, Coffeescript, can quickly get your head spinning. And for those people who are completely immersed in that world, it can be easy to forget that the vast majority of JavaScript developers today haven’t heard of any of these tools, and in fact, they likely aren’t even equipped to try these tools. This post is going to be an attempt to simply address some of the low hanging fruit out there, and try to bring together a few different concepts that a developer should understand before they go out and try to tackle something like Backbone.js or Ember.js. Once you understand most of the concepts in this post, then you can go out and approach more advanced JavaScript topics with a bit of confidence. Modules It is a big name, but the implementation is very simple: Namespaces This could also be written like this: Wrapping It Up
lipka/piecon GreenSock for Beginners: a Web Animation Tutorial (Part 1) My aim in this article is to give you a thorough introduction to GreenSock, also known as GSAP (GreenSock Animation Platform), a super performant, professional-grade HTML5 animation engine for the modern web. This is the fourth article in the series Beyond CSS: Dynamic DOM Animation Libraries. Here’s what I covered in the past issues: Animating the DOM with Anime.js touches on how to make the best use of animation on the web and when you could consider using a JavaScript animation library instead of CSS-only animation. It then focuses on Anime.js, a free and lightweight JavaScript animation libraryFun Animation Effects with KUTE.js introduces you to KUTE.js, a free and feature-rich JavaScript animation libraryMake Your Website Interactive and Fun with Velocity.js (No jQuery) shows you how to use Velocity.js, an open source, robust free animation library, to create performant web animations. GSAP has too many features to fit in one article. In more detail: Core GreenSock Tools License
JQuery for Beginners Download source - 858 KB Introduction jQuery is a JavaScript library which has a wide range of actions such as event handling, animation, HTML document traversing, and AJAX interaction for web development. jQuery simplifies JavaScript programming. $(document).ready Method The document ready event executes already when the HTML-Document is loaded and the DOM is ready, even if all the graphics are not loaded yet. $(document).ready(function() { alert("document is ready"); }); Selectors jQuery provides a simple way to select single element or group of elements. Sliding Effect jQuery provides three methods to show or hide elements in sliding behavior. SlideDown(speed, callback): This method gradually increases the height of the elements, from hidden to visible. All three methods has "Speed" and "callback" parameters. slow normal fast milliseconds, e.g., 100, 500, 1000, etc. The callback parameter is the name of a function that executes after the function completes. Sliding Example Fade Effect History
GSAP, the standard for JavaScript HTML5 animation | GreenSock