Microsoft UK Faculty Connection - Site Home - MSDN Blogs


  • Microsoft UK Faculty Connection

    Student and Faculty Guide - 10 easy steps to get up and running with Azure Machine Learning

    My colleague Amy Nicholson is the UK expert on Azure Machine Learning, the following blog post is after a quizzing session to get understand how to get started with Azure Machine Learning” 

    Step 1. Setup your Azure Machine Learning account/service

    1. Create Microsoft Account, Use Microsoft Account to set up DreamSpark Account, Verify your DreamSpark Account, Register for Microsoft Azure for DreamSpark Go to Azure Machine Learning Studio and click the "Get Started" link Microsoft, DreamSpark and Azure Account Set-up Instructional Video

    2. Azure for Education is for Faculty running courses using Azure, including Azure ML. Each student receives $100 of Azure credit per month, for 6 months. The Faculty member receives $250 per month, for 12 months. You can apply anytime at

    3. Azure Machine Learning for Research is for University Faculty running data science courses who may need greater amounts of Azure storage and additional services such as HDInsight (Hadoop and Spark) or DocumentDB (NoSQL). Proposals are accepted every two months, you can find out more and apply at

    4. Azure Passes I have access to a limited number of $100 1 Month Azure passes so if your interested in running a class, tutorial or session on Machine learning at a UK institution please get in touch @lee_stott

    Step 2: Understand the basics

    The Azure machine learning team provided a very nice walkthrough tutorial which covers a lot of the basics. 

    This tutorial is really useful as it takes you through the entire process of creating an AzureML workspace, uploading data, creating an experiment to predict someone’s credit risk, building, training, and evaluating the models, publishing your best model as a web service, and calling that web service. 

    Step 3: Getting Data to work with

    Now you need to learn how to import a data set into Azure Machine Learning, and where to find interesting data to build something amazing.

    You can upload local data (like a .csv file) from your machine or access data from elsewhere on the internet (like an OData feed provider).

    Great example of data are 

    and Azure DataMarket

    Step 4: Create your first Machine Learning Experiment

    Many predictive experiments using supervised learning (regression, classification, or anomaly detection) will follow this basic pattern. 

    ML Azure

    Drag the data set that you chose in step 3 onto your AzureML workspace.  Then you may want to use the various Data Transformation modules to clean or reformat your data (such as removing rows with missing data, etc). 

    Then you will split your data set in a training and test set. 

    Best practice is to split 75% training and 25% test. 

    Why do we have to split it?  Well, remember that with supervised learning, you need data with labeled examples.  So, the reason you split the data is to provide most of the data to train the model (it will process the data to figure out correlations between the inputs and outputs in the “train model” module), but we want to hold back some of that labeled data to test the model that we built.  Then, we can compare the output of the trained model generates against the actual test dataset (in the “score model” module) to see how well the model is performing.  (We can't use the same data for both…the model is built using the training data, so it will perform pretty accurately with that; we hold back unused data to test.) 

    Finally, the “evaluate model” module lets us compare two models against each other to determine which performs better for our needs. 

    Step 5: Choosing the right Algorithm

    There are 4 categories of algorithms currently supported in Azure Machine Learning:


    1. Clustering: grouping similar data together
    2. Regression: predicting a value
    3. Classification: predicting a discrete category
    4. Anomaly detection: identifying data that is outside of the norm

    Once you determine the category of algorithm that makes sense for your problem, you need to choose a specific algorithm within that category. 

    The best resource for this is the Azure Machine Learning Cheat Sheet

    The Cheat Sheet It is a useful flowchart that helps you analyze your data and figure out which algorithm may perform best. 

    Microsoft Azure Machine Learning Cheat Sheet

    Step 6: Refine your model. 

    Each algorithm contains a number of initial parameters.  Tweaking the initial parameters can greatly improve your results.  The "Sweep Parameters" module can help by trying many different input parameters for you, and you can specify the metric that you want to optimize for (such as accuracy, precision, recall, etc.). 

    Changing algorithms and adjusting their initial parameters can greatly affect your results.  Here are some resources to help you learn to perfect your model:

    How to choose parameters to optimize your algorithms in Azure Machine Learning

    Run and Fine-Tune Multiple Models" video by Data Science Dojo

    To evaluate your model, right-click on the output node of the “Evaluate Model” module and select “Visualize”. 

    The data provided is different depending on what category of algorithm you are using:

    Regression models give you the mean absolute error, root mean squared error, relative absolute error, relative squared error, and the coefficient of determination.  You want the errors to be as close to 0 as possible, and you want the coefficient of determination to be as close to 1 as possible. 

    Binary (two-class) classification models provide metrics on accuracy, precision, recall, F1 score (which is a combination of precision and recall), and AUC (area under the curve).  You want all of these numbers to be as close to 1 as possible.  It also provides the number of true positives, false positives, false negatives, and true negatives.  You want the number of true positives and true negatives to be high, and the number of false positives and false negatives to be low. 

    Multiclass classification models provide a confusion matrix of actual vs. predicted instances. 

    Here are some resources to help you with evaluating your model:

    How to evaluate model performance in Azure Machine Learning

    How to interpret model results in Azure Machine Learning

    Step 7: Publish your model as a web service. 

    To publish your model, click the “SET UP WEB SERVICE” button in the bottom toolbar in Azure Machine Learning Studio.  If there are multiple trained models in your experiment, select the “Train Model” module for the algorithm/trained model you want to use before clicking the button. 

    Set Up Web Service

    Select the creation of a “Predictive Web Service”.  The tool will generate a new experiment with web service inputs and outputs.  Verify that all of your data preprocessing modules still make sense when you call the service with new data.  You can also use the “Project Columns” module to remove some columns from the web service inputs and outputs.  Then, run your predictive experiment and click “DEPLOY WEB SERVICE”. 

    There is further documentation on publishing your web service here.  (You can also reference this step in the walkthrough)

    Step 8: Call your web service.

    Finally, you need to write a little code (or grab some sample code) to call your web service.  The Azure web service that you created can operate two different ways:


    • Request/Response - The user sends one or more rows of credit data to the service by using an HTTP protocol, and the service responds with a set of results.
    • Batch Execution - The user sends to the service the URL of an Azure blob that contains one or more rows of credit data. The service stores the results in another blob and returns the URL of that container.

    When you published the web service in the previous step, you were taken to a webpage documenting the different ways to call your service.  Sample code is provided in C#, Python, and R.  An Excel spreadsheet with macros to call the web service is also provided. 

    The official documentation on calling your web service is here

    Step 9: Retrain your model over time. 

    You may have new data coming in continually, and want to occasionally retrain your ML model based on that new data. 

    Here is the official documentation on how to retrain machine learning models programmatically

    Step 10: Share the Outcome as a Gallery item,

    Hopefully you learned something and others will benefit from your knowledge, troubleshooting efforts, and lessons learned as well.  You can also share your machine learning model to the Azure Machine Learning gallery with a button click from the bottom toolbar in AzureML Studio. 

    Publish To Gallery

    Other learning Resources

    Azure Machine Learning Project using Web Services Online Video Course

    Build and Deploy Your Predictive Model (75 minutes)
    1. Download the Training Data from Titanic Training Data
    2. Complete the Data Science Dojo Tutorials:
    Use ML Algorithm in Excel (30 minutes)


    Get Started with Azure Machine Learning


    Feature requests for Azure Machine Learning

    Microsoft Virtual Academy course on Azure Machine Learning

  • Microsoft UK Faculty Connection

    Labs Scenarios for Machine Learning, Web Development and Mobile Game Development all with a Microsoft DreamSpark Azure Account



    The challenge of most survey information systems courses taught in the College of Business is that the hands-on projects tend to teach Microsoft Office skills rather than give insights into IT careers. 

    This might be why CIS, MIS and IS departments still struggle to recruit students to the major despite a very robust job market.


    My colleague in the US Randy Guthrie – Microsoft Technical Evangelist. Has created the

    Azure in IS Lab Series

    The Azure in IS Lab Series has been designed teach important IS concepts while at the same time giving students a better understanding of technology careers beyond textbook exercises.

    Students use professional tools and learn skills that can have immediate scholastic and career benefit.

    Each of the projects is based on the Microsoft Azure cloud-computing platform, but allows the teacher and student to explore several implementation scenarios including game development, web development and predictive analytics via Azure Machine Learning.

    These labs are targeted specifically at college students enrolled in survey Information Systems courses with limited technical skills, but could easily be used in other activities such as computer science societies and clubs.

    The projects are:


    Mobile Game Development: in this project students walk through one or two self-guided tutorials for one of several game types, and then heavily customize the game mechanics, graphics and story to make a unique game. They then publish the game as an Azure website and use social media to drive traffic, get feed back, etc. Students then have the option of taking it further and publishing their game to Windows, iOS and Android device stores.


    Web Development: In this project students use Azure to build and host a WordPress website or blog. Almost 25% of the websites on the Internet use WordPress, and students from all business disciplines can benefit from learning how to create and deploy a WordPress site.  As an additional benefit, the Azure subscription through DreamSpark is free, and the websites (students get ten websites per subscription) do not expire, even after the student leaves the university.


    Machine Learning: In this project students develop a predictive model using one of a variety of datasets (the Titanic passenger manifest is a favorite) using Azure Machine Learning Studio. They can then deploy their model as a web app, and can then create an API to make a Excel Spreadsheet that uses the model to predict outcomes for the data in the spreadsheet.

    All of these projects use browser-based tools, so students can use any personal connected device without the need to download or install software. There are lots of helpful videos, supplemental PowerPoint presentations, grading rubrics, and even guidance for how students can reference their completed projects on a resume or enter their projects in a contest.

    These resources are available at no-cost, and technical support is available through the website to help faculty get started and to make sure the projects provide an enjoyable and impactful experience for everyone involved.

    In a recent pilot at Arizona State University, over 30 students changed their business concentration as a result of doing the Mobile Game project, and many more thought this was one of the most enjoyable assignments so far in their college experience.

    Check out the Azure in IS Lab Series today

  • Microsoft UK Faculty Connection

    Showing the world your skills – Are you an aspiring Developer


    Over the past 7 weeks we have been out on the road as part of the @gradsingames in the Game Tour. To date we visited over 70 UK universities and seen around 2500 students.


    In a follow up to my article

    I wanted to focus on some of the areas, that we are getting the most questions about.

    So in no order here a run down of some of the most popular questions to date from the developer attendees.

    No1. I don't have a portfolio how do I go about building

    Well that's easy Microsoft DreamSpark now includes FREE web hosting for students so you can build a blog in about 10 mins see

    No.2 What sort of things should I put on my blog and include in my portfolio

    Be reflective of your work, host content embedded within your blog, use tools which show your skills, so if your designer use 3d models hosted on and put playable games and content into iframe on your blog such as WebGL Unity3d games.

    The key thing around your portfolio, is it needs to reflective and demonstrate your skills and competences.

    The way try to explain this in the presentations is via the following model, you need to be able to demonstrate each of the following areas.


    Motivations – Why/What do you want to do in the future? what drives you? What are your passion, enthusiasm? show your tenacity aspects demonstrate these.

    Technical Skills – What skills do you have? How are you proving these?

    My advice is simple talk/blog about your experiences, projects and be reflective, includes Games, Source Control. Share content of what you have created and with what technologies. Do you have profile on technical forums such as StackOverflow, MSDN what your ranking these? All this helps prove your technical competency.

    Soft Skills – What is your experience of presentations, networking, community involvement? Do you go to any regular meet-ups, do you present on your project or work items?

    Projects – Ok as a student you have loads of project work.. But are you being self critical of these. what went well? what didn't? what would you change? are you making these available for other via GitHub as base project or tutorial? So a simple rule always include a file into your git with some details of what the project is ideally include a link back to your blog for the above details.

    Formal Education – You are all doing some form of course, but what makes you stand out? Are you expected a 2:1, 1st are you a member of skill set accredited or BCS course what in your portfolio?

    Self Driven Education – Ok so your doing a course and expect good grades. But what else are you learning? How do this feeds back into motivation? soft skills? technical skills and projects? Do you do Hacks or Jams? Do you do additional learning online via resources like or other MOOC resources? As a simply rule, you need to keep a breast of the latest news, technologies and industry trends.

    Opportunities – Take everything that passes you which may land you that dream job. If you dont ask you don't get so never be afraid of asking or introducing yourself. Attend events and be seen by the industry, be prepared to show people what your working on, have business cards with your portfolio site, Share content on twitter and other social networks.

    No3. For Dev students you need to prove your skills 

    So as dev you should have built stuff. Demonstrate/Prove this by having a public GitHub repo where you can share your code and projects. Coming back to motivations actually get involved in a project..

    MSFT Imagine has its own GitHub repo so I am always happy for people to get involved and contribute samples, tutorials.

    No4. I am new to source control how do I use it?

    Yes its amazes me, but during the tour I  have been shocked how many time I have asked. Do you use source control? The answer is generally yes but when you dig a bit further and ask what application service are you using? I get the answer dropbox, onedrive, google drive!


    So why use something like Git or Visual Studio Online or BitBucket?

    Simply it has version control  You and your team/project members can each upload your revisions to the same page, and Git will save two copies. Later, you can merge your changes together without losing any work along the way. You can even revert to an earlier version at any time, because Git keeps a “snapshot” of every change ever made.

    No5. which version control do you recommend

    My preference would be GitHub 

    First, if you download the GitHub software from Microsoft DreamSpark, it provides a visual interface to help you manage your version-controlled projects locally. Second, creating an account on brings your version-controlled projects to the Web, and ties in social network features for good measure.

    You can browse other GitHub users’ projects, and even download copies for yourself to alter and learn from. Other users can do the same with your public projects, and even spot errors and suggest fixes. Either way, no data is lost because Git saves a “snapshot” of every change.

    No6. Do you have any tips on using GitHub or Source control

    So what are the key concepts and terms

    Command Line: The computer program we use to input Git commands. On a Mac, it’s called Terminal. On a PC, it’s a non-native program that you download when you download Git for the first time

    Repository: A directory or storage space where your projects can live. Sometimes GitHub users shorten this to “repo.” It can be local to a folder on your computer, or it can be a storage space on GitHub or another online host. You can keep code files, text files, image files, you name it, inside a repository.

    Version Control: Basically, the purpose Git was designed to serve. When you have a Microsoft Word file, you either overwrite every saved file with a new save, or you save multiple versions. With Git, you don’t have to. It keeps “snapshots” of every point in time in the project’s history, so you can never lose or overwrite it.

    Commit: This is the command that gives Git its power. When you commit, you are taking a “snapshot” of your repository at that point in time, giving you a checkpoint to which you can reevaluate or restore your project to any previous state.

    Branch: How do multiple people work on a project at the same time without Git getting them confused? Usually, they “branch off” of the main project with their own versions full of changes they themselves have made. After they’re done, it’s time to “merge” that branch back with the “master,” the main directory of the project.

    Git-Specific Commands

    Since Git was designed with a big project like Linux in mind, there are a lot of Git commands. However, to use the basics of Git, you’ll only need to know a few terms. They all begin the same way, with the word “git.”

    git init: Initializes a new Git repository. Until you run this command inside a repository or directory, it’s just a regular folder. Only after you input this does it accept further Git commands.

    git config: Short for “configure,” this is most useful when you’re setting up Git for the first time.

    git help: Forgot a command? Type this into the command line to bring up the 21 most common git commands. You can also be more specific and type “git help init” or another term to figure out how to use and configure a specific git command.

    git status: Check the status of your repository. See which files are inside it, which changes still need to be committed, and which branch of the repository you’re currently working on.

    git add: This does not add new files to your repository. Instead, it brings new files to Git’s attention. After you add files, they’re included in Git’s “snapshots” of the repository.

    git commit: Git’s most important command. After you make any sort of change, you input this in order to take a “snapshot” of the repository. Usually it goes git commit -m “Message here.” The -m indicates that the following section of the command should be read as a message.

    git branch: Working with multiple collaborators and want to make changes on your own? This command will let you build a new branch, or timeline of commits, of changes and file additions that are completely your own. Your title goes after the command. If you wanted a new branch called “cats,” you’d type git branch cats.

    git checkout: Literally allows you to “check out” a repository that you are not currently inside. This is a navigational command that lets you move to the repository you want to check. You can use this command as git checkout master to look at the master branch, or git checkout cats to look at another branch.

    git merge: When you’re done working on a branch, you can merge your changes back to the master branch, which is visible to all collaborators. git merge cats would take all the changes you made to the “cats” branch and add them to the master.

    git push: If you’re working on your local computer, and want your commits to be visible online on GitHub as well, you “push” the changes up to GitHub with this command.

    git pull: If you’re working on your local computer and want the most up-to-date version of your repository to work with, you “pull” the changes down from GitHub with this command.

    Setting Up GitHub And Git For The First Time

    GitHub's signup page.

    First, you’ll need to sign up for an account on It’s as simple as signing up for any other social network. Keep the email you picked handy; we’ll be referencing it again soon.You could stop there and GitHub would work fine. But if you want to work on your project on your local computer, you need to have Git installed. In fact, GitHub won’t work on your local computer if you don’t install Git. Install Git for Windows, Mac or Linux as needed., where you download Git.  where you download Git or if your a GUI person you can download

    Now it’s time to go over to the command line.

    On Windows, that means starting the Git Bash app you just installed, and on OS X, it’s regular old Terminal. It’s time to introduce yourself to Git. Type in the following code:

    git config --global "Your Name Here"

    Of course, you’ll need to replace “Your Name Here” with your own name in quotations. It can be your legal name, your online handle, anything. Git doesn’t care, it just needs to know to whom to credit commits and future projects.

    Next, tell it your email and make sure it’s the same email you used when you signed up for a account just a moment ago. Do it like this:

    git config --global ""

    That’s all you need to do to get started using Git on your computer. However, since you did set up a account, it’s likely you don’t just want to manage your project locally, but also online. If you want you can also set up Git so it doesn’t ask you to log in to your account every time you want to talk to it. For the purposes of this tutorial, it isn’t a big deal since we’ll only be talking to it once.

    The full tutorial to do this, however, is located on GitHub and GitHub Desktop site

    No7.I want to create my own startup


    BizSpark gives startups 3 years of free stuff – software, services, tech support, and Azure cloud.

    Your startup qualifies if it is less than 5 years old, is privately held, and earns less than $1M annually. And at the end of your 3 years, you keep all the software you've downloaded – at no cost.

    simply apply online at

    So hopefully this has given you some insight into the key areas of questions and some tips on how to get the your dream job I also have the following blog on some top tips on the do’s and Don'ts at

  • Microsoft UK Faculty Connection

    So why do Linux and Mac Devs love Visual Studio Code



    I just wanted to share some of my favourite feature of Visual Studio Code

    Any language, any OS

    Available on Mac OS X, Linux and Windows

    OS X, Linux, and Windows support Runs natively on the operating system of your choice

    Get up and running in minutes and be productive no matter what OS you are using. Regular updates are simple to install and released on all platforms at the same time. The perfect complement to your favorite developer tools.  Get Code for your OS FREE

    Language coverage -30+ languages and counting, syntax highlighting, bracket matching

    Syntax colorization, highlighting, and bracket matching make Code a great editor for all your programming tasks. Visual Studio Code supports JavaScript, C#, C++, PHP, Java, HTML, R, CSS, SQL, Markdown, TypeScript, LESS, SASS, JSON, XML, and Python as well as many other common file formats.

    See our full list of languages

    Git version control - Commit, diff, pull and push

    Embrace modern workflows with the power and flexibility of Git. See changed files, diffs, and make commits right from within the editor. Connect with the entire Git universe by pulling and pushing code to any remote — GitHub, Azure Web Apps, Visual Studio Team Services, and more.

    Learn more about Git support

    Extensible - Languages, features, themes

    Go beyond built-in customizations with additional extensions from the Visual Studio Marketplace, or create your own extension Unity3d is fully supported.

    Find extensions
    Find out how to create an extension

  • Microsoft UK Faculty Connection

    How to create and manage a web application using DreamSpark Azure


    Microsoft Azure Web App Guide

    The following guide shows a step by step creation of an ASP.NET Web Application and how to host it on “App Service Web Apps” on Microsoft Azure, using Visual Studio.

    After completing this guide, you will have created a simple web application running on your DreamSpark Azure subscription.

    If you haven't activated your FREE Azure subscription see

    What we are about to learn

    1. How to create a simple web application running on Microsoft Azure using Visual Studio

    2. How to easily make and apply changes to an already published web application

    3. How to use the Azure Portal ( to monitor and manage your applications

    Getting Ready

    Before we can start, you need to make sure that you have everything you need installed on your PC:

    Microsoft Azure SDK

    Visual Studio

    Note: Depending on the number of SDK’s already installed on your PC, the installation of the above might take from several minutes to an hour, on maybe more.

    Creating a Web App with Visual Studio

    Open Visual Studio. From the menu above select: File > NewProject

    At the window that pops-up, select C# > Web > ASP.NET WebApplication. Make sure that you have selected .ΝΕΤ Framework 4.5


    Select the box Add Application Insights to Project see

    Give your application a name at the field Name [MyExample] and then click OK

    At the New ASP.NET Project wizard select MVC. You can also work with ASP.NET Web Forms by choosing Web Forms


    By clicking the button Change Authentication, you can disable the user authentication for your app. In this tutorial, we will not use an authentication method


    At the New ASP.NET Project wizard, do not change any settings at the Microsoft Azure section, just click ΟΚ. Leaving the default settings means that Visual Studio will publish your website to Azure


    After clicking OK, a window will pop-up and ask you to sign in to your Azure Account, using your Microsoft ID and Password


    After you successfully sign in to your account, you need to configure the settings for your application. You can do that at the Configure Microsoft Azure Web App Settings window.

    At this window, you can change your application name, select a service plan and resource group for it (or create a new one) and set the region and the database center you want to use to host your web app

    If this is the first time that you create a web app on Azure, you will need to create a service plan and a resource group, which you can use later for your other apps as well

    Note: You can choose to create your own name for the app, but it needs to be unique for the domain The default name that Visual Studio suggests is a good way to go, since it is always unique. Azure is going to use that name for the URL of your application

    At the App Service Plan menu, click Create new App Service plan and then enter your plan name. This will be used to host your web application


    At the Recourse Group menu, click Create new Resource Group and then enter your group name

    At the Region menu, select the Region (Datacenter area) you want your app to be hosted

    At this tutorial, we will not use a database, so leave the Database server menu to No Database. Then click OK

    After Visual Studio finishes creating your project, you will be able to see your web app to the Solution Explorer


    The Azure App Service Activity window must show that your application is published and ready

    At this point, you will be able to see your application at the Server Explorer, under Azure/App Service

    Publish Your Web App


    In order to make sure that everything works, you can upload your site to Azure before you start editing it. To do that just go to the Azure App Service Activity window and click on Publish MyExample to this Web App now

    When the Publish Web wizard shows up, go to the Connection Tab and choose Validate Connection to make sure that Visual Studio is able to connect to Azure in order to upload your project


    When the validation is done, a green check mark will appear. Then click Next

    To the Settings Tab just click Next


    Note: The Configuration menu gives you the opportunity to set a Debug Build for remote debugging. We won’t be using that for this tutorial

    At the Preview Tab select Start Preview if you want to check the files before uploading them

    When done, click Publish and Visual Stuio will start uploading your site to Azure


    As soon as the app is published, a browser will automatically open up with your web application, that is successfully running on Azure.


    Well done!! You just deployed your first web site to the cloud. Now let’s see how you can make changes to it.

    Modify Your Web App

    In order to change your application, that now looks like the default ASP.NET app, you need to go to the Solution Explorer on Visual Studio and select the page you want to edit

    In this case, open the Views/Home/Index.cshtml page by double-clicking on it and change the <h1> attribute by adding some text. Then click CTRL+F5 to see the changes locally


    If everything is OK, a new tab will open and you will be able to see the changes you made.

    Note: the http://localhost url means that your app is running locally and the changes haven’t been uploaded to Azure yet


    In order to commit to those changes, go back to the Solution Explorer on Visual Studio, right click on the Project and select Publish

    A Publish Web wizard will show up, just click Publish (since you have already configured the settings the first time, so you don’t need to do it again)



    A browser opens up again and this time you can see the changes committed to your published web app.

    Note: The URL changed back to your selected name instead of localhost

    Tip: You can activate the Web One Click Publish Toolbar so you can publish your apps easier. Select View > Toolbars > Web One Click Publish


    Manage Your Web App Through the Azure Portal

    You can manage your web application through the Azure Web Portal. In your browser, go to and Sign In with your Microsoft ID and Password

    Go to Browse > Web Apps > [Your Web App Name] to see a summary with statistics for all your apps

    Choose All Settings to see more details for your app


    At the list showing up you can see all the available options for your application. Choose Application Settings to see which settings you can set up through the portal


    You have no created a basis web site on Microsoft Azure cloud services and learned to deploy and update the site and manage it via the Azure portal.

    If your interested in learning more about developing web sites and services on Microsoft Azure there is a great selection of FREE online learning courses at

  • Microsoft UK Faculty Connection

    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

    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

    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

    I’ll use the empty C# template for a Web site by selecting the Visual C# option after selecting File | New | ASP.NET Empty Web Site.



    Select an Empty ASP.Net Web Site


    If you already have your Azure account setup up you will be promoted to configure your Microsoft Azure Web App Settings for publishing


    If you have got this configured see or see my previous blog

    The index HTML file requires just three resources: jQuery, a main style sheet and a main JavaScript file. I add an empty CSS file to the project called style.css and an empty JavaScript file called ping.js to avoid errors when loading the page as we will be editing both style and ping during this project.

    To create these new files right click on the new create web app in the solution explorer and select  Add



       1: <!DOCTYPE html>
       2: <html>
       3: <head>
       4: <script 
       5: src=""></script>
       6: <script src="ping.js"></script>
       7: <link rel="stylesheet" href="style.css"></script>
       8: </head>
       9: <body>
      10: </body>
      11: </html>


    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.


    Once I’ve developed the game design layout, it’s just a matter of adding each element to HTML to build the game. One thing to note, though, is I’ll group the scoreboard and controls to ensure they sit together. So one by one, you can see I’ve added the elements, as shown below:

       1: </body>
       2: <div id="arena">
       3: <div id="score">
       4: <h1>
       5: <span id="playerScore">0</span>
       6: <span id="opponentScore">0</span>
       7: </h1>
       8: </div>
       9: <div id="player"></div>
      10: <div id="opponent"></div>
      11: <div id="ball"></div>
      12: <div id="controls-left">
      13: <div id="up"></div>
      14: <div id="down"></div>
      15: </div>
      16: <div id="controls-right">
      17: <div id="left"></div>
      18: <div id="right"></div>
      19: </div>
      20: </div>
      21: </body>

    Step 4. Styling the Game using CSS

    If you were to load this page, you wouldn’t see anything because there’s no style applied. I’ve already set up a link to a main.css file in my HTML,

    We now need to create main.css.

    The first thing I’ll do is position everything on the screen. The body of the page needs to take up the whole screen, so I’ll set that up first:


       1: body {
       2: margin: 0px;
       3: height: 100%;
       4: }

    Second, I need to have the arena fill the whole screen with the arena background image (see image below) applied:

       1: #arena {
       2: background-image: url(arena.png);
       3: background-size: 100% 100%;
       4: margin: 0px;
       5: width: 100%;
       6: height: 100%;
       7: overflow: hidden;
       8: }

    The background


    I want the scoreboard to appear top and centre, over the other elements.

    The command position: absolute lets me place it wherever I want and left: 50% places it halfway across the top of the window, but starting at the leftmost side of the scoreboard element. To ensure it’s perfectly centered, I use the transform property and the z-index property ensures it’s always at the top:

    I also want the text font to be used, Most modern browsers let you include actual fonts.

    I found the appropriate Press Start 2P font from codeman38

    To add the font to the scoreboard, you have to create a new font face in the style.css

       1: @font-face {
       2: font-family: 'PressStart2P';
       3: src: url('PressStart2P.woff');
       4: }
       1: #score {
       2: position: absolute;
       3: z-index: 1000;
       4: left: 50%;
       5: top: 5%;
       6: transform: translate(-50%, 0%);
       7: }

    The scores are in an h1 tag of index.html, so I can set the font for all h1 tags. Just in case the font is missing,

    To do this simply add the following to style.css

       1: h1 {
       2: font-family: 'PressStart2P', 'Georgia', serif;
       3: }

    For the player, ball and control icons I will be use a simply sprite sheet

    I have a single sprite sheet that contains all the images I need for the game in one file sprites.png

    As you can see I have two different colour players  ball and control arrows


    We now need to assign the sprite class element to style.css

    Then, for each element, I’ll use background-position to define what part of the sprite sheet I want to show:

       1: .sprite {
       2: background-image: url("sprites.png");
       3: width: 128px;
       4: height: 128px;
       5: }


    Next, I’ll add the sprite class to all elements that will use the sprite sheet.

       1: <div id="player" class="sprite"></div>
       2: <div id="opponent" class="sprite"></div>
       3: <div id="ball" class="sprite"></div>
       4: <div id="controls-left">
       5: <div id="up" class="sprite"></div>
       6: <div id="down" class="sprite"></div>
       7: </div>
       8: <div id="controls-right">
       9: <div id="left" class="sprite"></div>
      10: <div id="right" class="sprite"></div>
      11: </div>

    To do this I simply need to add all the element into the <div> section of <body> in index.html

    Add the following back to your index.html

    Now I need to indicate the positions of each sprite on the sheet for each element. Again, I’ll do this using background-position in Style.css

       1: #player {
       2: position: absolute;
       3: background-position: 0px 128px;
       4: }
       5: #opponent {
       6: position: absolute;
       7: background-position: 0px 0px;
       8: }
       9: #ball {
      10: position: absolute;
      11: background-position: 128px 128px;
      12: }
      13: #right {
      14: background-position: 64px 192px;
      15: }
      16: #left {
      17: background-position: 64px 0px;
      18: }
      19: #down {
      20: background-position: 128px 192px;
      21: }
      22: #up {
      23: background-position: 128px 0px;
      24: }


    The position: absolute property on the player, opponent and ball will let me move them around using JavaScript. If you look at the page now, you’ll see the controls and the ball have unnecessary pieces attached to them. This is because the sprite sizes are smaller than the default 128 pixels, so I’ll adjust these to the right size. There’s only one ball, so I’ll set its size directly in spirtes.css

       1: #ball {
       2: position: absolute;
       3: width: 64px;
       4: height: 64px;
       5: background-position: 128px 128px;
       6: }

    There are four control elements (buttons the user can press to move the player about),. I’ll also add a margin so they have a little space around them:

       1: .control {
       2: margin: 16px;
       3: width: 64px;
       4: height: 64px;
       5: }


    After adding this class, the game has much better looking controls:

    Edit index.html and add

       1: <div id="controls-left">
       2: <div id="up" class="sprite control"></div>
       3: <div id="down" class="sprite control"></div>
       4: </div>
       5: <div id="controls-right">
       6: <div id="left" class="sprite control"></div>
       7: <div id="right" class="sprite control"></div>
       8: </div>


    The last thing I need to do is position the controls so they’re by the user’s thumbs when the page is running on a mobile device. I’ll stick them to the bottom corners:

    so edit style.css

       1: #controls-left {
       2: position: absolute;
       3: left: 0; bottom: 0;
       4: }
       5: #controls-right {
       6: position: absolute;
       7: right: 0; bottom: 0;
       8: }


    One nice thing about this design is everything is set with relative positions.

    This means the screen can be a number of different sizes while still making the game look good so this game will support mobile, desktop and tablet devices.

    Step 5. Making the Game Work

    We now need to create ping.js


    I’m going to make objects for the ball and each of the players, but I’ll use the factory pattern for the objects.

    This is a simple concept. The Ball function creates a new ball when you call it.  The following pattern reduces some of the confusion around the this variable by clarifying the available object properties. And because we only have an hour to make this game, I need to minimize any confusing concepts.

    The structure of this pattern, as I make the simple Ball class:

       1: var Ball = function( {
       2: // List of variables only the object can see (private variables).
       3: var velocity = [0,0];
       4: var position = [0,0];
       5: var element = $('#ball');
       6: var paused = false;
       7: // Method that moves the ball based on its velocity. This method is only 
       8: used
       9: // internally and will not be made accessible outside of the object.
      10: function move(t) {
      11: }
      12: // Update the state of the ball, which for now just checks
      13: // if the play is paused and moves the ball if it is not.
      14: // This function will be provided as a method on the object.
      15: function update(t) {
      16: // First the motion of the ball is handled
      17: if(!paused) {
      18: move(t);
      19: }
      20: }
      21: // Pause the ball motion.
      22: function pause() {
      23: paused = true;
      24: }
      25: // Start the ball motion.
      26: function start() {
      27: paused = false;
      28: }
      29: // Now explicitly set what consumers of the Ball object can use.
      30: // Right now this will just be the ability to update the state of the 
      31: ball,
      32: // and start and stop the motion of the ball.
      33: return {
      34: update: update,
      35: pause: pause,
      36: start: start
      37: }


    To create a new ball, I simply call this function I’ve defined:

    var ball = Ball();

    Now I want to make the ball move and bounce around the screen.

    First, I need to call the update function at some interval to create an animation of the ball.

    Modern browsers provide a function meant for this purpose called requestAnimationFrame.

    This takes a function as an argument, and will call that passed-in function the next time it runs its animation cycle. This lets the ball move around in smooth steps when the browser is ready for an update. When it calls the passed-in function, it will give it the time in seconds since the page was loaded. This is critical for ensuring animations are consistent over time. In the game, the use of requestAnimationFrame appears as follows:

    In Ping.js add the following at the top of the file

       1: var lastUpdate = 0;
       2: var ball = Ball();
       3: function update(time) {
       4: var t = time - lastUpdate;
       5: lastUpdate = time;
       6: ball.update(t);
       7: requestAnimationFrame(update);
       8: }
       9: requestAnimationFrame(update);
      10: Note that requestAnimationFrame is called again in the function, as the ball 
      11: has finished updating. This ensures continuous animation.
      12: While this code will work, there may be an issue where the script starts 
      13: running before the page is fully loaded. To avoid this, I’ll kick off the code 
      14: when the page is loaded, using jQuery:
      15: var ball;
      16: var lastUpdate;
      17: $(document).ready(function() {
      18: lastUpdate = 0;
      19: ball = Ball();
      20: requestAnimationFrame(update);
      21: });

    Because I know the speed of the ball (velocity) and the time since its last update, I can do some simple physics to move the ball forward:

       1: var position = [300, 300];
       2: var velocity = [-1, -1];
       3: var move = function(t) {
       4: position[0] += velocity[0] \* t;
       5: position[1] += velocity[1] \* t;
       6: element.css('left', position[0] + 'px');
       7: element.css('top', position[1] + 'px');
       8: }


    Try running the code and you’ll see the ball move at an angle and off the screen. This is fun for a second, but once the ball goes off the edge of the screen, the fun stops.

    So the next step is to make the ball bounce off the edges of the screen,

    Add this code and running the app will show a continuously bouncing ball.

    Step 6. Creating Player Objects

    Now it’s time to make the Player objects.

    The first step in fleshing out the player class will be to make the move function change the position of the player. The side variable will indicate which side of the court the player will reside, which will dictate how to position the player horizontally. The y value, passed into the move function, will be how much up or down the player will move:

       1: var Player = function (elementName, side) {
       2: var position = [0,0];
       3: var element = $('#'+elementName);
       4: var move = function(y) {
       5: }
       6: return {
       7: move: move,
       8: getSide: function() { return side; },
       9: getPosition: function() { return position; }
      10: }
      11: }

    We can then lay out player movement, stopping the motion if the player sprite reaches the top or bottom of the window.

       1: var move = function(y) {
       2: // Adjust the player's position.
       3: position[1] += y;
       4: // If the player is off the edge of the screen, move it back.
       5: if (position[1] <= 0) {
       6: position[1] = 0;
       7: }

    The height of the player is 128 pixels, so stop it before any part of the player extends off the screen.

       1: if (position[1] >= innerHeight - 128) {
       2: position[1] = innerHeight - 128;
       3: }

    If the player is meant to stick to the right side, set the player position to the right edge of the screen.

       1: if (side == 'right') {
       2: position[0] = innerWidth - 128;
       3: }

    Finally, update the player's position on the page.

       1: element.css('left', position[0] + 'px');
       2: element.css('top', position[1] + 'px');
       3: }

    I can now create two players and have them move to their appropriate side of the screen:

       1: player = Player('player', 'left');
       2: player.move(0);
       3: opponent = Player('opponent', 'right');
       4: opponent.move(0);

    So in theory you can move the player, but it won’t move without instruction. Add some controls to the player on the left.

    You want two ways to control that player: using the keyboard (on PCs) and tapping the controls (on tablets and phones).

    To ensure consistency between touch inputs and mouse inputs on various platforms, I’ll use the great unifying framework hand.minified there are others like

    First, I’ll add the script to HTML in the head section:

       1: <script src="hand.js"></script>

    I’ll then use Hand.js and jQuery to control the player when you press keyboard keys A and Z, or when you tap the controls.

    In ping.css add the following at the top where you declare variables

       1: var distance = 24; 

    Add the following section for controls

       1: $(document).ready(function() {
       2: lastUpdate = 0;
       3: player = Player('player', 'left');
       4: player.move(0);
       5: opponent = Player('opponent', 'right');
       6: opponent.move(0);
       7: ball = Ball();
       8: // pointerdown is the universal event for all types of pointers -- a 
       9: finger,
      10: // a mouse, a stylus and so on.
      11: $('#up') .bind("pointerdown", function() {player.move(-distance);});
      12: $('#down') .bind("pointerdown", function() {player.move(distance);});
      13: requestAnimationFrame(update);
      14: });
      15: $(document).keydown(function(event) {
      16: var event = event || window.event;

    This code converts the keyCode (a number) from the event to an uppercaseletter to make the switch statement easier to read.

       1: switch(String.fromCharCode(event.keyCode).toUpperCase()) {
       2: case 'A':
       3: player.move(-distance);
       4: break;
       5: case 'Z':
       6: player.move(distance);
       7: break;
       8: }
       9: return false;
      10: });

    Step 7. Adding Functions

    As the ball bounces around, I want to let players catch it. When it’s caught, the ball has an owner, and it follows the motion of that owner. I’ll add functionality to the ball’s move method, allowing for an owner, which the ball will then follow:

    If there is an owner, move the ball to match the owner's position.

       1: function move(t) {
       2: if (owner !== undefined) {
       3: var ownerPosition = owner.getPosition();
       4: position[1] = ownerPosition[1] + 64;
       5: if (owner.getSide() == 'left') {
       6: position[0] = ownerPosition[0] + owner.getsize();
       7: } else {
       8: position[0] = ownerPosition[0];
       9: }

    Otherwise, move the ball using physics. Note the horizontal bouncing has been removed -- ball should pass by a player if it isn't caught.

       1: } else {

    If the ball hits the top or bottom, reverse the vertical speed.

       1: if (position[1]– halfTile <= 0 || position[1] + halfTile>= 
       2: innerHeight) {
       3: velocity[1] = -velocity[1];
       4: }
       5: position[0] += velocity[0] * t;
       6: position[1] += velocity[1] * t;
       7: }
       8: element.css('left', (position[0]– halfTile) + 'px');
       9: element.css('top', (position[1]– halfTile) + 'px');
      10: }

    Currently, there’s no way to get the position of a Player object, so I’ll add the getPosition and getSide accessors to the Player object:

       1: return {
       2: move: move,
       3: getSide: function() { return side; },
       4: getPosition: function() { return position; }
       5: }

    Now, if the ball has an owner, it will follow that owner around. But how do I determine the owner? Somebody has to catch the ball. Let’s determine when one of the player sprites touches the ball. When that happens, I’ll set the owner of the ball to that player.

       1: function update(t) {

    First the motion of the ball is handled.

       1: if(!paused) {
       2: move(t);
       3: }

    The ball is under control of a player, no need to update.

       1: if (owner !== undefined) {
       2: return;
       3: }

    First, check if the ball is about to be grabbed by the player.

       1: var playerPosition = player.getPosition();
       2: if (position[0] <= 128 &&
       3: position[1] >= playerPosition[1] &&
       4: position[1] <= playerPosition[1] + 128) {
       5: console.log("Grabbed by player!");
       6: owner = player;
       7: }

    Then by the opponent...

       1: var opponentPosition = opponent.getPosition();
       2: if (position[0] >= innerWidth - 128 &&
       3: position[1] >= opponentPosition[1] &&
       4: position[1] <= opponentPosition[1] + 128) {
       5: console.log("Grabbed by opponent!");
       6: owner = opponent;
       7: }

    If you try playing the game now, you’ll find the ball bounces off the top of the screen, and you can move the player to catch it.

    Now, how do you throw it?

    That’s what the right-hand controls are for—aiming the ball.


    Let’s add a “fire” function to the player, as well as an aim property.

    Add supporting for Aiming

       1: var aim = 0;

    The fire function

       1: var fire = function() {

    Safety check: if the ball doesn't have an owner, don't not mess with it.

       1: if (ball.getOwner() !== this) {
       2: return;
       3: }
       4: var v = [0,0];

    Depending on the side the player is on, different directions will be thrown.The ball should move at the same speed, regardless of direction -- with some math you can determine that moving .707 pixels on the x and y directions is the same speed as moving one pixel in just one direction.

       1: if (side == 'left') {
       2: switch(aim) {
       3: case -1:
       4: v = [.707, -.707];
       5: break;
       6: case 0:
       7: v = [1,0];
       8: break;
       9: case 1:
      10: v = [.707, .707];
      11: }
      12: } else {
      13: switch(aim) {
      14: case -1:
      15: v = [-.707, -.707];
      16: break;
      17: case 0:
      18: v = [-1,0];
      19: break;
      20: case 1:
      21: v = [-.707, .707];
      22: }
      23: }
      24: ball.setVelocity(v);

    Release control of the ball.

       1: ball.setOwner(undefined);
       2: }

    The rest of the Ball definition code goes here...

       1: return {
       2: move: move,
       3: fire: fire,
       4: getSide: function() { return side; },
       5: setAim: function(a) { aim = a; },
       6: getPosition: function() { return position; },
       7: }

    We can then augment the keyboard function to set the player’s aim and fire functions.

    Aiming will work slightly differently. When the aiming key is released, the aim will return to straightforward.

       1: $(document).keydown(function(event) {
       2: var event = event || window.event;
       3: switch(String.fromCharCode(event.keyCode).toUpperCase()) {
       4: case 'A':
       5: player.move(-distance);
       6: break;
       7: case 'Z':
       8: player.move(distance);
       9: break;
      10: case 'K':
      11: player.setAim(-1);
      12: break;
      13: case 'M':
      14: player.setAim(1);
      15: break;
      16: case ' ':
      18: break;
      19: }
      20: return false;
      21: });
      22: $(document).keyup(function(event) {
      23: var event = event || window.event;
      24: switch(String.fromCharCode(event.keyCode).toUpperCase()) {
      25: case 'K':
      26: case 'M':
      27: player.setAim(0);
      28: break;
      29: }
      30: return false;
      31: });

    The final addition will be touch support on all controls.

    I’ll make the controls on the right change the aim of the player. I’ll also make it so touching on your player fires the ball additionally you need to touch-action:none; in the style.css to all of #up #down ‘'#left #right #player

       1: $('#left') .bind("pointerdown", function() {player.setAim(-1);});
       2: $('#right') .bind("pointerdown", function() {player.setAim(1);});
       3: $('#left') .bind("pointerup", function() {player.setAim(0);});
       4: $('#right') .bind("pointerup", function() {player.setAim(0);});
       5: $('player') .bind("pointerdown", function() {;});

    Step 8. Keep Score

    When the ball passes a player, I want to change the score and give the ball to that player. I’ll use custom events so I can separate scoring from any of the existing objects.

    The update function is getting long, so I’ll add a new private function called checkScored:

       1: function checkScored() {
       2: if (position[0] <= 0) {
       3: pause();
       4: $(document).trigger('ping:opponentScored');
       5: }
       6: if (position[0] >= innerWidth) {
       7: pause();
       8: $(document).trigger('ping:playerScored');
       9: }
      10: }

    The code below reacts to those events to update the score and hand over the ball. Add this code to the bottom of the JavaScript document.

       1: $(document).on('ping:playerScored', function(e) {
       2: console.log('player scored!');
       3: score[0]++;
       4: $('#playerScore').text(score[0]);
       5: ball.setOwner(opponent);
       6: ball.start();
       7: });
       8: $(document).on('ping:opponentScored', function(e) {
       9: console.log('opponent scored!');
      10: score[1]++;
      11: $('#opponentScore').text(score[1]);
      12: ball.setOwner(player);
      13: ball.start();
      14: });

    Now when the ball makes it past your opponent (which isn’t that difficult, as the opponent doesn’t move) your score will go up, and the ball will be handed to the opponent. However, the opponent will just hold onto the ball.

    Step 9. Adding an AI

    You almost have a game.

    The last step is adding the opponent with simple AI.

    The opponent will try to stay parallel with the ball as it moves about. If the opponent catches the ball, it will move randomly and fire the ball in a random direction.

    To make the AI feel a little more human, we will add delays in everything done.

    The opponent AI has three possible states: following, aiming/shooting and waiting. I’ll be the state between following actions to add a more human element. Start with just that for the AI object:

       1: function AI(playerToControl) {
       2: var ctl = playerToControl;
       3: var State = {
       4: WAITING: 0,
       5: FOLLOWING: 1,
       6: AIMING: 2
       7: }
       8: var currentState = State.FOLLOWING;
       9: }

    Depending on the state of the AI, I’ll want it to do a different action. Just like the ball, I’ll make an update function I can call in requestAnimationFrame to have the AI act according to its state:

    Do something to follow the ball.

       1: function update() {
       2: switch (currentState) {
       3: case State.FOLLOWING:

    Do something to wait.

       1: break;
       2: case State.WAITING:

    Do Something to Aiming

       1: break;
       2: case State.AIMING:
       3: break;
       4: }

    The FOLLOWING state is straightforward. The opponent moves in the vertical direction of the ball, and the AI transitions to the WAITING state to inject some slowed reaction time. The code below shows these two states:

       1: function moveTowardsBall() {
       2: // Move the same distance the player would move, to make it fair.
       3: if(ball.getPosition()[1] >= ctl.getPosition()[1] + 64) {
       4: ctl.move(distance);
       5: } else {
       6: ctl.move(-distance);
       7: }
       8: }
       9: function update() {
      10: switch (currentState) {
      11: case State.FOLLOWING:
      12: moveTowardsBall();
      13: currentState = State.WAITING;
      14: case State.WAITING:
      15: setTimeout(function() {
      16: currentState = State.FOLLOWING;
      17: }, 400);
      18: break;
      19: }
      20: }
      21: }

    The AI alternates between having to follow the ball and wait a split second. Now add the code to the game-wide update function:

       1: function update(time) {
       2: var t = time - lastUpdate;
       3: lastUpdate = time;
       4: ball.update(t);
       5: ai.update();
       6: requestAnimationFrame(update);
       7: }

    When you run the game, you’ll see the opponent follow the ball’s movements,

    So thats a nice little AI in less than 30 lines of code.

    Of course, if the opponent catches the ball, it won’t do anything.

    So we now need to handle the actions for the AIMING state.

    I want the AI to move randomly a few times and then fire the ball in a random direction. Let’s add a private function that does just that.

    Adding the aimAndFire function to the AIMING case statement makes a fully functional AI against which to play.

       1: function repeat(cb, cbFinal, interval, count) {
       2: var timeout = function() {
       3: repeat(cb, cbFinal, interval, count-1);
       4: }
       5: if (count <= 0) {
       6: cbFinal();
       7: } else {
       8: cb();
       9: setTimeout(function() {
      10: repeat(cb, cbFinal, interval, count-1);
      11: }, interval);
      12: }
      13: }
      14: function aimAndFire() {

    Repeat the motion action 5 to 10 times.

       1: var numRepeats = Math.floor(5 + Math.random() \* 5);
       2: function randomMove() {
       3: if (Math.random() > .5) {
       4: ctl.move(-distance);
       5: } else {
       6: ctl.move(distance);
       7: }
       8: }
       9: function randomAimAndFire() {
      10: var d = Math.floor( Math.random() \* 3 - 1 );
      11: opponent.setAim(d);

    Finally, set the state to FOLLOWING.

       1: currentState = State.FOLLOWING;
       2: }
       3: repeat(randomMove, randomAimAndFire, 250, numRepeats);
       4: }

    Thanks you have completed the tutorial

    All you need to do now is your publish your game to your Azure subscription.

    Simply select Web site under the solution explorer right click and select publish


    You can download the entire source to the project at

    Step 10. Testing your web site

    This code  is interoperable with modern browsers like Chrome, Firefox, and Microsoft Edge, it’s always a best practice to double-check.

    You can do this easily with tools like and use a selection of free tools available at dev.modern.IE:

    You can also scan your existing web sites and apps for out-of-date libraries, layout issues, and accessibility

    And you can even now test you site Remotely for Microsoft Edge Support

    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)

  • Microsoft UK Faculty Connection

    Minecraft and Hour of Code



    Get Ready!

    Welcome to the Hour of Code Microsoft Event Toolkit we have a dedicated web site at 

    Fancy running an Hour of Code session at your school, college or University?

    You can download the Microsoft Event Toolkit to receive a free facilitator guide, quick tip sheet, PowerPoint slides, and brief orientation video. You can also join a free Preparation Webinar with live chat for questions and answers. Download your Toolkit today, and get ready to lead your own Hour of Code

    Download the toolkit for Microsoft Partners and Public


    Are you interested in leading an Hour of Code, an annual event designed to share the joy of coding with students of all ages?

    Get ready, with this practical, 45-minute webinar!

    Download the free Microsoft Hour of Code Event Toolkit, and then join the experts (pick from a morning or evening session) for an overview of the kit, helpful tips and advice from the experts, and a live Q&A session. The toolkit includes a facilitator guide, a quick tip sheet, PowerPoint slides, an orientation video, and more, so you can lead with confidence.

    To express our commitment to increase access to computer science education to all youth around the globe, Microsoft is providing everything one needs to lead their own Hour of Code. The Hour of Code™ is a campaign to show anyone they can learn the basics of computer science. The 2015 Hour of Code campaign is during Computer Science Education Week, December 7–13, 2015. The Hour of Code™ campaign is owned and managed by the United States-based nonprofit The campaign is backed by over 100 partners and spans more than 180 countries and over 30 languages. Microsoft is a top execution partner for the Hour of Code™ campaign.

    REGISTER NOW - Hour of Code  preparation webinar for the general public

    Tuesday, December 01, 2015
    8:00-8:45am and 5:00-5:45pm PST

  • Microsoft UK Faculty Connection

    How to land your dream job



    Your next employer is going to look you up online. You can influence what they see by creating an online resume. In this series of posts we share everything you need to create an online resume!

    Where can I host it?

    Consider hosting it with Microsoft Azure. Students get basic web hosting for free on Azure through Microsoft DreamSpark

    How does a student get a free DreamSpark account?

    How do I activate the Azure benefits in DreamSpark?

    How do I build it?

    Azure can host websites created with HTML & CSS, Node.js, PHP, ASP.NET and more. But to build a website as quickly as possible you may want to look into a tool such as WordPress.

    How do I create a WordPress website on Azure?

    How to I customize my WordPress website?

    What should I include in an online resume?

    As part of this year Get in The Game Tour with #GradsInGames we asked some of the hiring managers and recruiters at Microsoft and external companies to share some DOs and DONTs for online resumes.

    Please keep in mind, that opinions on what makes the perfect resume are going to vary. In the end there is no magic formula for the perfect online resume.

    This should help you understand some of the differences between a paper and online resume, and how to make the most of the online format.

    DOs and DONTs of online resumes

    Your future employer is going to look you up online!

    So you better create an online resume to present yourself professionally.

    What NOT to do!


    DON’T create it and forget it

    You sit down and create an online resume today, but what impression does that leave on a hiring manager when in two years they read your resume and it says the last project you completed was two years ago and doesn’t mention any technologies from the past two years? Make a commitment to update your online resume at least twice a year. Let technology work for you, set yourself up a calendar reminder so you don’t forget to update it!

    DON’T just cut and paste your paper resume

    Paper resumes can and should be tailored for each job application. Read the job description and make sure the resume you submit addresses the points in the job description.

    Online resumes should complement your paper resume, you aren’t going to create different online resumes for each job you apply for. Any potential employer may read your online resume, so it needs to be more generic than your paper resume.

    You can have a link to a paper resume on your online resume website so potential employers can print it if needed. Wondering why anyone would print out something available online? Some recruiters spend a lot of time travelling and may read over resumes while in transit where they have no internet access.

    DON’T have a paper and online resume that present two different people

    This one can be a bit of a challenge but it’s very important! If you are going to tailor your paper resume for

    Your future employer is going to look you up online! Create an online resume to present yourself professionally. This blog post contains DOs and DONTs of online resumes collected from Microsoft recruiters and hiring managers.

    I spend a lot of time at events with students. Because I work at Microsoft, I am frequently asked how can I get a job at Microsoft? In this age of easy access to information, you can be sure that any potential employer is probably going to look you up online. Creating an online resume to complement your paper resume can help show you look your best to a potential employer.

    I reached out to a number of managers and recruiters at Microsoft to ask them for some DOs and DONTs for online resumes. Of course every hiring manager is going to have different opinions, but I share some of the opinions here to help you put together a strong online resume. But in the end remember, the only absolutel rule of resumes is there are no absolute rules. You should always apply your best judgement given your personality, your skills, and the job you are applying for when creating any resume online or paper.

    With that caveat, here are some guidelines you can consider when creating an online resume

    What to DO!

    image image

    DO include links to your work

    This is one of the best things about an online resume! You can add hyperlinks to different examples of your work to showcase your skills. Consider adding links to

    • Apps you have published
    • Websites you maintain
    • Conferences you helped organize
    • Work completed on internships
    • Blog posts or articles you wrote
    • Class projects
    • Competitions or hackathons you entered
    • Prizes or awards you have won
    • Code you have shared on GitHub
    • Videos of you presenting or showcasing your work
    • 3d Models renders look at tools like

    DO make sure your online resume looks good on different devices

    Your potential employer could be viewing your online resume from a desktop, tablet or phone. Make sure your website is dynamic and displays well on different screen sizes. If you are using WordPress this means you need to pick a template that supports features such as media queries. If you are creating your own websites it may mean looking into media queries or bootstrap for your website.

    DO include testimonials

    Usually there isn’t room on a paper resume to include testimonials, but since an online resume can include separate pages or tabs you have the option of including additional ‘if you are interested’ information. Testimonials are a great if you are interested piece to include. I wouldn’t put it on the front page, but having a link to comments and testimonials can be a nice touch. Let someone else talk about how awesome you are. Possible sources for testimonials might include

    • Reviews from past managers
    • Kudos for volunteer work you completed
    • Compliments from faculty you worked with doing research or as a teaching assistant.

    It is a courtesy to ask permission from someone before you quote them on your website

    DO list your skills/programming languages

    When applying for any technical job, the hiring manager will want to know what programming languages you know and how much experience you have with each language.

    Listing your languages from most to least proficient is an easy way to indicate skill levels.

    When you mention projects you have worked on, you should specify what programming languages you used on the project

    Be careful when ranking your programming skill from 1-10. There are a few reasons to be cautious:

    • If you list yourself as a 9 or 10 skill level, some managers may be skeptical and think you are overrating your skills
    • If you list yourself as a 1 or 2 a manager might wonder why you bothered listing that language at all
    • The biggest risk however is the way a numeric ranking is open to misinterpretation. When you fill out a survey at a restaurant. If you are asked to rank service out of 5 do you rank it 5/5 because there weren’t any problems with the service, or do you automatically give a 4 unless the service was outstanding? If an employer asks you to rank your coding skill from 1-10, if possible ask the employer what they consider a 7, an 8, a 9 and a 10? If you can create classes using inheritance and polymorphism and manage error handling is that a 6 and 8 or a 10? Your interpretation of the 1-10 scale and the employer’s interpretation of the scale may be completely different.

    DO include your contact information

    Every online resume should provide a way to contact the candidate. If you are a student you may want to provide a personal and a school email address. Sometimes an employer sends an email during a school break and you can miss an opportunity because you weren’t checking your school email.

    DO pay attention to details

    If you have any friends with an eye for detail, now is the time to ask them for help! Is the text aligned? Do you have any spelling mistakes? Did you accidentally change the font size on the headings half way through the page? Is the spacing consistent? Are the colors complimentary or distracting?

    Some people are visual. If something  on the page is inconsistent it distracts them from the content. I have worked with managers who simply could not read and process content unless it was visually well organized. It took me many years of learning the hard way, that sometimes simply providing good content is not enough, it has to look good as well.  When it comes to an online resume, you want to be picky and take the time to make it look good!

    DO use the first person

    Paper resumes are often written in the third person. Blogs and online profiles are usually written in the first person

    Instead of “Shelby developed a phone application”

    Try “I developed a phone application

    DO show how you learn and grow

    If there is one constant in life and work it is change. The technology skills needed for a jo you apply for today will change in the next one to five years. When an employer is considering you for a job, they want to know you can keep up with the changing technology. Showing your ability and passion to learn and grow is a great way to show an employer that you will learn and grow with the company. How do you show that in an online resume? Share what you taught yourself outside class and share any situations where you applied what you learned in the class outside the classroom.

    DO provide team player examples

    Hiring managers expect you to be able to work well on a team. If you can provide specific examples of working on a team and your role within that team, mention that in your resume. You may have mentioned a class project you worked on, specify how many people worked on that project and be prepare when you get to the interview to talk about your role on that team, conflicts that arose and how they were resolved. Working on a team is about showing you can work with different types of people, sometimes you may be asked to take on a leadership role, sometimes someone else may take the lead. Did you know experience with improvisational comedy is generally seen to be a sign of a good team player? Many of the rules of improve comedy translate into skills and tactics that help people work in a team environment. Improv performers have to stay positive, roll with the changes, and focus on making the team rather than themselves as an individual successful.

    DO provide a professional photo

    A photo on your online resume is a nice touch, but make sure the photo quality is good and that your photo looks professional.

    If you don’t have access to a photo studio with good lighting, take a picture outside on a cloudy day for the most flattering light

    Make sure you take a high resolution picture and display a smaller version of that image on your site so the photo looks crisp. Don’t use a low resolution picture and enlarge it, or the picture may look.

    DO take advantage of the programs available to you as a student!

    Here are a few Microsoft programs you may want to check out as well to help you stand out.  Remember showing what you have done outside the classroom is a great way to stand out!

    What About Working at Microsoft

    For students interested in working at Microsoft, here are some answers to frequently asked questions about jobs at Microsoft

    Internships for 2nd Year Students



    Final Year Graduate placements


    Getting a Job at Microsoft Q&A
    How do I apply for an internship/co-op job at Microsoft?
    I am graduating and looking for a full-time position where do I apply?

    If I am graduating can I still apply for internship positions?

    No. You will not be considered for internship positions if you have graduated

    There is no recruiter been to my University and we haven't been part of any tour! How can I still get a job?
    Yes go to 
    I want to work for the Gaming Studio how do I apply? 

    There are recruiters who specifically focus on hiring for the Gaming Studios, so keep an eye out for job postings for positions specifically at the Gaming Studios. If you see one it is worth applying specifically for that position even if you already submitted your resume to as part of the Get in the Game Tour Microsoft Studios staff attend and speak at UK Universities.

    How do I find my local recruiter?

    There is a Find recruiters link on the site


    Got any tips on how go get an interview? Or how to rock my interview?

    Check out the tips at


    How do I find out if there are recruiting events in my area

    There is a Find events link on the site


    Graduate Student questions

    I am a graduate student how do I apply for a job at Microsoft?

    There are positions on some teams where a graduate degree is either a requirement, or increases your chance of getting a position.

    How do I get a job at Microsoft Research?
    Microsoft Research (MSR) has their own recruiting process

    MSR offers internship opportunities at research locations around the world. Intern candidates must be students enrolled in a relevant field of study, such as computer science, engineering, or social sciences with a focus on computer technology. The majority of our interns are PhD candidates; however, in some instances we also accept master’s and bachelor's students who demonstrate a serious interest in research.
    Apply at

    There are also Post-doc research opportunities with Microsoft Research. Candidates should have a strong academic record in CS or a relevant technical area. They must have completed the requirements for a PhD including submission of their thesis. They are hired for a one or two year fixed term appointment

    Apply at

    Keep learning and get rewards!

    Use your cloud skills to enter competitions such as Hello Cloud, visit for contest details as well as tutorials and other great student resources.

    You can get Visual Studio Community for free . For Linux and OS X users try Visual Studio code for free!

    Get up to date and learn the latest technologies b completing a free online course at via

  • Microsoft UK Faculty Connection

    BBC Micro:Bit

    There has been a lot of information and discussion over the past few days at Microsoft Future decoded about the BBC Micro:Bit.

    So what is the BBC micro:bit

    The BBC describe the micro:bit as a pocket-sized, codable computer that allows children to get creative with technology. Made possible through a major partnership with 28 organisations, up to 1 million micro:bits will be given away, one to every 11 or 12 year old child in year 7 or equivalent across the UK, for free.

    The picture here is not the final micro:bit, its simply the prototype that all the partners are presently using.

    From a education STEM perspective Microsoft is working with two project BloodhoundSSC to help them use the Micro:Bit within their Rocket Car Challenge and the Satellite Applications Catapult details of these project was shared at Microsoft Future Decoded event.

    The BBC micro:bit is based on the mbed HDK. The target MCU is a Nordic nRF51822 with 16K RAM, 256K Flash. As well as the nRF51822 there's also an onboard accelerometer and magnetometer from Freescale.




    • The Micro:Bit Can be programmed using the BBC's online interface with tools such as:
      • Microsoft TouchDevelop IDE
      • Microsoft Blocks
    • mbed enabled
      • Online IDE
      • Easy to use C/C++ SDK
      • Dedicated micro:bit runtime libraries for rapid development
    • Nordic nRF51822 Multi-protocol Bluetooth® 4.0 low energy/2.4GHz RF SoC
      • 32-bit ARM Cortex M0 processor (16MHz)
      • 16kB RAM
      • 256kB Flash
      • Bluetooth Low Energy Master/Slave capable
    • Input/Output
      • 25 LED Matrix
      • Freescale MMA8652 3-axis Accelerometer
      • Freescale MAG3110 3-axis Magnetometer (e-compass)
      • Push Button x2
      • USB and Edge connector Serial I/O
      • 2/3 reconfigurable PWM outputs
      • 5 x Banana/Croc-clip connectors
      • Edge connector
      • 6 x Analog In
      • 6-17 GPIO (configuration dependent)
      • SPI
      • i2c
    • USB Micro B connector
    • JST power connector (3v)

    The micro:bit runtime, developed by Lancaster University, abstracts all of the micro:bit hardware and provides an easy to use API that also includes a scheduler, managed types and eventing subsystems.

    There are some other really nice features for school children including the Kodu support for the BBC Micro:Bit. Check out this Kodu/Micro:bit feature demo.

    So how are children going to get Started with the Micro:Bit

    The obvious first way is using the BBC Micro:Bit to control robots in the game built with Kodu

    You can also create displays on the BBC Micro:Bit LED set as well.

    But where we are really interested is with projects like Bloodhound SSC and the Space Catapult Accelerator where you can attached sensors and other devices to transmit information outside the micro:Bit.

    So Its exciting times the BBC and partners have been and will be continuing to run events around the UK teaching teachers about the Micro:Bit. Some teachers from these events are posting things they are learning, seeing and doing across a number of channels from Computing at Schools to personal blogs:


    If your interested in learning more then you can see some of the resources available and try out the online simulator (programming in TouchDevelop, Microsoft Block Editor (built on Blockly) and now Code Kingdom’s JavaScript) and Micro Python at the MicroBit home page.

  • Microsoft UK Faculty Connection

    Creating your first game with TouchDevelop in 15 steps


    I get lots of questions from school students about the best tools to start building their first game.

    The following blog is a getting started guide to building your first game with Microsoft This blog has been written from the basis of a student having zero experience of coding.

    The blog has been designed as walk through to show you the step by step instructions of creating your first game.

    So what is

    Touch Develop is a browser based development environment created by Microsoft Research.

    Step 1. Launch Touch Develop and start creating a game

    Launch Touch develop by navigating to

    Select the Launch Touch Develop button


    You can build a game with Touch develop without signing in. But, if you want to be able to save your game, and you want the ability to create your own custom graphics to the game you will need to sign in. You can sign in with a Microsoft, Facebook, Gmail, or Yahoo account.

    Select Sign in to sign in with an account


    Let’s create our first game!

    Select the Create Script tile


    Select the blank game template


    Give your game a name and select create


    You will see a screen with some default code on it that creates the beginning of a game. Don’t worry about the code just yet, for now let’s just try running the game to see what happens.

    Select the run main button to run your game


    Step 2. Understanding game objects

    So what can you see when the game runs?


    If you click or tap on the screen the monster head moves higher.

    The game also contains a Game object and a Board object which you can’t see but affect what happens in the game

    These objects make up the elements that allow our video game to work. All programming languages have the concept of objects. The button you clicked on to create a game is an object, a web page is an object, the text box where you typed in a name for the game is an object.

    Step 3. Game object properties

    All objects have properties that affect how they appear and how they work. For example, a button has properties that control its size, colour, and what text is displayed on the button. A text box has properties that control its font, the text displayed in the text box, and whether it is read only.

    Let’s look at the properties of some of the objects in our game

    Game properties

    score – controls the score in the game
    lives – controls how many lives you have left in the game

    Board properties

    width – controls the width of the game playing area
    height – controls the height of the game playing area
    background – controls the background of your game playing area

    Sprite properties

    artwork – controls the appearance of your sprite character or obstacle
    speed – controls the speed at which your sprite moves
    height – controls the height of your sprite
    width – controls the width of your sprite
    Position – controls where the sprite appears on the screen

    Game object functions

    If we want to change the value of a property, we usually call a function. Functions are programs we can call that do something for us. In this case, the functions change the value of a property for us. To change the value of a score we call set score, to change a width we call set width. You get the idea… Although sometimes the function names are a little different, for example to change the position you call set pos.

    Game functions

    set score – change the score
    set life – changes the number of lives

    Board functions

    set width – changes the width
    set height – changes the height
    set background – allows you to change the background colour
    set background picture – allows you to display a picture as a background

    Sprite functions

    set speed – changes the speed of the sprite
    set height – changes the size of your sprite
    set width – changes the size of your sprite
    set pos – changes where on the screen your sprite is displayed

    Passing values to functions

    When we call a function to change a property to a new value, somehow we have to be able to tell the function what value we want the property to have. If you want to set the speed to 100, you have to pass the value of 100, if you want to set the score to 500, you have to pass in the value 500. We do this using parameters. Many functions accept parameters, these are the values we pass to the functions so they do what we want them to do.

    For example, if I want to change the number of lives in the game:

    I will work with the game object, since lives is a property of the game object
    The set life function can be used to change the number of lives
    I want to set the number of lives to 1000

    The code will look like this:

    game-> set life(1000)

    It’s one thing to read about it it’s another thing to try it! Let’s go to our code and try a few changes

    Change the number of lives in our game

    On the screen with your code, select the line of code that says game->bounce on sides then select the + symbol underneath that to add a new line of code


    In the command tray beneath the code select the game tile clip_image018. Then select the set life tile clip_image020 If you don’t see the set life tile displayed after you click game, select the more tile clip_image022to get more tiles.

    Replace the 0 with 100 to set the number of lives to 100.

    When you are finished, your code should look something like this:


    Test your chances by selecting run main clip_image026 to launch your game. You should have 100 lives!


    EXPERT TIP! Every time you change something in your game, run the game to test your change and see how it affects the game. That way, if you make a mistake, it is easier to fix. If you make 10 changes and then run the game and it doesn’t work, it is much harder to figure out where you made a mistake!

    Step 4. Change the size of your character

    What if we want to change the size of our monster?

    I want to do something to the sprite object
    The set width function can be used to change the number of lives
    I want to set the width to 50

    The code will look something like this:

    spritename-> set width(50)

    Because we will have multiple sprites in our game (most games have multiple characters and obstacles each of which is a different sprite) we give each sprite a name. Giving each sprite a unique name allows us to control the size, position and speed of each individual character. In our game, the sprite with the monster is called monster (when you write code it is a good idea to give your sprites names that make it easy to remember which is which! Monster is a great name for our monster sprite). So to change the size of our monster, our code would look something like this:

    monster-> set width(50)

    Try it! Add a new line of code under the line that says var monster := game->create sprite(monster)

    For the new line of code select the monster tile clip_image030, and the set width tile. Remember you can click on the more button if you don’t see the tile listed. If it doesn’t show up when you click more, then click the more button with the search icon clip_image032then search for and select the tile you want


    Set the width to a value of 50 (or any other value you want to try, it’s okay to experiment, in fact I encourage it, it’s a great way to learn!)

    Your code should look something like this


    Run your game again, your monster has changed size!

    Change the background colour

    What if we want to change the background colour of our game?

    I want to do something to the board object
    The set background function can be used to change the background colour
    I want to set the colour to a particular value

    The code will look something like this

    board->set background(colours->red)

    Let’s try it! Add a new line of code under the line var board:= game->start

    Select board | set background from the tray

    By default it has a parameter of colours-> random . This will randomly select a background colour whenever you run the game. If you prefer to select a specific colour, delete the word random and select a specific colour tile instead.

    When you are done your code should look something like this


    Run the game, and you should see your new background! If you chose random, then each time you stop and restart the game, it will use a different random colour.

    Step 5. Changing and adding art

    The art you use in your game affects the mood and tone of the game. A game can change from silly and funny to dark and sinister simply by changing the artwork

    Let’s learn how to add new art to our game. The first step is to add new picture resources to our game. Once we have the picture resources we want, we can use those picture resources in our game.

    Add new art from the Touch Develop art library

    At the moment the only artwork available for your game is the monster head. Let’s add some new artwork to our picture resources.

    Select the script button in the top corner of your code editor


    Select + add new


    Select picture resource


    You can pick a picture that someone else has uploaded to the Touch Develop server by choosing search art pictures.


    Now type in a keyword to search for artwork, for example unicorn, ninja, cat, puppy and select the image you like. I have selected a cute dog that I would like to use instead of the monster head


    After you select the dog, you will be brought back to the art resource page. You can change the name of your art work if you want. I renamed my picture to cute puppy.

    Uploading your own artwork

    This option is only available if you have signed in to Touch Develop with an account.

    To upload your own artwork, follow the same steps as before, but instead of choosing search art pictures, choose upload.

    1. Browse to the file you want to use as artwork (this could be a picture you drew using a tool such as MS Paint, or an image you already have on your computer)
    2. Give your picture a name
    3. Provide a description of your picture, so others will be able to use it. Your art is being added to the Touch Develop art library.
    4. If your image has a white background, you likely want to select the remove white background checkbox, this way you don’t see a white box around the sprite on the screen.
    5. Select publish to add your artwork to your library and the Touch Develop art library.


    Your image is now available as a picture resource

    Returning to your code after adding new art to the library

    Sometimes it is a little confusing figuring out how to navigate back to the code after you add new art to a library.

    To get back to your code, select script


    The main code for your program is called main() so anytime you want to go back to your code select main() from your scripts.


    Step 6. Changing the background to display a picture

    Instead of displaying a solid colour for a background, you may want to display an image. You could display a city scape, a jungle, a cloudy sky, whatever fits the look and feel you want for your game.

    Add a new picture resource using the steps described above for the background art you want to display.

    We want to change the background to display a picture

    I want to call a function on the board object
    The set background picture function can be used to display an image in the background
    I need to specify one of my picture resources as the image to display for a background

    The code will look something like this:

    board-> set background picture(my selected picture)

    Instead of calling the set background function which can only change the colour of the background, we call the set background picture function which can change the background to a picture.

    Delete the line of code that sets the colour of your background : board -> set background(colours->…)

    Add a new line of code after the line of code that says game-> splash(“Get ready”)

    Select board clip_image058, select set background picture clip_image060, select art clip_image062, anselect the tile for the picture resource you want to use as your background clip_image064

    Your finished code will look something like this


    Run your game and you should see your image as a background


    Step 7. Creating a scrolling background

    You can create the illusion of movement in your game by simply scrolling the background image, so it looks like your character is travelling through your created world. To make a scrolling background we have to call a different function. The function we need is not available on the board object, it is a function on the game object.

    So, if we want a scrolling background

    1. I want to call a function that is part of the game object
    2.The set background scene function can be used to display a scrolling image as a background
    3. I need to specify if I want the background to scroll horizontally or vertically
    4. I need to specify which of my picture resources to display in the background

    The code will look something like this:

    game-> set background scene(“horizontal”, my selected picture)

    Delete the line of code that sets the picture of your background : board-> set background picture(my selected picture)

    Add a new line of code after the line of code that says game-> splash(“Get ready”)

    Select game | set background scene | art , and select the tile for the picture resource you want to use as your background.

    When you are finished your code should look something like this


    Run your game, the scrolling background creates the illusion that your character is travelling through your world. Feel free to experiment and change the scrolling to vertical. As you learn these new functions, it’s a great idea to try entering different parameters to see what happens. You can always change it back if you don’t like it! But remember to test after each change, so if you don’t like it or you break the game you remember how to change it back!

    Step 8. Changing the artwork for a sprite

    Select the line of code that creates your monster sprite.


    Put the cursor inside the parentheses and delete the word monster

    To choose artwork for your sprite select art clip_image073

    You should see all the picture resources you added.

    Select the tile for your new artwork clip_image075

    Your code should look something like this:


    Run the game, the monster should be replaced by your chosen artwork


    Step 9. Adding a sprite

    At the moment our game only has one character, a monster head that bounces up and down. Typically, games have a main character (like our monster) as well as a series of obstacles or enemies.

    Each obstacle, power up, enemy, or character is created by adding a sprite. When you add a sprite you get to choose the artwork used to represent your sprite on the screen (e.g. a robot, a ninja, a unicorn)

    Look through the code and see if you can find the line of code that creates our monster. (HINT: It’s the line that calls the function create sprite.)


    To add a sprite to the game we have to

    1. Use the game object
    2. Call the create sprite function
    3. Specify the artwork for the sprite as a parameter

    The code would look something like this:

    game->create sprite(unicorn)

    Creating the sprite

    Add a new line of code under the line of code that creates your existing sprite (var monster := game->create sprite(monster))

    Select game clip_image083 and create sprite clip_image085.

    Select art clip_image086 and select the tile for your new artwork clip_image088

    Your code should look something like this:


    Run the game, you will see your new sprite appear in the middle of the screen. We will learn how to change where it appears in the next section.


    Step 10. Giving your sprite a name

    In order to edit the properties of your sprite, such as it’s size and width, you need to give it a name.

    Select the line of code that creates your sprite and select the tile store in var clip_image094

    This will store your sprite in a variable called sprite


    I am going to rename my variable to something more meaningful. If I select the variable name sprite and select the rename tile, I can change the variable name to robot.



    Step 11. Renaming an existing sprite

    Hmmm, if we look at our code we have a cute puppy in a sprite called monster… You can keep that if you want, but I like the names of my sprites to reflect their characters to avoid confusion

    If you want to rename your sprite, you can select the line of code


    Then click on the variable name monster. You will see a rounded rectangle appear around the word monster when it is selected.

    Now click on the rename tile clip_image104 and type in a new name for your sprite.


    One of the really great things about renaming a sprite, is that everywhere else in the code there was a reference to the monster sprite has now been changed to use the new variable name “puppy”. You will notice that the code that set the width of our sprite now says puppy->set width. So you don’t need to worry about updating existing code when you change the name of a sprite.

    Congratulations! You have now added new artwork to your game and you now have two sprites! Your artwork and your sprite names may be different from mine, but you should have a couple of lines of code that look something like this


    Step 12. Setting the position of your sprite

    When you add a sprite to the screen, by default it appears in the middle of the screen and it doesn’t move.

    There are functions you can call to change the position of a sprite

    set x
    set y
    pos( x , y )

    x and y refer to the x and y coordinates of the sprite on your screen.

    You are probably used to an x,y co-ordinate system like this


    In school we were taught to plot points on the grid as x,y pairs


    In Touch Develop, the top left corner of the screen is the 0,0 position. As you move to the right X increases, as you move down y increases. This can be a bit confusing at first, because you might have expected Y to increase as you move up, but in Touch Develop y increases as you move down.


    The board is 800 pixels wide, and 400 pixels high. When we put a sprite on the board by default it appears in the middle of the game board at (400,200)


    Use the set x, set y, or set pos functions to specify new x or y coordinates to reposition a sprite

    To change the position of a sprite we need to

    Use our sprite object
    Call the set pos function
    Specify the x and y coordinates for the sprite as parameters

    The code would look something like this:

    Mysprite->set pos(50,400)

    Let’s do it! Add a new line of code underneath the line where you created your new sprite

    Notice there is a tile in the command tray for your sprite! This allows you to change the properties of your sprite.


    Select the tile for your sprite (mine is called robot). Select set pos, and then enter x and y coordinates such as 50,400 for your sprite position.

    Your code will look something like this


    Run your game, you will see the position of your sprite has changed


    FUN TIP: Instead of specifying a particular x or y coordinate, you can select the math | random tile and specify a range of values to generate a random value for your position. For example, you could specify a random height between 0 and 400 so the player never knows where the sprite will appear.


    Step 13. Making a sprite move

    We have changed the position of our sprite but it still isn’t moving. In order to make it move we have to give it a speed.

    We can change the speed using any of the following functions

    set speed x( vx ) – to make the sprite move horizontally (along the x axis)
    set speed y( vy ) – to make the sprite move vertically (along the y axis)
    set speed( vx , vy) – to make the sprite move diagonally

    Let’s get our sprite to move around the screen so it can collide with our main character

    To make our sprite move we need toq.

    1. Use our sprite object
    2. Call the set speed function
    3. Specify the x and y velocity for the sprite as parameters

    The code would look something like this:

    Mysprite->set speed(200,100)

    Add a new line of code after you set the position of your sprite.

    Select the tile for your sprite. Select set speed, and enter an x (horizontal) velocity, and a y (vertical) velocity.

    Your code should look something like this

    Run your game and watch your sprite move around the screen. Experiment with different values for the x and y speed until you are happy with the final effect.

    FUN TIP: You may have noticed that when your sprite hits the edge of the screen it bounces back. That is due to this line of code


    If you delete that line of code then a character will go off the screen when it reaches the edge. This allows you to create different styles of games. Instead of having a character bouncing around, you could create a game that adds new sprites which fly across the screen for your character to dodge.

    Congratulations! You now have added a sprite and are able to control its position and movement on the screen.

    Step 14. Handling collisions between sprites

    We have two characters on the screen, but nothing happens when they collide! Collisions usually are the key component that determines game play. Do we get a point for hitting the other character or do we lose a life? You could have different sprites that cause different effects. What if there was a sprite that shrinks the character when we hit it and another character that makes our character get bigger?

    Regardless of what you want to happen when the two characters collide, you need to write code to detect when the two characters hit each other.

    This is called collision detection, and with many tools it can be one of the most difficult aspects of video game design. Luckily, Touch Develop makes it relatively easy. We just need to add an If statement to ask if the two characters overlap.

    When we are done the code will look something like this


    To add this code, add a new line underneath the code where you declared your sprite

    Select if clip_image132from the command tray.

    Delete the word true from the command and then select your sprite name from the command tray


    Don’t worry about the error message, it will disappear when we finish the command.

    Now select overlaps with clip_image136from the command tray. If it isn’t listed, remember you can search for commands using the more clip_image138button.

    Finally, specify the other sprite in the parentheses. When you are done your code should look something like this:


    If you look closely your code now says if the puppy overlaps with the robot do nothing!

    Now comes the fun part, what do we want to happen when they collide? This is a great time to experiment. How about

    Game-> remove life (1) – to take away one life

    Game-> add score(1) – to add one to my score

    Puppy->set width(puppy->width/2) – to shrink the sprite to half it’s current size

    FUN TIP: You can add a sound resource to your art library (follow the same process you did to add artwork, but select add a sound resource instead of add picture resource) and then select the sound resource from your art library and use the play function to make a noise whenever they collide!


    I have decided in my game, to remove a life and play a barking noise (following the instructions from the tip above) whenever my sprites collide. When I am done, my code looks like this


    Run your game, make the two sprites crash into each other…

    Nothing happens! You didn’t do anything wrong, I expected this… there is one more thing we have to do before the collisions will work correctly

    Step 15. Dealing with frames

    When you watch an animated movie, it’s actually made up of a series of still frames that are played one after the other very quickly to create the illusion of animation. Video games work the same way. Our game is actually made up of a series of frames. On each frame our sprites appear in a different spot on the screen.


    When we wrote the code to detect a collision it only checked for a collision on the very first frame. In the first frame our sprites are not touching each other, so the if statement did not run our code because the sprites do not overlap.

    We need to modify our code so it runs on every frame of the game. This tells the video game that if they overlap at any time during the game we want this code to run!

    Add a new line of code just before your if statement

    Select time | on every frame

    You should end up with code that looks something like this


    Of course we don’t want our code to do nothing on every frame, we want to run our if statement on every frame to see if our sprites overlap.

    You need to drag and drop your if statement into the middle of the time-> on every frame statement. When you are done it should look like this:


    Run your game, now when the two sprites collide you should lose a life, hear a noise, or whatever action you chose to happen when they crash!

    EXPERT TIP! You might notice that if you lose multiple lives or get multiple points when there is a collision. That’s because the two sprites overlap for multiple frames in a row. If you don’t like that behavior, you can add code inside your if statement to move the sprite after they collide. I moved my robot and had it randomly appear somewhere else on the left hand side of the screen after a collision.


    Congratulations! You have a working video game!

    Sharing your game

    Now that you have a working game, you may want to share it with others!

    Select script and then select publish


    On the publish screen select publish.


    After a few seconds a page will appear with a URL you can share with your friends so they can try your game! or share it with friends.



    What next?

    There are number of teaching and learning resources available for Microsoft TouchDevelop and these are a great next step after completing this blog http://imagine, under the create section.

    You can also complete the following Microsoft Virtual Academy training courses

    Learn to code with CODExist: the Birth of Bot: this course teaches you how to build a video game from scratch using Touch Develop. It’s a more complete version of the tutorial you saw here.

    Learn to Code with CODExist: Bot Levels Up: this course teaches you how to add new elements to your video game has other beginner coding tutorials to find contests and other great resources for students who are interested in coding using Touch Develop or other tools.
    The tutorials at , there are lots of different guided tutorials you can try.
    Find royalty free art assets you can use in your game here

    The most important thing is keep coding, share what you learn with others and have fun!

Page 1 of 109 (1,089 items) 12345»