DreamSparking a HTML5/JS Game From Start to Finish

Looking for something to keep you or the kids busy for the coming Winter break?

Today's Web Wednesday post, from Friend of the Blog Lee Stott, is what has to be a record length blog post (27 pages printed) and could just be your ticket to break the Winter blues...

Building a HTML5/JS Game & hosting it on your DreamSpark Cloud Subscription

Fancy learning the basics and getting your first game up and running on your Azure Web Services, well this guide will show you have to build a game with Web technologies.

The following blog will take you through a step by step guide of building a game from scratch using Web technologies and just two external javascript libraries.

Building a web based game is the perfect Hour of Code and the aim if for you to have the game live within one hour. This blog covers the basic game design and screen layout, controls and sprites and includes an arti­ficial intelligence (AI) as a simple opponent.

Step 1. Tools and Technologies

Download Visual Studio Community or Visual Studio code from www.dreamspark.com

I will be using Visual Studio Community and the Microsoft Azure SDK.If you have a Mac or Linux user, Visual Studio Code is available cross-platform and perfect for building web sites.

Create your DreamSpark Azure Subscription which give you FREE web apps see http://blogs.msdn.com/b/uk_faculty_connection/archive/2015/09/14/accessing-microsoft-dreamspark-azure-account-if-you-have-onthehub-dreamspark-premium.aspx

This app will require no server code, so I start by creating a new, empty Web page project in Visual Studio.

Step 2. Creating a ASP.Net Web Site...

Step 3. So what is the game

This game is based on Pong, except that either player grabs the ball when it comes to them and can then fire the ball back either directly or at an angle up or down. It’s often best to draw how you would like the game to look before you build it. For this game, the overall layout I want to see is shown below.

...

Step 4. Styling the Game using CSS...

Step 5. Making the Game Work...

Step 6. Creating Player Objects...

Step 7. Adding Functions...

Step 8. Keep Score...

Step 9. Adding an AI...

You can download the entire source to the project at https://github.com/leestott/Pong-Game---HTML-JS-Web-Game

Step 10. Testing your web site...

Other Resources

There are loads of free great coding resources

Coding Lab on GitHub: Cross-browser testing and best practices

Hosted web apps and web platform innovations (from Kevin Hill and Kiril Seksenov including the manifold.JS project)

More free cross-platform tools & resources for the Web Platform:

Visual Studio Code for Linux, MacOS, and Windows

Code with node.JS and free trial on Azure

More advanced resources

Woah, I can test Edge & IE on a Mac & Linux! (from Rey Bango)

Advancing JavaScript without Breaking the Web (from Christian Heilmann)

The Edge Rendering Engine that makes the Web just work (from Jacob Rossi)

Unleash 3D rendering with WebGL (from David Catuhe including the vorlon.JS and babylonJS projects)

[Click through to read the entire post]

Here’s a few more links you might find interesting:

• WebGL to Windows 8
• Talking about Marmalade 7.4 adding Windows Phone 8.1 and a Getting Started Guide too
• Future of Technology in Education gets some Kinect gamification

Follow @CH9
Follow @coding4fun
Follow @gduncan411