SHARE
TWEET

simpensyek

a guest Jun 25th, 2019 70 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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>
RAW Paste Data
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
 
Top