Hello, this is a tutorial/guide to building a simple (flip&match) mobile game with phonegap. Phonegap is a software that let's you make hybrid applications with HTML, CSS and JavaScript.
The link below is an example of the game we will be working on:
https://ohiodn8.github.io/Phonegap-game/
Things we'll cover:
- Phonegap
- Javascript
- HTML
- CSS
- Mobile/Web development
Let's Start
Start the phonegap desktop app. Click the + icon (new app) to the left and then click . . .
Create new Phonegap project & select Blank.
Note: I'm working with the desktop app. There's also a Cli version - check that out on their site.
Wait a while and the app will spin up and start (like the image blow). Click on the IP url on the bottom of the app and it'll open in your browser or you could just copy it.
You should get a blank page since its a blank application.
The Coding Part
In the root of your mobile/web app, (use image above for reference: click the link below Local path to get there), click the /www folder. In there, you should have an index.html. Add a main.js and main.css. That's were we'll put our styling and app behaviour (dynamism).If you've worked with HTML, CSS and Javascrpt, you should have an understanding of how the codes work, so I'll just ouput the codes:
index.html =>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Flippin</title>
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="the_canvas"></div>
<script>newBoard();</script>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
In the index.html, we call the main.css and main.js in the head section. In the body section, we have a div with an Id of "the_canvas" which will be in our stylesheet and referenced in the javascript file. We also have a javascript that'll be calling our javascrpt function, newBoard, to the body.
main.css =>
div#the_canvas{
background: #483D8B;
border: #FF8C00 2px solid;
width: 440px;
height: 620px;
padding: 10px;
margin: 0px auto;
}
div#the_canvas > div{
background-image: url("card_img.jpg") no-repeat;
background-color: #FF1493;
border: #000 1px solid;
width: 48px;
height: 42px;
float: left;
margin: 10px;
padding: 20px;
font-size: 56px;
cursor: pointer;
text-align: center;
}
In main.css we have the div of Id "the_canvas", and another div that affects every child div in "the_canvas"; that'll be for our cards.
main.js =>
var the_array = ['U', 'U', 'M','M','J','J','3','3','Y','Y','F','F','1','1','T','T','R','R','6','6','C','C','9','9'];
var the_values = [];
var the_card_ids = [];
var cards_flipped = 0;
Array.prototype.the_card_shuffle = function(){
var i = this.length, j, temp;
while(--i > 0){
j = Math.floor(Math.random() * (i+1));
temp = this[j];
this[j] = this[i];
this[i] = temp;
}
}
function newBoard(){
cards_flipped = 0;
var output = '';
the_array.the_card_shuffle();
for (var i = 0; i < the_array.length; i++){
output += '<div id="card_'+i+'" onclick="theFlipCard(this,\''+the_array[i]+'\')"></div>';
}
document.getElementById('the_canvas').innerHTML = output;
}
function theFlipCard(card,val){
if(card.innerHTML == "" && the_values.length < 2){
card.style.background = '#FFF';
card.innerHTML = val;
if(the_values.length == 0){
the_values.push(val);
the_card_ids.push(card.id);
} else if(the_values.length == 1){
the_values.push(val);
the_card_ids.push(card.id);
if(the_values[0] == the_values[1]){
cards_flipped += 2;
// Clear both arrays
the_values = [];
the_card_ids = [];
// Check to see if the whole board is cleared
if(cards_flipped == the_array.length){
alert("Game Complete! Start New...");
document.getElementById('the_canvas').innerHTML = "";
newBoard();
}
} else {
function flip2Back(){
// Flip the 2 cards back over
var card_1 = document.getElementById(the_card_ids[0]);
var card_2 = document.getElementById(the_card_ids[1]);
card_1.style.background = 'url(card_img.jpg) no-repeat';
card_1.innerHTML = "";
card_2.style.background = 'url(card_img.jpg) no-repeat';
card_2.innerHTML = "";
// Clear both arrays
the_values = [];
the_card_ids = [];
}
setTimeout(flip2Back, 700);
}
}
}
}
In main.js, we'll define the variable for the card content (the_array), add a prototype to the array to do the shuffle and define a function that let's the shuffle take effect for every time we start a new game. The rest of the function is for the game play.
And that's the whole build. Got to your web page and try it out. . . and it should work.
A link to my repository => https://github.com/ohiodn8/Phonegap-game
Note: you can ignore the docs folder in my repo. It is just the folder that GitHub use to serve the game.
To package this into a mobile app (e.g. .apk) you'll want to look at https://build.phonegap.com
About ohiodn8
Ruby on Rails developer, AWS Engineer, anything fun, music, a little bit of mobile game. . .
Comments (1)
Helpful tutorial
almost 5 years ago by Felix J
6
Blog