DreamSparking a HTML5/JS Game From Start to Finish
- Posted: Dec 02, 2015 at 6:00AM
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...
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.
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 artificial 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...
There are loads of free great coding resources
More free cross-platform tools & resources for the Web Platform:
More advanced resources
Woah, I can test Edge & IE on a Mac & Linux! (from Rey Bango)
The Edge Rendering Engine that makes the Web just work (from Jacob Rossi)
Here’s a few more links you might find interesting: