JavaScript user scripting

Problem

I was playing a browser-based game that required me to perform an action at 04:00. And I wanted to be asleep at 4am.

One thing I want all budding web developers to remember is this- your application front end is running on someone else’s computer. In what is effectively a debug environment. Developers need to ensure there is no trust between the client and the server (the other way around is fine, however).

Because the code is not compiled, it is even easier to dig into the code- the HTML and JavaScript -and make changes.

But I didn’t need to go that far.

Continue reading “JavaScript user scripting”

HexGame v1.2

The SVG+JS game with quite a lot of hexagons, but not as many as some, has been improved. Challenge your students to come up with answers to questions like “What does T in TCP/IP stand for?”, or “What R is a device that chooses where to send packets, according to a set of rules?”. If you have an interactive whiteboard, let them press on the tiles to select their next letter.

hexgame screetshot

Improvements: It has a prettier win-screen, with an actual visual interface for setting the letters on the hex tiles.

Check it out- HexGame

Clouds – animation example

Here’s a demonstrator I coded up for one of our web development classes, to illustrate some animation techniques.

cloud generating web app screenshot

Give it a try, put some clouds in your browser to while away your tea break.

Note how the clouds towards the top of the screen are larger, fewer in number, and faster moving than at the bottom of the screen, roughly simulating the wider field of view nearer the horizon. There’s a CSS gradient to try to sell the illusion too. This distribution is controlled by feeding output from the psuedorandom number generator into a function, giving a skewed distribution where larger numbers are more common than smaller numbers.

Controls are at the foot of the page. They are faded in and out using the CSS transition property, whilst the cloud animations are done using the velocity.js library. I hand-drew the clouds (PNG format, for the variable transparency needed for compositing). I apologise in advance for some of the iffier ones.

Why isn’t SVG more widely used?

I was first introduced to Scalable Vector Graphics (SVG) through Inkscape, the excellent free vector graphics drawing application. It’s available for Windows, Linux and OS X, so please give it a try. You can get it as a portable app, runnable on a Windows machine from a USB memory stick, incredibly handy to have when working on other people’s machines (so if you’ve never visited PortableApps.com, maybe now’s the time!).

hexbusters screengrab
Continue reading “Why isn’t SVG more widely used?”

Wrapping your head around it- irregular images and text

Image elements, on the web, are square. Which is fine in many situations, and suits the image content. But often that content is irregular or at least non-rectilinear in shape. Take, for example, a red ball against a transparent background. To our eyes, the content, the important visual information is actually circular. If we try to wrap text around it, the browser is unaware, and can only conform to the image element boundary.

There’s always more than one way to do it, but take a look at this method for wrapping text around non-square image content for web pages. It’s the same image file of a circle, but now the text appears to follow the contours of the visually important object, not the <img> element:

wrapped text

Continue reading “Wrapping your head around it- irregular images and text”