INTRODUCTION This book will show you how to code exciting new games using JavaScript JavaScript is used to make web pages more interactive It can also create online games that run on desktops and mobile devices By the end of this book you will know many great techniques to make you the ultimate JavaScript expert mygame html You could use a plain text editor to create your code script alert Press any key to start script This will work fine but may be touchy as the software won't give you any help Sublime Text Web Browser Score 10 The best thing to use for the activities in this book is an offline HTML text editor This software will support you but also lets you learn JavaScript code You will use two separate windows Arrange them so you can see both at the same time script var score 0 var seconds 0 function movelt score The text editor to enter your code The browser to view the program running Save your work in the text editor every few minutes Refresh your page to see the changes in your code You can use many different web browsers but we recommend using Google Chrome for the activities in this book Make sure you have the latest version installed on your computer You will also learn some HTML in this book HTML is the language used to build web pages JavaScript is the language that brings those pages to life If you would like to learn more about how HTML works or if you need a beginner's guide to JavaScript then try reading some of the other books in the Generation Code series But if you haven't used HTML or JavaScript before you'll still be able to create all the games in this book So what are you waiting for Get coding Note Words in italics appear in the glossary on page 30 3
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
