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.
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 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
How to Choose Colours Procedurally (Algorithms) » devmag.org.za Changing the colours of art can be a great way to increase the amount of content in your game, and add variety and richness. It is relatively easy to implement. What is not always as easy is to get a set of colours that looks nice. This article gives some ideas for choosing colour palettes that look nice. A few things about colour Colour is surprisingly complex. Although you don’t need to know all about the physics, biology, and psychology of colour vision, it is useful to have some background information (which you can find references to at the end of this article). For palette choosing, there are a few important points. Digital colour theory differs considerably from theories based on pigments (or chemicals, or metals in crystals). Vector distances in RGB and many other colour models don’t correspond to differences in perception. Edit: Turns out I have fallen prey to the very thing I talk about. Brightness These greys are equally spaced. Hue differentiation. Colour harmony theory. 1. 2. 3.
Handling select box (drop-down list) in a PHP form This tutorial will show you how to add select boxes and multi-select boxes to a form, how to retrieve the input data from them, how to validate the data, and how to take different actions depending on the input. Select box Let’s look at a new input: a “select” box, also known as a “drop-down” or “pull-down” box. A select box contains one or more “options”. Each option has a “value”, just like other inputs, and also a string of text between the option tags. The selected value from this input was can be read with the standard $_POST array just like a text input and validated to make sure the user selected Male or Female. It’s always a good idea to have a “blank” option as the first option in your select box. ( For a generic, easy to use form validation script, see PHP Form Validation Script ) Multi-select Suppose you want to present a select box that allows the user to select multiple options. Here is how to create such an input in HTML: Please note the similarity to a checkbox group.