HTML 5 JavaScript Examples

JavaScript technique(s)

Applications may involve opening new windows. These Notes on closing multiple windows opened by JavaScript explain a technique for closing multiple windows as demonstrated by Original script opening a second which opens a third window, which closes the second and the third!

Basic games

The main HTML 5 element used in these examples is canvas. You can draw in/on the canvas using lines, rectangles and arcs. You also can bring in images stored as jpg, png or gif files. You also can clear parts of the canvas and then re-draw to produce animation. The cannonball and other applications use programmer-defined JavaScript objects for a systematic drawing of what is on display. Use this document to find the features you want to understand. REMEMBER: View the source of this file and the example files to see how the coding is done.

You can see similar examples I have done using older HTML and Javascript as well as Flash ActionScript (most with tutorials) as well as articles I have consulted by taking the links. The main colors used here are heliotrope and puce, the colors of Purchase College.

Computed Animation: Bouncing ball.

Ball bounces in box by re-calculating position based on horizontal and vertical values for speed (displacement). The angle of reflection equals angle of incidence effect is achieved by simple sign changes of the appropriate, horizontal or vertical displacement value. Collision is detected using calculations onde with respect to boundaries inside the box. Player can change horizontal and vertical speeds using form elements. See under Advanced Applications below for video ball in a box.

Pseudo-random calculations. Dice game.

Throwing dice

Use 1+ Math.floor(Math.random()*6) to get values 1 to 6. Draw distinct die faces using combinations of calls to arc plus strokeRect. The three examples demonstrate building up from simple to more complex applications.

Displaying an animated scene using JavaScript objects. Cannonball: a simple ballistic simulation.

Use JavaScript objects each with a specification for draw and moveit methods (my terms). Use setInterval as in bouncing ball.

Add ground. Check for collisions using basic compare calculations.

Place objects on canvas, with possibility of rotating. Uses img, rotate, save, restore, translate of canvas context. Looking ahead to adding an actual cannon, need to modify display scheme.

Add cannon and ability for it to rotate. Use external image file for the target, so need to incorporate images into my display list scheme. Uses img, rotate, save, restore, translate of canvas context. Change form to accept angle and velocity out of the mouth of the cannon.

Mouse events. New objects on screen (display, stage). Slingshot ballistics.

Spawning new objects on screen by player mouse down, drag, mouse up. These are building blocks to various games. The requirements are to detect mouse down, mouse move and mouse up events. The code has calculations to determine where the mouse is on the canvas. The slingshot example combines handling mouse events with the computed animation of the cannonball example.

Creating new html elements. Mouse clicks on elements. Using an array.Quiz.

Creating html elements as opposed to drawing on the canvas. This allows using addEventListener for the elements. An array of data (array of arrays, with each inner array holding related data) is used to make a random selection of questions for each running of the quiz.

Using keys on the keyboard. More drawing on canvas. Collisions. Local Storage. Maze.

Building an application involving the use of keys on the keyboard is termed using 'key capture'. The event is 'keydown'. This application also provides a way to save information locally. You can save the maze layout (that is, the walls) using local storage under a name of your choice. (Note: some browser settings forbid local storage, cookies, etc.) To type in this name, the key capture feature must be turned off. This is done by hitting any key other than the arrows.

Mouse click. Representing cards. Putting in a pause. Calculating total elapsed time: Memory/Concentration.

These implementation(s) of a common card game requires representing virtual cards. Time is important in two ways: setTimeout is used to impose a pause, so the player gets to see the card fronts before they are (virtually) flipped over. In fact, the card back is drawn on top of the card front. The elapsed time is computed using Date objects. Trying again (for a lower score) is done by re-loading the page.

Advanced applications

These applications may not be advanced to some. They are projects I have done since my book was published. They include the use of localStorage, video and geolocation and Google Maps. There also is use of CSS in the style element, including font families. REMEMBER: View the source of this file and the example files to see how the coding is done.

Making the canvas or a link appear and disappear

You may want to use a canvas somewhat later in your application or make a link appear at a specific time in your program.

Toggle the canvas and the button, uses CSS display and innerHTML.

Toggle the link and the button, uses CSS display and innerHTML.

Videos and Audio

An important new feature in HTML5 is native support of video and audio. At this time, the browsers that accept video and/or audio do not all accept the same encodings, so for each of these examples, I created 3 versions of the same video content and 2 versions of the same audio content.

Plain, 'static', video, with controls

Video bouncing in a box: masked to be a circle. This uses drawImage. The code for the bouncing is the same used in the basic examples referenced earlier. The mask is a donut drawn as two simply-connected (no hole) shapes.

Map (Google Maps) as portal to videos and images. This uses the Google Maps API to access and display a Google map. Internal data associates certain locations (latitude/longitude) with either video or an image. When the visitor clicks on the map, the media associated with the nearest of the locations is diplayed. HINT: click near Purchase College for a video from the Robotics class. Click north, nearer to Mt. Kisco for a picture of my mother. Click south, nearer the Statue of Liberty for a video of fireworks.

Rock paper scissors . A critical factor here is to coordinate the sound, the image representing the computer's throw emerging on the screen, and the updating of the score.

Geolocation

Geolocation is an independent effort being developed in parallel to the HTML5 specification. The idea is to use some means to locate the client computer. This can include triangulation of WiFi hot spots as recorded by companies such as Google, triangulation of cell phone towers, GPS, and tables of IP addresses as recorded by ISPs.

Provides geolocation information (if available and user is willing). This is intended to help you test how good the found location is.

Performs geolocation and/or allows user to select from 3 locations or click to establish a new base. Computes distance from base to clicked location. Also provides Google directions..

Hangman

Hangman is one of the games in my book. It makes use of dynamically created html markup along with drawing on canvas. This version of hangman makes uses of a word list I found on-line.

Hangman, with dynamically created markup for alphabet and secret word letters, and external word list

Building drawings from ovals and rectangles and saving using localStorage

This is a stub for a game or other application in which the player/user drags shapes. It also demonstrates use of localStorage, the HTML5 version of cookies. Since the information to be saved is of variable length, encoding and decoding is done using join and split.

Build and save combinations of shapes, making use of JavaScript objects and localStorage and changing cursor.