If you have gone through Elementary JavaScript and made the game or have made your own HTML and JavaScript game, follow this tutorial to turn your game into an Android App!
The source code for the game converted to a Phone App is here on GitHub – Chapter 24 of Elementary JavaScript explains how to use GitHub.
We are going to use something called Cordova to turn our web game into a phone game. Lets get started.
Installing Cordova
To install cordova, open your terminal and type
npm install -g cordova
This will install cordova. The -g will install it globally so you can use it for all your projects. Before we can use Cordova, we must install all kinds of other stuff. Read on.
Installing Java (read carefully)
Cordova only supports Java 8. Oracle no longer allows you to download Java 8 without creating an account. However, as an alternative you can install OpenJDK 8. It can be downloaded from here: https://adoptopenjdk.net/upstream.html. Install OpenJDK 8. Do not install JDK11 or JRE8 by accident.
Installing Android Studio
Install Android Studio from here: https://developer.android.com/studio
Once you Install Android Studio, create a new project:
Once you have your project, let’s setup an android emulator. The Android Emulator runs a virtual phone or tablet on your computer. Once we have our game project ready, we can test and run our game in the emulator. Open AVD Manager:
Next, add a Virtual Device:
Click the green play button and you will see the emulator launch on your computer:
Setting Up Our Project
Next we need to create a cordova project for our game. For that I followed the instructions here. First, let’s create a project. pcg is the name in code for our Pokemon Card Game and PokemonCardGame is the name of the project:
cordova create pcg com.s1dd.pcg PokemonCardGame
Notice com.s1dd.pcg, the first word in this is always “com”, the second is your brand or company name and the last is your project name in code.
Once that is done, cordova will create a project folder structure for you. Go to the directory for that project in the terminal:
cd pcg
Once you are in that folder, run this:
cordova platform add android
In the project folder, you will find a folder called www. This is where you need to copy all the files of the game. Delete everything in that folder and replace it with our game files.
Making Things Work
In our project, we used ES6 exports and imports to get all the JavaScript files. That doesn’t work in cordova. So go to the HTML file and include everything as a script file:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</link>
</head>
<body>
<script src="helper.js"></script>
<script src="player.js"></script>
<script src="pokemonAPI.js"></script>
<script src="pokemonCard.js"></script>
<script src="game.js"></script>
</body>
</html>
Remove all the imports and exports from all the files.
Then in the terminal in the pcg folder, run this:
cordova emulate android
This should bring up the game in the emulator:
Now, to make sure that game is always in landscape mode and doesn’t switch to portrait mode on the phone, add this line to the config.xml file right above the <platform name="android"> line
<preference name="orientation" value="landscape" />
That’s it! Now we’ve made the game work on a phone. Stay tuned for the next posts to see what to do next to get the app on an actual phone and submitted to the Google Play store.
For a limited time, Elementary JavaScript is available on Barnes & Noble for only $23.99, the lowest it can go. Click here to buy it from Amazon.