Unknown Kadath

Posts Tagged “javascript”

Another HTML Game Using Only Web Standards

Posted on November 5th, 2013 by James Litten

Another HTML Game Using Only Web Standards CLICK HERE TO PLAY THE GAME Due to the interest in the previous post, I have created yet another slightly more complex game using only standard HTML, CSS and Javascript. There is a single CSS 3.0 3D transform to give a sense of perspective to the DIV containing […]

An HTML Game Using Only Web Standards

Posted on October 18th, 2013 by James Litten

An HTML Game Using Only Web Standards CLICK HERE TO PLAY THE GAME Modern web browsers are fast and ubiquitous. As such, they have had to embrace standards that make web sites look and perform identically on all of them. It is a web developer’s dream come true, though we still find plenty to complain […]

HTML5 Web Storage, Using localStorage and sessionStorage Objects

Posted on August 3rd, 2010 by James Litten

Web storage started as part of the HTML5 spec for storing key-value pair data in web clients. It now has its own spec. There are other plans for storing databases that are structured and can be queried using SQL which are handled in a separate spec . Seeing the need for storing more key-value pair […]

Using Multiple HTML5 Canvases as Layers

Posted on July 26th, 2010 by James Litten

DEMO Here’s our finished canvas with full source code. The reasons why you would want to layer multiple canvases on top of each other are many but they all have a common root. There is a requirement in the W3C definition of the 2d context… There is only one CanvasRenderingContext2D object per canvas, so calling […]

IE Compatible Canvas Drag and Drop With jQuery and ExCanvas

Posted on July 20th, 2010 by James Litten

This post is about making drag and drop work on a canvas in Internet Explorer versions 6, 7 and 8 . The details of how to drag and drop on the canvas can be found in this previous post. How to Drag and Drop on an HTML5 Canvas To modify our canvas in order to […]

Slicing Spritemaps and Parallax Scrolling on the HTML5 Canvas

Posted on July 16th, 2010 by James Litten

In this example we will look at slicing images with the drawImage() method of a 2d canvas context. We’ll use two images that are larger than the canvas to create a parallax scrolling effect that is common in 2d games and also another image as a spritemap consisting of three sprites to show how to […]

Graphing Data in the HTML5 Canvas Element Part III

Posted on July 15th, 2010 by James Litten

This is post 3 of a multipart series of posts. All of the code to try this example for yourself is included here but much of it is explained in the previous posts. The first and second parts can be found here. Graphing Data in the HTML5 Canvas Element Part I Graphing Data in the […]

Make a Maze Game on an HTML5 Canvas

Posted on July 11th, 2010 by James Litten

UPDATE: 8-28-2013 This post is expanded on in the new post ‘Build Responsive Games For Mobile Phones, Tablets and Computers with HTML5 Canvas’ One of the best ways to learn how to program in any language is to make a game and then change the code to create different variations on the game. I learned […]

Understanding save() and restore() for the Canvas Context

Posted on July 10th, 2010 by James Litten

At first, I had a hard time grasping the purpose and use of the save() and restore() methods of the canvas’ 2d context. It’s really very simple and here are some examples that can help you understand it better. Let’s look at an official definition of save() and restore() Each context maintains a stack of […]

How to Drag and Drop on an HTML5 Canvas

Posted on July 7th, 2010 by James Litten

We explored using keyboard input to move a shape on an HTML5 canvas here http://html5.litten.com/moving-shapes-on-the-html5-canvas-with-the-keyboard/. Now we’ll take a look at using input from the mouse. With a few simple calculations, you can drag and drop shapes on the canvas with your mouse. UPDATE: I’ve added a companion post for IE compatibility. IE Compatible Canvas […]