GETTING STARTED You need a text editor to start coding in JavaScript There will probably be a simple text editor already on your computer called Notepad if you have Windows or TextEdit on a Mac This will be sufficient for you to get started but it will be much easier to create JavaScript if you download a more powerful text editor In this book we will use a text editor called Sublime Text There are many others you could download such as Brackets or Notepad All of these are free for you to try out STEP FIND THE SUBLIME TEXT WEBSITE www sublimetext com Open your web browser and visit www sublimetext com STEP 2 START DOWNLOADING I Download OSX Windows Windows 64 Click the Download button near the top of the web page Choose which version of Sublime Text you need If you are not sure ask an adult to help you find the correct version If you are using a Mac click the Apple menu then About On a PC click the Start menu select System and click About Wait for the download to complete STEP 3 INSTALL THE SOFTWARE Some web browsers will then ask you to run the installation program Choose Run If this does not happen don't panic The installer file should have been downloaded to your computer Look in your Downloads folder for it Double click it to start installing your new text editor You should get a big white or gray box giving you instructions on what to do next Follow these instructions to complete installation the
STEP 4 RUNNING SUBLIME TEXT On a PC Click Start Programs Sublime Text Or just click Sublime Text if it appears in the Recently added section On a Mac Click Finder Click Applications Make a shortcut by dragging Sublime Text from Finder onto your dock at the bottom of the Desktop Applications Click the Sublime Text icon STEP 5 START CODING Type this code into lines 1 2 and 3 of your text editor Sublime Text should automatically indent lines for you but if it does not make sure you indent lines of code exactly as shown Sublime Text Mark the start of a JavaScript section Show a message box saying Start Coding Mark the end of the JavaScript section STEP 6 SAVE YOUR CODE JAVASCRIPT NEEDS HTML Click File Save Save to your Documents folder Type start html as the filename Although we are coding with JavaScript we need to put our file inside some HTML code to make it work HTML stands for HyperText Markup Language It is the language used to build web pages STEP 7 VIEW YOUR PAGE Open your Documents folder Find the start html file and double click it Your web page should now load in your normal web browser You should get a message saying Start Coding Start Coding 5 OK HTML is used to describe what objects or elements are shown on a web page If you are creating a simple game you need to use HTML to add an image and some text to show the score JavaScript is added to tell the image to move around when different keys are pressed or the mouse is clicked It can also be used to display the score and make it change We need to use both HTML and JavaScript to make a more interesting game JavaScript was designed to be added to HTML pages to make them more interactive You will use a range of HTML elements in this book Each element uses tags to show what type of element it is see page 31 Tags are enclosed with angle brackets Documents start html
UFO POWER UP In this game the player has to move an alien spaceship a UFO as quickly as possible to collect energy sources The player moves the UFO by pressing the arrow keys on the keyboard The symbol for an atom in green below is used to represent an energy source After the player has collected five atoms the game stops and the time taken is shown You can play the game against your friends and see who can complete it in the fastest time The complete code for the game is listed on page 11 STEP PLANNING Documents ufo html The score is shown in an HTML paragraph element Score 5 Time 17 A timer will count how long it takes to collect five atoms Variables count the score how long the game has been running and the coordinates of the atom and the UFO Every time the UFO moves we need to check if it has reached the atom This is done by comparing their coordinates Well done Your time was 17 OK When five atoms have been collected the game ends and the time taken is shown We will only need one atom image Each time it has been collected by the UFO we will move it to a new random place and increase the score by 1 Pressing the arrow keys will change the ufoX horizontal and ufoY vertical coordinates making the UFO move around the screen Click OK to play again STEP 2 FIND SOME IMAGES Find an image of an atom to use or find another symbol to represent energy sources in your game Remember that the game's background is black so your symbol needs to be a color that will show up against it Save your image into the same folder as your HTML file Use a png image Our image is named atom png atom clipart search Search online for atom clipart to use Right click one image Click Save Image As Navigate to your Documents folder then click Save Now repeat this step but search for ufo clipart to
All of the style properties will be affected SMOOTH ANIMATIONS We will add a transition property to the UFO image to make it animate or more smoothly This means that the images style properties such as how far it is from the left or top of the screen will change gradually over a specific amount of time The changes will be spread over 0 5 seconds half a second STEP 3 START A NEW FILE Start by typing in the HTML for the game This will set up the body images and a paragraph for the score Set the background color Add the image of the atom Make sure the source src property matches the name of the downloaded file w Add the ufo image Sublime Text Click File Save and type ufo html as the filename Make sure you save it in your Documents folder Keep saving it every few minutes Add the score paragraph Add the time paragraph STEP 4 BEGIN THE SCRIPT Now that we have defined the elements that go on the page we need to start on the JavaScript At the start of the game we need to create the variables tell the program which function to run define a function to make random numbers when the page is loaded and ready tell the program which function to run define some functions to set coordinates when keys are pressed Start the script section Create variables to store the score game Time and coordinates Tell the program which function to run when keys are pressed Tell the program which function to run when the page is ready Define functions to set any element's coordinates Define a function that returns a random number between two values or
