Oct 012013
 

Pairs in Platino is a basic sample showing how to create a card matching game using Javascript and the Platino Game Engine.

Below is the full code from the projects app.js file, complete with comments. You can take it from here and create your own images, or you can grab it from the github repo here.

  1. // require Platino
  2. var platino = require("co.lanica.platino");
  3.  
  4. // Create a new window
  5. var gameWindow = Ti.UI.createWindow();
  6.  
  7. // Create game view
  8. var game = platino.createGameView();
  9.  
  10. // Create a game scene
  11. var scene = platino.createScene();
  12. scene.color(0.8,0,0); // Make the scene red
  13.  
  14. // Add your scene to game view
  15. game.pushScene(scene);
  16.  
  17. // Variables
  18. var card = []; // To hold the cards to be turned over
  19. var cardMask = []; // For the images used to mask the cards
  20. var cardImages = [1,1,2,2,3,3,4,4,5,5,6,6]; // For each of the 12 cards, 2 of each image
  21. var pairs = 0; // To count pairs as they are made
  22. var totalCards = 0; // To keep track of the total number of cards
  23. var secondCard = 0; // Track if a second card is turned over
  24. var pairCheck = false; // Track whether or not a pair should be checked for
  25. var lastCard; // Forward declaration for the last card player turned over
  26. var x = -60; // X to be used when positioning cards
  27. var y = 20; // Y to be used when positioning cards
  28.  
  29. // Text to show whether or not a pair has been made once the second card is turned over
  30. var pairText = platino.createTextSprite({text:"", fontSize:24, width:200, height:60, x:80,y:420});
  31. pairText.color(1,1,1); // Make the pair text white
  32. scene.add(pairText); // Add the pair text to the scene
  33.  
  34. // Main logic for flipping a card and checking for a match
  35. var flipCard = function(target){
  36. if(pairCheck===false && secondCard===0){
  37. cardMask[target.number].alpha=0;
  38. lastCard = target;
  39. pairCheck = true;
  40. }
  41. else if(pairCheck===true){
  42. if(secondCard===0){
  43. // Flip the 2nd card
  44. cardMask[target.number].alpha=0;
  45. secondCard = 1;
  46. // If cards aren't a pair, flip them both back over
  47. if(lastCard.myName != target.myName){
  48. // Update text to show no pair was found
  49. pairText.text = "Not a pair!";
  50. // Timer so cards stay visible for 1 second before flipping back over
  51. setTimeout(function(){
  52. pairText.text = " "; // Make pair text blank again
  53. pairCheck = false;
  54. secondCard = 0;
  55. cardMask[lastCard.number].alpha=1;
  56. cardMask[target.number].alpha=1;
  57. },1000);
  58. }
  59. else if(lastCard.myName===target.myName && lastCard.number!=target.number){
  60. // Update text to show that a pair was found
  61. pairText.text = "Pair Found!";
  62. pairs = pairs+1; // Count the pair
  63. setTimeout(function(){
  64. pairText.text = " ";
  65. pairCheck = false;
  66. secondCard = 0;
  67. scene.remove(lastCard);
  68. scene.remove(target);
  69. lastCard.dispose();
  70. target.dispose();
  71. cardMask[lastCard.number].dispose();
  72. cardMask[target.number].dispose();
  73. if(pairs===6){
  74. var winText = platino.createTextSprite({text:"All pairs Found!", fontSize:40, width:300, height:100, x:25,y:180});
  75. winText.color(1,1,1);
  76. scene.add(winText);
  77. }
  78. },1000);
  79. }
  80. // Logic to prevent the same card from being selected twice in a row
  81. else if(lastCard.myName===target.myName && lastCard.number===target.number){
  82. secondCard=0;
  83. }
  84. }
  85. }
  86. };
  87.  
  88. // Place cards
  89. for (var xRow=0;xRow<3;xRow++){
  90. x = x+90;
  91. y = -20;
  92.  
  93. for (yRow=0;yRow<4;yRow++){
  94. y=y+90;
  95.  
  96. // Assign each image a random location on grid
  97. var temp = Math.floor((Math.random()*cardImages.length));
  98. card[totalCards] = platino.createSprite({image:"graphics/"+cardImages[temp]+".png"});
  99. scene.add(card[totalCards]);
  100.  
  101. // Position the card
  102. card[totalCards].x = x;
  103. card[totalCards].y = y;
  104.  
  105. // Name the card
  106. card[totalCards].myName = cardImages[temp];
  107. card[totalCards].number = totalCards;
  108.  
  109. // Remove card from cardImages table
  110. cardImages.splice(temp, 1);
  111.  
  112. // Set cover to hide card image
  113. cardMask[totalCards] = platino.createSprite({image:"graphics/card.png"});
  114. cardMask[totalCards].x = x;
  115. cardMask[totalCards].y = y;
  116. scene.add(cardMask[totalCards]);
  117. totalCards = totalCards+1;
  118. }
  119. }
  120.  
  121. // A function and listener for the cards when touched
  122. var touchCard = function(e){
  123. for (var i = 0; i < card.length; i++){
  124. if (cardMask[i].contains(e.x, e.y)){
  125. flipCard(card[i]);
  126. }
  127. }
  128. };
  129. game.addEventListener("touchend", touchCard);
  130.  
  131. // Onload function
  132. game.addEventListener("onload", function(e) {
  133. // Set target screen size
  134. game.TARGET_SCREEN = {width:320, height:480};
  135. // set screen size for your game (TARGET_SCREEN size)
  136. var screenScale = game.size.width / game.TARGET_SCREEN.width;
  137. game.screen = {width:game.size.width / screenScale, height:game.size.height / screenScale};
  138. game.touchScaleX = game.screen.width / game.size.width;
  139. game.touchScaleY = game.screen.height / game.size.height;
  140. // Start the game
  141. game.start();
  142. });
  143.  
  144. // Add targets and open game window
  145. gameWindow.add(game);
  146. gameWindow.open({fullscreen:true, navBarHidden:true});

 

Of course, to run this code you will need to have the Platino Game Engine installed; you can download it from here. There’s also a video on how to install Platino you can check out to help you get set up.

Peach Pellen :)

  2 Responses to “Pairs in Platino”

  1. Peach, great tutorial (as usual)! For the future, any chance you could record a small video showing the end results?
    Cheers,
    Alex

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notify me of followup comments via e-mail. You can also subscribe without commenting.