API tools faq
paste
Advertisement
Guest User

Memory

a guest
Jun 29th, 2017
62
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.25 KB | None | 0 0
raw download clone embed print report
  1. {
  2. box-sizing: border-box;
  3. }
  4.  
  5. .title {
  6. font-family: 'Anton', sans-serif;
  7. text-align: center;
  8. }
  9. .board {
  10. max-width: 1000px;
  11. margin: 0 auto;
  12. text-align: center;
  13. }
  14.  
  15. .tile {
  16. width: 19%;
  17. text-align: center;
  18. vertical-align: middle;
  19. font-size: 30px;
  20. font-weight: 700;
  21. border: 1px #000 solid;
  22. background-color: #eee;
  23. margin: 1%;
  24. float: left;
  25. cursor: pointer;
  26. padding: 5%;
  27. }
  28.  
  29. ***************************************
  30.  
  31. <!DOCTYPE html>
  32. <html>
  33. <head>
  34. <meta charset="UTF-8">
  35. <link rel="stylesheet" type="text/css" href="style.css">
  36. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  37. <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
  38. <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  39. <title>Memomy game</title>
  40. </head>
  41. <body>
  42. <div>
  43. <h1 class="title">Memory Game</h1>
  44. </div>
  45. <div class ="game">
  46. <script src="script.js" type="text/javascript"></script>
  47. </div>
  48. </body>
  49. </html>
  50.  
  51. ******************************************
  52.  
  53. //obiekt randomizer któy odpowiada za mieszanie kafli
  54. var Randomizer = function(tilesNumber) {
  55. //liczba unikatowych liter
  56. this.lettersNumber = tilesNumber / 2;
  57. //tablica która przechowuje wszystkie litery
  58. this.letters = [];
  59. //dla każdej unikatowej litery, dodaj dwie litery do tablicy
  60. for (var i = 0; i < this.lettersNumber; i++) {
  61. this.letters.push(String.fromCharCode(65 + i));
  62. this.letters.push(String.fromCharCode(65 + i));
  63. }
  64. //Funkcja która miesza litery w tablicy
  65. this.shuffleLetters = function() {
  66. var lettersToShuffle = this.letters.slice();
  67. var lettersSchuffled = [];
  68. var random,
  69. letter;
  70. for (var i = 0; i < this.letters.length; i++) {
  71. random = Math.floor(Math.random() * lettersToShuffle.length);
  72. letter = lettersToShuffle[random];
  73. lettersSchuffled.push(letter);
  74. lettersToShuffle.splice(random,1);
  75. }
  76. return lettersSchuffled;
  77. }
  78. this.shuffled = this.shuffleLetters();
  79. }
  80.  
  81. //obiekt kafla który odpowiada za zachowanie się kafli
  82. var Tile = function(back) {
  83. //litera która będzie znajdować się na odwrocie kafla
  84. this.back = back;
  85. this.front = '?';
  86. //właściwość definiująca czy kafel jest już poza grą
  87. this.guessed = false;
  88. //referencja do kafla w DOM
  89. this.element = document.createElement('div');
  90. //Funkcja która dodaje kafel do DOM
  91. this.makeTile = function() {
  92. this.element.className = 'tile';
  93. this.element.textContent = this.front;
  94. return this.element;
  95. }
  96. var that = this;
  97. //Funkcja odwracająca kafel
  98. this.flipCard = function() {
  99. if (!(this.textContent === that.back)) {
  100. this.textContent = that.back;
  101. } else {
  102. return false;
  103. }
  104. }
  105. //Event po kliknięciu
  106. this.element.addEventListener('click', this.flipCard);
  107. //Zmiana wyglądu i właściwości kafla po odgadnięciu pary kafli
  108. this.changeGuessed = function() {
  109. this.guessed = true;
  110. this.element.style.opacity = '0.5';
  111. this.element.style.cursor = 'initial';
  112. this.element.addEventListener('click', function(e) {
  113. e.stopPropagation();
  114. return false;
  115. });
  116. }
  117. //Funkcja, która zostaje wywołana jeśli para kafli nie jest identyczna
  118. this.resetTile = function() {
  119. this.element.textContent = '?';
  120. }
  121. }
  122.  
  123. //obiekt planszy który odpowiada za przechowywanie i wyświetlanie kafli
  124. var Board = {
  125. tilesNumber: 16,
  126. tiles: [],
  127. currentTiles: [],
  128. letters: new Randomizer(16),
  129. element: document.createElement('div'),
  130. makeTiles: function() {
  131. for (var i = 0; i < this.tilesNumber; i++) {
  132. this.tiles.push(new Tile(this.letters.shuffled[i]));
  133. }
  134. },
  135. drawTiles: function() {
  136. this.element.className = 'board';
  137. for (var i = 0; i < this.tiles.length; i++) {
  138. this.element.appendChild(this.tiles[i].makeTile());
  139. }
  140. document.body.appendChild(this.element);
  141. },
  142. isTwoTilesVisible: false,
  143. handleClick: function(e) {
  144. e.preventDefault();
  145. var allTiles = this.element.children;
  146. var currTile = this.tiles[Array.prototype.indexOf.call(allTiles,e.target)];
  147. if (currTile.guessed) {
  148. return false;
  149. }
  150. if (this.isTwoTilesVisible) {
  151. e.stopPropagation();
  152. return false;
  153. }
  154. if (this.currentTiles.length === 1 && currTile.element === this.currentTiles[0].element) {
  155. return false;
  156. }
  157. this.currentTiles.push(currTile);
  158.  
  159. if (this.currentTiles.length === 2) {
  160. if (this.currentTiles[0].back === this.currentTiles[1].back) {
  161. this.currentTiles[0].changeGuessed();
  162. this.currentTiles[1].changeGuessed();
  163. this.currentTiles = [];
  164. } else {
  165. var that = this;
  166. this.isTwoTilesVisible = true;
  167. setTimeout(function() {
  168. that.currentTiles[0].resetTile();
  169. that.currentTiles[1].resetTile();
  170. that.currentTiles = [];
  171. that.isTwoTilesVisible = false;
  172. },1000);
  173. }
  174. }
  175. }
  176. }
  177.  
  178. Board.makeTiles();
  179. Board.drawTiles();
  180. Board.element.addEventListener('click',function(e) {
  181. Board.handleClick(e);
  182. },true);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!