Post
Ask Question

Samsung Gear Odd Image Out Game Using AngularJS

What Is Gear Odd Image Out Game



In this game app total 5 questions will be asked. In each question I will display 4 set of Images in that one Image will be different from the other three. User have to pick the odd image from the four images. If user picks the correct odd image from the question he will get 10 points. If he select the wrong answer, then he will get -5 points. After all the 5 questions has been answered by user the result will be calculated and if the users points are 50,  then he wins the game and if the user get points less than 50, then he loses the game.

What you should know to create this Odd image Out App for Samsung Gear smartwatch?

You need to have basic knowledge of the following:
  • TIZEN IDE Web project Development.
  • AngularJS Development

1. Prerequisites need to install for developing the Samsung gear App

To start developing our first app for Samsung Gear we need the fallowing software to be installed.

  • Tizen SDK (Tizen consists of set of tools for developing Tizen web and native applications. It contains IDE for developing our applications and Emulator to view our output).
  • SDK Image

Note: If you are new to Samsung Gear App development using TIZEN IDE,  then kindly view my previous article which explain in detail about how to install Tizen SDK and create your first hello world program using Tizen IDE.

AngularJS

We might be familiar with what is Model, View, View Model (MVVM) and what Model, View and Controller (MVC) are. AngularJS is a JavaScript framework that is purely based on HTML, CSS and JavaScript.

The AngularJS Model View Whatever (MVW) pattern is similar to the MVC and MVVM patterns. In our example I have used Model, View and Service. In the code part let's see how to install and create AngularJS in our MVC application.

If you are interested in reading more about AngularJS, then kindly go through the following link:

How I Have Developed TThis Odd Image out Game Gear App

First collect all the images needed to be displayed for the question. Each question carry 4 set of images and in that one image should be as different. So collect as much possible image to make more questions. I will display the questions randomly from the set of questions to avoid repeated question display. So first we need to make as much of possible questions for the users to not get bore of the game. I have downloaded all the free images from the Icon Finder, since we are creating app for Smartwatch. Here I have downloaded 48.

*48 size images.

48 size images

After downloading all the Images and giving the proper name to each Image and in Image name itself I have given as answer as O for Ok and N for Wrong Image. For the sample of this demo I have created total 15 Questions with 15 * 4 images total. You can add more questions to make the app more interesting.

Code Part

As I have already told if you are new to Tizen IDE development, kindly view my first article which explains in detail how to download, install and getting started with Tizen IDE to create your app for Samsung Gear.

Note: If you are new to Samsung Gear App development using TIZEN IDE, then kindly view my previous article which explain in detail about how to install Tizen SDK and create your first hello world program using Tizen IDE

Click - Start programs, then click Tizen IDE.

For the first time it will be to select your Workspace. You can browse and select folder to create all your project under the folder. Click OK to start your new project.

new project

Once you have done click on File, New, then Tizen Web project.

Tizen Web project

Creating Our First Wearable UI Template

We can see a window like the following. Firstly, we start with Wearable UI Template. Select the Template and Wearable UI and click on Basic. Give the name for your project and click Finish.

Wearable UI

Once you have created you can see your project on the left side of Project Explorer. Create new folder inside your newly created project for adding all the AngularJS reference files. I have created the folder name as “MyAngular” and copied all AngularJS and jQuery related reference files to this folder and also created new JavaScript file as “controller.js” for AngularJS controller creation.

AngularJS controller creation

Steps To Create AngularJS controller.js File

Step 1

All our business logic will be written in AngularJS Controller.js file. As you can see in the project “MyAngular” folder I have created the “controller.js” file to write all our AngularJS code.

In the Controller.JS javascript file we will create for AngularJS Model and Contrller like the following.
Firstly, we add the reference and create Model for our AngularJS controller.

  1. /// <reference path="angular.js" />   
  2. /// <reference path="angular.min.js" />   
  3. /// <reference path="angular-animate.js" />   
  4. /// <reference path="angular-animate.min.js" />   
  5. var app;  
  6.   
  7.   
  8. (function() {  
  9.     app = angular.module("RESTClientModule", ['ngAnimate']);  
  10. })();  
In the controller I have declared all the variables need to be used and display the result in our HTML page.

Step 2

Declaration of local variables in controller

Here I have commented for each variable so that user can easily understand it.
  1. app.controller("AngularJs_Controller", function($scope, $timeout, $rootScope, $window, $http) {  
  2.   
  3.             //Global Variables  
  4.   
  5.             //Conuter to increment the Question nos  
  6.   
  7.             $scope.counterval = 0;  
  8.             $scope.questionCount = 0;  
  9.   
  10.             //to Store Game Image details. Here for each question I have created the ID, four Image Names as Image1,image2 and etc, and the result for each questions.  
  11.             $scope.Images = [{  
  12.                     "id": "1",  
  13.                     "Image1": "A1_N.png",  
  14.                     "Image2": "A2_O.png",  
  15.                     "Image3": "A3_O.png",  
  16.   
  17.                     "Image4": "A4_O.png",  
  18.                     "Result": "1"  
  19.                 }, {  
  20.                     "id": "2",  
  21.                     "Image1": "AN1_O.png",  
  22.                     "Image2": "AN2_O.png",  
  23.                     "Image3": "AN3_N.png",  
  24.   
  25.                     "Image4": "AN4_O.png",  
  26.                     "Result": "3"  
  27.                 }, {  
  28.                     "id": "3",  
  29.                     "Image1": "C1_O.png",  
  30.                     "Image2": "C2_N.png",  
  31.                     "Image3": "C3_O.png",  
  32.   
  33.                     "Image4": "C4_O.png",  
  34.                     "Result": "2"  
  35.                 }, {  
  36.                     "id": "4",  
  37.                     "Image1": "F1_O.png",  
  38.                     "Image2": "F2_O.png",  
  39.                     "Image3": "F3_N.png",  
  40.   
  41.                     "Image4": "F4_O.png",  
  42.                     "Result": "3"  
  43.                 }, {  
  44.                     "id": "5",  
  45.                     "Image1": "G1_N.png",  
  46.                     "Image2": "G2_O.png",  
  47.                     "Image3": "G3_O.png",  
  48.   
  49.                     "Image4": "G4_O.png",  
  50.                     "Result": "1"  
  51.                 }, {  
  52.                     "id": "6",  
  53.                     "Image1": "H1_O.png",  
  54.                     "Image2": "H2_N.png",  
  55.                     "Image3": "H3_O.png",  
  56.   
  57.                     "Image4": "H4_O.png",  
  58.                     "Result": "2"  
  59.                 }, {  
  60.                     "id": "7",  
  61.                     "Image1": "J1_N.png",  
  62.                     "Image2": "J2_O.png",  
  63.                     "Image3": "J3_O.png",  
  64.   
  65.                     "Image4": "J4_O.png",  
  66.                     "Result": "1"  
  67.                 }, {  
  68.                     "id": "9",  
  69.                     "Image1": "S1_O.png",  
  70.                     "Image2": "S2_N.png",  
  71.                     "Image3": "S3_O.png",  
  72.   
  73.                     "Image4": "S4_O.png",  
  74.                     "Result": "2"  
  75.                 }, {  
  76.                     "id": "9",  
  77.                     "Image1": "N1_N.png",  
  78.                     "Image2": "N2_O.png",  
  79.                     "Image3": "N3_O.png",  
  80.   
  81.                     "Image4": "N4_O.png",  
  82.                     "Result": "1"  
  83.                 }, {  
  84.                     "id": "10",  
  85.                     "Image1": "NW1_O.png",  
  86.                     "Image2": "NW2_N.png",  
  87.                     "Image3": "NW3_O.png",  
  88.   
  89.                     "Image4": "NW4_O.png",  
  90.                     "Result": "2"  
  91.                 }, {  
  92.                     "id": "11",  
  93.                     "Image1": "O1_O.png",  
  94.                     "Image2": "O2_O.png",  
  95.                     "Image3": "O3_O.png",  
  96.   
  97.                     "Image4": "O4_N.png",  
  98.                     "Result": "4"  
  99.                 }, {  
  100.                     "id": "12",  
  101.                     "Image1": "P1_O.png",  
  102.                     "Image2": "P2_N.png",  
  103.                     "Image3": "P3_O.png",  
  104.   
  105.                     "Image4": "P4_O.png",  
  106.                     "Result": "2"  
  107.                 }, {  
  108.                     "id": "13",  
  109.                     "Image1": "SC1_O.png",  
  110.                     "Image2": "SC2_O.png",  
  111.                     "Image3": "SC3_O.png",  
  112.   
  113.                     "Image4": "SC4_N.png",  
  114.                     "Result": "4"  
  115.                 }, {  
  116.                     "id": "14",  
  117.                     "Image1": "T1_N.png",  
  118.                     "Image2": "T2_O.png",  
  119.                     "Image3": "T3_O.png",  
  120.   
  121.                     "Image4": "T4_O.png",  
  122.                     "Result": "1"  
  123.                 }, {  
  124.                     "id": "15",  
  125.                     "Image1": "WA1_O.png",  
  126.                     "Image2": "WA2_O.png",  
  127.                     "Image3": "WA3_N.png",  
  128.   
  129.                     "Image4": "WA4_O.png",  
  130.                     "Result": "3"  
  131.                 }  
  132.   
  133.             ];  
  134.   
  135.             //Show table Row. First I will display the New Game Table Row by default. When user clicks on new Game I will display Question Table Row.  
  136.             $scope.showGameStart = true;  
  137.             $scope.showGame = false;  
  138.             $scope.showresult = false;  
  139.   
  140.             //Show and to calculate the Total points and final result.  
  141.             $scope.totalPoints = 0;  
  142.   
  143.             $scope.Resuts = "";  
  144.   
  145.             $scope.wonImage = "Won.png";  
Step 3

Display New Game Message

New Game Message

When user clicks on the New Game button I will call the FirstQuestion() method, display and hide the relevant table row for displaying the question. And call the displayQuestion() method to display the first question.

Controller Method:
  1. $scope.FirstQuestion = function() {  
  2.   
  3.     $scope.showGameStart = false;  
  4.     $scope.showGame = true;  
  5.     $scope.showresult = false;  
  6.   
  7.     $scope.displayQuestion();  
  8.   
  9. }  
HTML Code
  1. <table>  
  2.     <tr ng-show="showGameStart">  
  3.         <td align="center">  
  4.             <span style="color:#FFFFFF;font-size:x-large">  
  5. SHANU - Odd Image Out </span>  
  6.             <br>  
  7.             <br>  
  8.             <input type="submit" value="New Game" style="background-color:#3f9835;color:#FFFFFF;border-color:#f6f803;border-style:dashed;" ng-click="FirstQuestion()" />  
  9.             <p style="color:#FFFFFF;font-size:xx-small;">  
  10.                 Find the Odd Image from the Given four Images.You will be having 5 questions.  
  11.                 <br> Answer all the 5 Question .  
  12.                 <br>Wrong Answer will get -5 points and correct answer will get 10 Points.  
  13.                 <br> If user answer all the 5 Questions correctly then they the winner.  
  14.             </p>  
  15.         </td>  
  16.     </tr>  
  17. </table>  
Step 4

Display New Game Question.

Display New Game Question

When user clicks on New Game I will call the displayQuestion() method to select the random question from the set of questions which we have created and displayed each questions image in HTML page.

Controller Method:
  1. $scope.displayQuestion = function() {  
  2.     $scope.questionCount = $scope.questionCount + 1;  
  3.     $scope.randomQuestion = Math.floor(Math.random() * $scope.Images.length);  
  4.     $scope.Image1 = $scope.Images[$scope.randomQuestion].Image1;  
  5.     $scope.Image2 = $scope.Images[$scope.randomQuestion].Image2;  
  6.     $scope.Image3 = $scope.Images[$scope.randomQuestion].Image3;  
  7.     $scope.Image4 = $scope.Images[$scope.randomQuestion].Image4;  
  8.     $scope.ImageAnswer = $scope.Images[$scope.randomQuestion].Result;  
  9. }  
HTML Code
  1. <tr ng-show="showGame">  
  2.     <td align="Center">  
  3.         <table>  
  4.             <tr style="background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;">  
  5.                 <td align="right" colspan="2">  
  6.                     <table>  
  7.                         <tr>  
  8.   
  9.                             <td>  
  10.                                 <span style="color:#FFFFFF;font-size:xx-small;"> Question :</span>  
  11.                             </td>  
  12.                             <td>  
  13.                                 <span style="color:#FFFFFF;font-size:x-large;"> {{questionCount}}</span>  
  14.                             </td>  
  15.   
  16.                             <td>  
  17.                                 <img src="Images/coin.png" width="28px" height="28px">  
  18.   
  19.                             </td>  
  20.                             <td>  
  21.                                 <span style="color:#FFFFFF;font-size:x-large;"> {{ totalPoints }}  
  22. </span></td>  
  23.                         </tr>  
  24.                     </table>  
  25.                 </td>  
  26.             </tr>  
  27.   
  28.             <tr>  
  29.                 <td align="center" style=" background-color:#FFFFFF; border: dashed 2px #e44a10; padding:10px;width:50%;">  
  30.                     <img src="Images/{{ Image1 }}" width="54px" height="54px" ng-click="findAnswer(1)">  
  31.   
  32.                 </td>  
  33.                 <td style=" background-color:#FFFFFF; border: dashed 2px #e44a10; padding:10px;width:50%;">  
  34.                     <img src="Images/{{ Image2 }}" width="54px" height="54px" ng-click="findAnswer(2)">  
  35.   
  36.                 </td>  
  37.             </tr>  
  38.             <tr>  
  39.                 <td style=" background-color:#FFFFFF; border: dashed 2px #e44a10; padding:10px;width:50%;">  
  40.                     <img src="Images/{{ Image3}}" width="54px" height="54px" ng-click="findAnswer(3)">  
  41.   
  42.                 </td>  
  43.                 <td style=" background-color:#FFFFFF; border: dashed 2px #e44a10; padding:10px;width:50%;">  
  44.                     <img src="Images/{{ Image4 }}" width="54px" height="54px" ng-click="findAnswer(4)">  
  45.   
  46.                 </td>  
  47.             </tr>  
  48.         </table>  
  49.     </td>  
  50. </tr>  
Step 5: Find Answer

Now we have displayed the question, so what is next. Yes in each question image click we need to find the correct answers. In each image click event I will call the findAnswer(1) method to check for each question answer and calculate the result and display the points to the user and then to display the next question. In this method I will pass the argument as 1,2,3,4 for each question clicked by order and  in each question answer I will be storing the answers in Number. I will compare both the user clicked image number with each questions answer. If both are matching,  then I will add the points as 10 and if the answer is wrong then I will -5 with the total points. Finally, I will display the next question for the user to play.

Controller Method
  1. // to find the Answer  
  2. $scope.findAnswer = function(results) {  
  3.   
  4.     if (results == $scope.ImageAnswer) {  
  5.         // alert("Wow :) You have enter the correct answer and you have got 10 Points for this Answer")   
  6.         $scope.totalPoints = $scope.totalPoints + 10;  
  7.     } else {  
  8.         // alert("Sorry :( You have enter the wrong answer and you have got -5 points")  
  9.         $scope.totalPoints = $scope.totalPoints - 5;  
  10.     }  
  11.     $scope.counterval = $scope.counterval + 1  
  12.   
  13.   
  14.     if ($scope.counterval == 5) {  
  15.   
  16.         $scope.displayResult();  
  17.         return;  
  18.     }  
  19.     $scope.displayQuestion();  
  20. }  
Here we can see I will calculate the answer and display the next question to user with the total points he earned.

calculate the answer

In the meantime I will check for questions counter value. If the user answers total 5 questions then I will call the displayResult() method to display the final results to the user.

Step 5: Display Final result

In this method I will check for the total points of the user and display the result.

Won the Game:

If the points are greater than or equal to 50, then I will display the message as user won the game,

Won the Game

Lose the Game:

If the points are lesser than 50, then I will display the message as user lose the game

Lose the Game

Controller Method:
  1. $scope.displayResult = function() {  
  2.   
  3.     if ($scope.totalPoints >= 50) {  
  4.         $scope.Resuts = "Wow :) You have won the Game.Good Job ";  
  5.         // alert($scope.Resuts)  
  6.         $scope.wonImage = "Won.png";  
  7.     } else {  
  8.         $scope.Resuts = "Sorry You lose the game :( .Your Total points are " + $scope.totalPoints + " out of 50 points"  
  9.             // alert($scope.Resuts);  
  10.         $scope.wonImage = "Lose.png";  
  11.     }  
  12.     $scope.showGameStart = false;  
  13.     $scope.showGame = false;  
  14.     $scope.showresult = true;  
  15. }  
HTML Code
  1. <tr ng-show="showresult">  
  2.     <td align="Center">  
  3.         <table align="center" style=" background-color:#FFFFFF; border: dashed 3px #6D7B8D; padding:10px;">  
  4.             <tr style=" background-color:#336699 ; color:#3f9835 ;border: solid 1px #659EC7;">  
  5.                 <td>  
  6.   
  7.   
  8.                     <img src="Images/{{ wonImage }}" width="68px" height="68px">  
  9.                 </td>  
  10.                 <td width="60%">  
  11.                     <span style="color:#FFFFFF;font-size:x-small;">  
  12.                                         {{Resuts}}</span>  
  13.                     <br />  
  14.                     <br />  
  15.                     <input type="submit" value="Home" style="background-color:#3f9835;color:#FFFFFF;border-color:#f6f803;border-style:dashed;" ng-click="NewQuestion()" />  
  16.                 </td>  
  17.             </tr>  
  18.         </table>  
  19.     </td>  
  20. </tr>  
Step 6: Start New Game.

After displaying the result user can start the new game by clicking on Home Button.

Controller Method:
  1. $scope.NewQuestion = function () {  
  2.      $scope.showGameStart = true;  
  3.      $scope.showGame = false;  
  4.      $scope.showresult = false;  
  5.      $scope.totalPoints=0;  
  6.      $scope.counterval=0;  
  7.      $scope.questionCount=0;  
  8. }  
Step 7: View output.

Out Put with Simulator:

To view the output with simulator right click our project from Tizen Ide and select Run AS and click on “Tizen Web Simulator Application”

Tizen Web Simulator Application

Once we clicked we can see the output in simulator.

output

Output With Emulator:

To view our result in Emulator first we need to run the Emulator. In Connection Explorer click on Emulator Manager.

Emulator Manager

Here I have selected the emulator type as Circle and click on GearCircle play to open the emulator.

GearCircle

Once the emulator is opened we need to select our project and select RUN AS and click on “ Tizen Web Application”.

Tizen Web Application

Here we can see our Odd Image Out app will be running in Samsung Gear Emulator.

Samsung Gear Emulator

 


Similar Articles