API tools faq
paste
Advertisement
Guest User

simpensyek

a guest
Jun 25th, 2019
106
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.29 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>Memory Game</title>
  8.  
  9. <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  10. <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  11. <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  12.  
  13. <!-- PWA DEPENDACIES -->
  14. <link rel="js" type="/Proyek/sw.js" href="">
  15. <link rel="manifest" href="/Proyek/manifest.json">
  16. <script src="/Proyek/src/js/app.js"></script>
  17. <script>
  18. </script>
  19. <style>
  20. #home{
  21. justify-content: center;
  22. }
  23. .container {
  24. display: flex;
  25. flex-wrap: wrap;
  26. flex-direction: row;
  27. text-align: center;
  28. justify-content: center;
  29. align-items: center;
  30. }
  31. #info-view{
  32.  
  33. justify-content: center;
  34. align-items: center;
  35. }
  36. #table{
  37. display: flex;
  38. flex-flow: row wrap;
  39. justify-content: center;
  40. align-items: center;
  41. }
  42. /* Big tablet to 1200px */
  43. @media only screen and (max-width: 1200px) and (min-width: 1024px) {
  44. img {
  45. width : 168px;
  46. height : 168px;
  47. }
  48. .player-image{
  49. width : 170px;
  50. height : 170px;
  51. }
  52. .bot-image{
  53. width : 170px;
  54. height : 170px;
  55. }
  56. }
  57. /* Small tablet to big tablet: from 768px to 1023px */
  58. @media only screen and (max-width: 1023px) and (min-width: 768px) {
  59. img {
  60. width : 148px;
  61. height : 148px;
  62. }
  63. .player-image{
  64. width : 150px;
  65. height : 150px;
  66. }
  67. .bot-image{
  68. width : 150px;
  69. height : 150px;
  70. }
  71. }
  72. /* Small phones to small tablets: from 481px to 767px */
  73. @media only screen and (max-width: 767px) and (min-width: 481px) {
  74. img {
  75. width : 118px;
  76. height : 118px;
  77. }
  78. .player-image{
  79. width : 120px;
  80. height : 120px;
  81. }
  82. .bot-image{
  83. width : 120px;
  84. height : 120px;
  85. }
  86. }
  87. /* Small phones: from 0 to 480px */
  88. @media only screen and (max-width: 525px) and (min-width: 0px) {
  89. img {
  90. width : 98px;
  91. height : 98px;
  92. }
  93. .player-image{
  94. width : 100px;
  95. height : 100px;
  96. }
  97. .bot-image{
  98. width : 100px;
  99. height : 100px;
  100. }
  101. }
  102.  
  103. </style>
  104.  
  105. </head>
  106. <body onload="load()">
  107. <div data-role="page"id="home">
  108. <div data-role="header">
  109. <h1>MEMORY GAME</h1>
  110. </div>
  111. <div role="main" class="ui-context">
  112. <div class="container" id="main-menu">
  113. <div class="ui-field-contain" style="padding-left: 20px; padding-right: 20px; text-align: center">
  114. <h1>PLAY GAME</h1>
  115. <a href="#game-view" data-role="button" style="width: 80%; margin: auto;">Play Game</a>
  116. <h1 style="margin-top: 20%">HIGHSCORE</h1>
  117. <a href="#highscore-view" data-role="button" style="width: 80%; margin: auto;">View Highscore</a>
  118. </div>
  119. </div>
  120. </div>
  121. </div>
  122. <div data-role="page" id="game-view">
  123. <div data-role="header">
  124. <h1>GAME START!</h1>
  125. </div>
  126. <div role="main" class="ui-context">
  127. <div class="container" id="nickname_form">
  128. <div class="ui-field-contain" style="padding-left: 20px; padding-right: 20px; text-align: center">
  129. <h1>PLAYER NAME</h1>
  130. <div class="ui-grid-solo">
  131. <input type="text" id="nick" placeholder="Your Name" style="height: 50px; text-align: center">
  132. <button id="submit" style="width: 80%; margin: auto; height: 50px">Play Now</button>
  133. <a href="#home" data-role="button" style="margin-top: 125%; margin-left: 10%; width: 65%">Back to Home</a>
  134. </div>
  135. </div>
  136. </div>
  137. <div class="container" id="game" style="visibility: hidden; flex-direction: row">
  138. <div class="ui-grid-solo">
  139. <h1 id="player-name" style="width: 200px"></h1>
  140. <a data-role="button" id="time-shown">0</a>
  141. <a data-role="button" id="play-again" style="margin-left: 10%; width: 65%; visibility: hidden">Play Again</a>
  142. <a data-role="button" id="quit-game" style="margin-left: 10%; width: 65%">Quit Game</a>
  143. </div>
  144. <div class="ui-grid-solo" id="table" style="margin-left: 20%; margin-right: 20%"></div>
  145. </div>
  146. </div>
  147. </div>
  148. <div data-role="page" id="highscore-view">
  149. <div data-role="header" data-add-back-btn="true">
  150. <h1>HIGHSCORE</h1>
  151. </div>
  152. <div role="main" class="ui-content">
  153. <h2 style="text-align: center">High Score</h2>
  154. <table data-role="table" class="ui-responsive table-stroke">
  155. <thead>
  156. <tr>
  157. <th>Rank</th>
  158. <th>Nickname</th>
  159. <th>Score</th>
  160. </tr>
  161. </thead>
  162. <tbody id="highfive">
  163. </tbody>
  164. </table>
  165. </div>
  166. </div>
  167. <script>
  168. $(document).ready(function() {
  169.  
  170. });
  171. if ('serviceWorker' in navigator) {
  172. console.log("Will the service worker register?");
  173. navigator.serviceWorker.register('sw.js')
  174. .then(function(reg){
  175. console.log("Yes, it did.");
  176. }).catch(function(err) {
  177. console.log("No it didn't. This happened: ", err)
  178. });
  179. }
  180. </script>
  181. <script type="text/javascript">
  182.  
  183. var high=[];
  184. var randomCard = [];
  185. var openedCard = [];
  186. var turn = 1;
  187. var first = -1;
  188. var interval;
  189. var size = 10;
  190. //
  191.  
  192. var timeLabel = document.getElementById("time-shown");
  193. var totalSeconds = 0;
  194.  
  195. function setTime() {
  196. ++totalSeconds;
  197. timeLabel.innerHTML = totalSeconds + "";
  198. }
  199.  
  200. function load(){
  201. if (localStorage.getItem("high")){
  202. high = JSON.parse(localStorage.getItem("high"));
  203. }
  204. else{
  205. resetScore();
  206. }
  207. displayScores();
  208. }
  209.  
  210. function displayScores() {
  211. high = JSON.parse(localStorage.getItem("high"));
  212. $("#highfive").html("<tr><td>1</td><td>"+high[0].player+"</td><td>"+high[0].time+"</td></tr>"+
  213. "<tr><td>2</td><td>"+high[1].player+"</td><td>"+high[1].time+"</td></tr>"+
  214. "<tr><td>3</td><td>"+high[2].player+"</td><td>"+high[2].time+"</td></tr>"+
  215. "<tr><td>4</td><td>"+high[3].player+"</td><td>"+high[3].time+"</td></tr>"+
  216. "<tr><td>5</td><td>"+high[4].player+"</td><td>"+high[4].time+"</td></tr>");
  217. }
  218. function resetScore() {
  219. high = [{"player": "-", "time": "999"},
  220. {"player": "-", "time": "999"},
  221. {"player": "-", "time": "999"},
  222. {"player": "-", "time": "999"},
  223. {"player": "-", "time": "999"}];
  224. var items = JSON.stringify(high);
  225. localStorage.setItem("high", items);
  226. }
  227. function calculateScores(){
  228. var playerr = $('#player-name').text();
  229. var time = parseInt($('#time-shown').text());
  230. high.push({"player":playerr, "time":time});
  231. high.sort(function(x1,x2){return x1.time - x2.time}); //high to low
  232. high.pop();
  233. var items = JSON.stringify(high);
  234. localStorage.setItem("high", items);
  235. displayScores();
  236. }
  237. function completeAll(){
  238. var complete = true;
  239. for (var i = 0; i < size * 2 && complete; i++){
  240. if (openedCard[i] == 0)
  241. complete = false;
  242. }
  243. return complete;
  244. }
  245. function showSecond(first, indx){
  246. $("#card-"+first).prop('src', 'src/images/card/14_of_hearts.png');
  247. $("#card-"+indx).prop('src', 'src/images/card/14_of_hearts.png');
  248. }
  249. function alertWin(totalSeconds){
  250. alert ("Congratulations! You're finished at " + totalSeconds + " seconds");
  251. }
  252. function openCard(indx){
  253. if (openedCard[indx] == 0 && first != indx){
  254. // console.log(turn, randomCard[indx]);
  255. if (turn == 1){
  256. first = indx;
  257. $("#card-"+indx).prop('src', 'src/images/card/' + randomCard[indx] + '_of_spades.png');
  258. turn = 2;
  259. }
  260. else if (turn == 2){
  261. $("#card-"+indx).prop('src', 'src/images/card/' + randomCard[indx] + '_of_spades.png');
  262. if (randomCard[first] == randomCard[indx]){
  263. openedCard[first] = 1;
  264. openedCard[indx] = 1;
  265. if (completeAll()){
  266. setTimeout(alertWin, 100, totalSeconds);
  267. clearInterval(interval);
  268. calculateScores();
  269. $("#play-again").css("visibility", "visible");
  270. }
  271. console.log(turn, randomCard[first], randomCard[indx]);
  272. }
  273. else{
  274. setTimeout(showSecond, 1000, first, indx);
  275. }
  276. first = -1;
  277. turn = 1;
  278. }
  279. }
  280. }
  281. function initializeCard(){
  282. var countCard = [];
  283. randomCard = [];
  284. openedCard = [];
  285. for (var i = 0; i < size; i++){
  286. countCard.push(2);
  287. }
  288. for (var i = 0; i < size * 2; i++){
  289. var rand = Math.floor(Math.random() * size);
  290. if (countCard[rand] > 0){
  291. randomCard.push(rand + 1);
  292. openedCard.push(0);
  293. countCard[rand] = countCard[rand] - 1;
  294. }
  295. else{
  296. i = i - 1;
  297. }
  298. }
  299. var tablehtml = "";
  300. for (var i =0; i < 4; i++){
  301. for (var j = 0; j < 5; j++){
  302. var indx = i * 5 + j;
  303. tablehtml = tablehtml + "<img style='width: 12.5%; height: 12.5%; margin-left: 2.5%; margin-right: 2.5%; margin-top: 2.5%; margin-bottom: 2.5%' src='src/images/card/14_of_hearts.png' id='card-" + indx + "' onclick='openCard(" + indx +")'>";
  304. }
  305. tablehtml = tablehtml + "<br>";
  306. }
  307. $("#table").html(tablehtml);
  308. }
  309. $("#highscore-view").on("click", function(){
  310. displayScores();
  311. });
  312. $("#quit-game").on("click", function(){
  313. $("#nickname_form").css('visibility', 'visible');
  314. $("#nickname_form").css('display', 'flex');
  315. $("#game").css('visibility', 'hidden');
  316. $("#game").css('display', 'none');
  317. $("#play-again").css('visibility', 'hidden');
  318. $("#play-again").css('display', 'none');
  319. clearInterval(interval);
  320. $("#time-shown").html("0");
  321. });
  322. $("#play-again").on("click", function(){
  323. totalSeconds = 0;
  324. interval = setInterval(setTime, 1000);
  325. $("#time-shown").html("0");
  326. $("#play-again").css("visibility", 'hidden');
  327. initializeCard();
  328. $("#nickname_form").css('visibility', 'hidden');
  329. $("#nickname_form").css('display', 'none');
  330. $("#game").css('visibility', 'visible');
  331. $('.flex-container').css('display','flex');
  332. });
  333. $("#submit").on("click",function() {
  334. if($("#nick").val() == ""){
  335. alert("PLEASE INSERT A NAME");
  336. }else{
  337. var nick = $("#nick").val();
  338. $("#nick").val("");
  339. totalSeconds = 0;
  340. interval = setInterval(setTime, 1000);
  341. initializeCard();
  342. $("#nickname_form").css('visibility', 'hidden');
  343. $("#nickname_form").css('display', 'none');
  344. $("#game").css('visibility', 'visible');
  345. $("#play-again").css("visibility", 'hidden');
  346. $("#player-name").html(nick);
  347. $('.flex-container').css('display','flex');
  348. }
  349. })
  350. $( window ).on( "navigate", function() {
  351. console.log( "navigated!" );
  352. });
  353. </script>
  354. </body>
  355. </html>
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!