Chapter 2 - A basic game, and a dev environment
I think it is important with learning any new skill to be doing it yourself, practising as much as possible. Programming is little different in this manner from learning to play an instrument (in fact a lot easier, at least for me).
So first here is a simple pong game made using the JavaScript "game engine" for you to play that I'll link to shortly. We can then starting playing around with the code and seeing what we can do. I'll do my best to maintain this link, though the url may change.
Keys:
W - Move paddle up
S - Move paddle down
Click Here (for reference current link directs to - http://gamedevhowto.x10host.com/pong)
Its a fairly simple game against a basic computer controlled opponent. But its pretty basic, lacking even a scoring system (hint, implementing this would be a good starter exercise). The source code is available for you to download and change on the git hub link:-
https://github.com/Owlzy/SSPIGE
The most straightforward way to download a project from github is to download the project as a zip archive. Go ahead and download this, extract it, and next we will need to setup a development environment. You can even open the files in a text editor like notepad if you'd like to see the contents of the src files.
To explain what I mean by development environment, this is very much a personal preference thing. But myself, I like to use what is referred to as an integrated development environment (IDE). Its a little like a word processor application like Microsoft Word, but for developers. In fact Microsoft have their own IDE, Visual Studio, which is worth learning to use.
Some programmers like to edit code in more simple text editors, but this guide will use what I think is quite a simple to use but powerful JavaScript IDE, WebStorm by JetBrains:-
https://www.jetbrains.com/webstorm/
There is a trail version available, with will be perfectly suitable for you get to started. I wont go over installing the program and will assume you were able to go through this process.
After installation run the program, and go to open project -> new project from files. From here select your unzipped project you downloaded from github. You can then navigate in the left hand menu to the /src directory. Here you can hopefully see the source files and they are named in a way that is at least fairly suggestive of their function. Go ahead and open some of the files and view the contents, but primarily you want to look in the GameScene.js file, which is where the main game loop is.
The next part starts to get a bit more programmer'y with the introduction of running programs from a console input, but it can be fun in that it looks somewhat like the Matrix film. I will only cover Windows, but you can easily look up doing the same process on a Mac, and if your on Linux I doubt you need any help.
JavaScript typically runs in a web browser, so what ever browser you use will be fine for running your program. Myself I like Chrome, but Firefox will actually let you run the game minus an extra step so at least for now I suggest you use Firefox.
Go ahead and download node.js , which provides you with the ability to download program dependencies easily. Don't worry too much about what they are right now, but they are just extra bits of code that will be used at some points either at run time or compilation.
Download NPM -
https://www.npmjs.com/get-npm
After installation you can open either command prompt or powershell, by searching for these terms in Windows start menu.
You will be presented with a console you can type in. Here you will need to learn a few basic commands. CD stands for change directory, and allows you to navigate to folders. I would recommend powershell as it can be a little easier to copy and paste into, but take a look at both if you like. Next open file explorer and navigate to your project directory, then copy and link in the address bar. Then type:-
cd my/project/address
Replacing with the address you copied from file explorer. Hit return and you should see the console is now in this directory. You can confirm your in the right place by typing:-
dir
And hitting return. It should then display the contents of the folder, and you should see a package.json
Next type and hit return:-
npm install
And hopefully if everything so far is setup correctly, you should see the dependencies downloading in the information displayed in the console window. You will also need to install gulp globally, by typing:-
npm install -g gulp
If I have set up the config file correctly, that should be basically it. You can now build the project by typing:-
gulp
Gulp is a task runner, and if it ran correctly you will see the tasks being run. This takes the src code found in the /src folder, and compiles it into a single file which it then copies into the /dist folder. Here is where our game is.
If you open the index file in Firefox you should be able to play the game. If your feeling confident go ahead and look at the code in the GameScene,js file and start changing some numbers. If you break it you can always replace the src files you changed. If you want to see your changes, currently you will have to again type gulp in the command window you had open previously.
If you managed to follow that process through successfully, I know I always find it a chore and I have done it a number of times, then I think its best to stop here.
In the next chapter we will cover more about variables, types, and how to use conditional statements to start performing some logic.
So first here is a simple pong game made using the JavaScript "game engine" for you to play that I'll link to shortly. We can then starting playing around with the code and seeing what we can do. I'll do my best to maintain this link, though the url may change.
Keys:
W - Move paddle up
S - Move paddle down
Click Here (for reference current link directs to - http://gamedevhowto.x10host.com/pong)
Its a fairly simple game against a basic computer controlled opponent. But its pretty basic, lacking even a scoring system (hint, implementing this would be a good starter exercise). The source code is available for you to download and change on the git hub link:-
https://github.com/Owlzy/SSPIGE
The most straightforward way to download a project from github is to download the project as a zip archive. Go ahead and download this, extract it, and next we will need to setup a development environment. You can even open the files in a text editor like notepad if you'd like to see the contents of the src files.
To explain what I mean by development environment, this is very much a personal preference thing. But myself, I like to use what is referred to as an integrated development environment (IDE). Its a little like a word processor application like Microsoft Word, but for developers. In fact Microsoft have their own IDE, Visual Studio, which is worth learning to use.
Some programmers like to edit code in more simple text editors, but this guide will use what I think is quite a simple to use but powerful JavaScript IDE, WebStorm by JetBrains:-
https://www.jetbrains.com/webstorm/
There is a trail version available, with will be perfectly suitable for you get to started. I wont go over installing the program and will assume you were able to go through this process.
After installation run the program, and go to open project -> new project from files. From here select your unzipped project you downloaded from github. You can then navigate in the left hand menu to the /src directory. Here you can hopefully see the source files and they are named in a way that is at least fairly suggestive of their function. Go ahead and open some of the files and view the contents, but primarily you want to look in the GameScene.js file, which is where the main game loop is.
The next part starts to get a bit more programmer'y with the introduction of running programs from a console input, but it can be fun in that it looks somewhat like the Matrix film. I will only cover Windows, but you can easily look up doing the same process on a Mac, and if your on Linux I doubt you need any help.
JavaScript typically runs in a web browser, so what ever browser you use will be fine for running your program. Myself I like Chrome, but Firefox will actually let you run the game minus an extra step so at least for now I suggest you use Firefox.
Go ahead and download node.js , which provides you with the ability to download program dependencies easily. Don't worry too much about what they are right now, but they are just extra bits of code that will be used at some points either at run time or compilation.
Download NPM -
https://www.npmjs.com/get-npm
After installation you can open either command prompt or powershell, by searching for these terms in Windows start menu.
You will be presented with a console you can type in. Here you will need to learn a few basic commands. CD stands for change directory, and allows you to navigate to folders. I would recommend powershell as it can be a little easier to copy and paste into, but take a look at both if you like. Next open file explorer and navigate to your project directory, then copy and link in the address bar. Then type:-
cd my/project/address
Replacing with the address you copied from file explorer. Hit return and you should see the console is now in this directory. You can confirm your in the right place by typing:-
dir
And hitting return. It should then display the contents of the folder, and you should see a package.json
Next type and hit return:-
npm install
And hopefully if everything so far is setup correctly, you should see the dependencies downloading in the information displayed in the console window. You will also need to install gulp globally, by typing:-
npm install -g gulp
If I have set up the config file correctly, that should be basically it. You can now build the project by typing:-
gulp
Gulp is a task runner, and if it ran correctly you will see the tasks being run. This takes the src code found in the /src folder, and compiles it into a single file which it then copies into the /dist folder. Here is where our game is.
If you open the index file in Firefox you should be able to play the game. If your feeling confident go ahead and look at the code in the GameScene,js file and start changing some numbers. If you break it you can always replace the src files you changed. If you want to see your changes, currently you will have to again type gulp in the command window you had open previously.
If you managed to follow that process through successfully, I know I always find it a chore and I have done it a number of times, then I think its best to stop here.
In the next chapter we will cover more about variables, types, and how to use conditional statements to start performing some logic.
Comments
Post a Comment