Game Development with Javascript and the canvas element - Introduction

JavaScript General Development tutorials

Get started with JavaScript game development using the new canvas element. This article introduces the canvas element, and goes on to show how to develop a comple game.

Related Tutorials

OOP in JavaScript: Introduction Javascript tutorial
An introduction to Object Oriented Programming in Javascript. This example creates a small user control that can be used repeatedly and independantly on the same web page.

Ajax: Tools of the trade
Ajax has effectively launched a new era in JavaScript development, bringing with it a plethora of robust tools for the JavaScript programmer. Take a quick tour of the tools you could be using for JS development, debugging, testing, and more. You'll never code JavaScript in just a text editor again.

An introduction to JavaScript
An introduction to JavaScript, how it was born, what is it good for, different types and versions of this scripting language, and the compatibility between it and the browsers.

Tutorial: Introduction to JavaScript
JavaScript is an easy-to-learn programming language which can be built into Web pages, so that it executes from within the browser rather than on the web server. Intranets especially can leverage the power of JavaScript to create "smart" Web pages which can process data and interact with the user. In this introduction we concisely look at the main programming points of the JavaScript language.

Ajax with JQuery - An Introduction with jQuery
jQuery is a well-known and famous lightweight, fast and concise JavaScript Library. jQuery simplifies various task for us like HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is great library to reduce our JavaScript coding so they quote "jQuery: The Write Less, Do More".

Creating Simple Animations
This is a basic JavaScript tutorial. I will describe how to move an element around the page using a simple animation script. The element you move around the page can be anything from an image to a paragraph.

Accessible JavaScripting From The Ground Up
As great as it is, JavaScript is probably one of the most commonly abused and overused technologies in web development. In this article, I hope to help you implement JavaScript without tears and guide you in the basics of good scripting practices.

Introduction to JavaScript
We are going to learn how to use the JavaScript language along with HTML to develop customized and more responsive web pages.

Introducing the JavaScript DOM
What is the Document Object Model, and why is it useful? This article gives you a gentle introduction to this powerful JavaScript feature.

Create a Minesweeper game
Learn how to create a simple Minesweeper game by using Javascript and CSS only.

Getting Started with the CAKE JavScript library
Learn how to make your first HTML5 canvas web application with the CAKE JavaScript library. Demo and source code included.

Introduction to Functions
A function is an assignment that JavaScript can take care of for you. It is a technique used to isolate a group of instructional code so that other parts of the application can depend on it to provide them with a reliable result. There are two main categories of functions you will be using in JavaScript: those that have already been created for you and those you create in your code.

Introduction to arrays, sorting arrays
An introduction to JavaScript arrays, how to create and access arrays. Also shows you how to use the sort() method to sort both string and number arrays.

Learning Javascript - Keeping Markup Clean
Like many front end developers I've come to Javascript late. Of course I could go and grab one of the many Javascript libraries out there. But I'm making an effort to learn Javascript.

Simple Draggable Element Persistence with jQuery
In this tutorial I will show you how to easily drag an element and make it stick, even after a page reload, by grabbing and storing its X and Y coordinates.

Assign and remove a click handler from an element with jQuery
Click handlers can be assigned to elements easily with jQuery so when the element is clicked some particular action is run. This post looks at how to add a click handler to an element, explains how adding multiple click handlers will fire all of them, and then how to remove the click events.

jQuery from Noob to Ninja: Selectors and Traversing
If you want to use jQuery, you won't come far without learning how to access elements. In this tutorial I will show how to access an element, and access child nodes. Also we will be comparing this to the oldschool javascript way of doing things.

Javascript Image Gallery Using Mootools
This free image gallery based on javascript is a quick & easy solution. Implementing the demo doesn’t requre knowledge of any javascript. In this article, I’ll explain and breakdown the javascript that runs the image gallery using the javascript framework Mootools.

Looking inside DOM page elements
This JavaScript article shows you how to access the contents and attributes of a DOM element, and how to move around the DOM tree so that you can access all the content in a Web page.

Introduction to Server-side JavaScript
Although rich web sites and applications have become the norm in recent years, they can still be difficult to develop, maintain, and expand. Many of the challenges stem from the schism between client and server components. The Jaxer server, developed by Aptana, is an open source Ajax web server for building rich web pages and applications in JavaScript. Writing code for Jaxer is the focus of this article.

Redirection in javascript
Javascript also gives us facility to redirect the user to a webpage or website. Also it's easy to learn redirection in javascript. It is just one line code that needed to embed in a function of javascript to redirect the user.

Learning Javascript - Creating Content
Using Javascript and the DOM you can create content on the fly. You can also make sure that if Javascript is turned off things won't go wrong.

Introduction to AJAX
This tutorial will cover the creation of a simple forms to handle mailing list management. The basic parts are the HTML forms and a javascript submission to submit the form.

Printing
In this javascript tutorial you will learn how to print using javascript with print preview window using javascript. In this tutorial we will also look how to print the whole web page using javascript and how to print the specific area of a web page using javascript.

Changing Select element content on the fly
Changing a select element's content on the fly is a powerful feature of JavaScript that's just as practical. It forms the basis of implementing inter-dependant select menus, where the selection of one menu changes the contents of another. In this tutorial, lets look at how this is done, and also, how to create a 2 level interdependent select list using the technique.

Arrays
Arrays are a fundamental part of most programming languages and scripts. Arrays are simply an ordered stack of data items. Each element of the array can store its own data, just like a variable, thus you can say arrays are collections of variables. Items can be added and removed from the array at any time, also their value can be changed easily. One other feature of the arrays, which is specific to JavaScript is that the elements in the array can be of different types.

Functions
Sometimes instead of just adding your javascript to the page and having the browser perform the tasks as soon as the script is read, you might want your javascript to be performed only upon the detection of a certain event. A function is a block of code which can be called from any point in a script after it has been declared. It is basically a compartmentalized JavaScript designed to accomplish a single task.

Creating interactive alert, confirm, and prompt boxes using JavaScript
Learn how to create them interactive dialog boxes, that is. With JavaScript, you can pump into your pages some life by using JavaScript controlled boxes.

Writing Your Own JavaScript Functions
In this article we're going to focus on a programming concept--writing your own functions. Knowing how to write your own functions will improve almost any JavaScript you create. In fact, you'll see how custom-made functions can enhance several of the JavaScript tricks you've already learned.

Five Ways to Spice Up Your Site with jQuery
Javascript frameworks aren't just a path to AJAX without understanding XMLHttpRequest - mature libraries like jQuery are being across the board to improve usability, enhance accessibility and open doors to features you never thought were possible. With its inclusion in the ASP.NET platform, jQuery is now an accepted standard in all web development. In this tutorial, I'll show you five quick tips for spicing up your site, often without a single change to your existing code.

External JavaScript and PHP
External JavaScript can reference not just .js files, but PHP scripts as well. See how this is done, and the wonderful possibilities linking PHP to JavaScript bring.

JavaScript Forms and Frames
This articles discusses two aspects of JavaScript: working with HTML forms and manipulating frames. It also present a simple but effective personalized greeting script and a script used for submitting and HTML form. Main topics covered: Personalized greetings, Submitting an HTML form using JavaScript, Input Validation, and Frames and JavaScript.

Get the mouse co-ordinates with jQuery when an element is clicked
This post looks at how to get the mouse co-ordinates when an element is clicked.

JavaScript Basics
Javascript is a scripting language that will allow you to add real programming to your webpages.

JavaScript primer
So what is JavaScript? Is it Java? What does it do? Is it difficult to learn? These questions will all be answered in this tutorial, and more.

Javascript Expanding Menu
Learn how to show and hide content in realtime using javascript.

JavaScript Reference
Comprehensive listing of JavaScript objects, properties, and methods. Also includes explanations and examples.

External JavaScript
Post one JavaScript to your site and it can come up on multiple pages! This is how to do it.

JavaScript string
In this tutorial you will learn how to use and manipulate strings in JavaScript.

Game Development with Javascript and the canvas element - Introduction

View Tutorial