Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Memory Game</title>
- <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
- <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
- <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
- <!-- PWA DEPENDACIES -->
- <link rel="js" type="/Proyek/sw.js" href="">
- <link rel="manifest" href="/Proyek/manifest.json">
- <script src="/Proyek/src/js/app.js"></script>
- <script>
- </script>
- <style>
- #home{
- justify-content: center;
- }
- .container {
- display: flex;
- flex-wrap: wrap;
- flex-direction: row;
- text-align: center;
- justify-content: center;
- align-items: center;
- }
- #info-view{
- justify-content: center;
- align-items: center;
- }
- #table{
- display: flex;
- flex-flow: row wrap;
- justify-content: center;
- align-items: center;
- }
- /* Big tablet to 1200px */
- @media only screen and (max-width: 1200px) and (min-width: 1024px) {
- img {
- width : 168px;
- height : 168px;
- }
- .player-image{
- width : 170px;
- height : 170px;
- }
- .bot-image{
- width : 170px;
- height : 170px;
- }
- }
- /* Small tablet to big tablet: from 768px to 1023px */
- @media only screen and (max-width: 1023px) and (min-width: 768px) {
- img {
- width : 148px;
- height : 148px;
- }
- .player-image{
- width : 150px;
- height : 150px;
- }
- .bot-image{
- width : 150px;
- height : 150px;
- }
- }
- /* Small phones to small tablets: from 481px to 767px */
- @media only screen and (max-width: 767px) and (min-width: 481px) {
- img {
- width : 118px;
- height : 118px;
- }
- .player-image{
- width : 120px;
- height : 120px;
- }
- .bot-image{
- width : 120px;
- height : 120px;
- }
- }
- /* Small phones: from 0 to 480px */
- @media only screen and (max-width: 525px) and (min-width: 0px) {
- img {
- width : 98px;
- height : 98px;
- }
- .player-image{
- width : 100px;
- height : 100px;
- }
- .bot-image{
- width : 100px;
- height : 100px;
- }
- }
- </style>
- </head>
- <body onload="load()">
- <div data-role="page"id="home">
- <div data-role="header">
- <h1>MEMORY GAME</h1>
- </div>
- <div role="main" class="ui-context">
- <div class="container" id="main-menu">
- <div class="ui-field-contain" style="padding-left: 20px; padding-right: 20px; text-align: center">
- <h1>PLAY GAME</h1>
- <a href="#game-view" data-role="button" style="width: 80%; margin: auto;">Play Game</a>
- <h1 style="margin-top: 20%">HIGHSCORE</h1>
- <a href="#highscore-view" data-role="button" style="width: 80%; margin: auto;">View Highscore</a>
- </div>
- </div>
- </div>
- </div>
- <div data-role="page" id="game-view">
- <div data-role="header">
- <h1>GAME START!</h1>
- </div>
- <div role="main" class="ui-context">
- <div class="container" id="nickname_form">
- <div class="ui-field-contain" style="padding-left: 20px; padding-right: 20px; text-align: center">
- <h1>PLAYER NAME</h1>
- <div class="ui-grid-solo">
- <input type="text" id="nick" placeholder="Your Name" style="height: 50px; text-align: center">
- <button id="submit" style="width: 80%; margin: auto; height: 50px">Play Now</button>
- <a href="#home" data-role="button" style="margin-top: 125%; margin-left: 10%; width: 65%">Back to Home</a>
- </div>
- </div>
- </div>
- <div class="container" id="game" style="visibility: hidden; flex-direction: row">
- <div class="ui-grid-solo">
- <h1 id="player-name" style="width: 200px"></h1>
- <a data-role="button" id="time-shown">0</a>
- <a data-role="button" id="play-again" style="margin-left: 10%; width: 65%; visibility: hidden">Play Again</a>
- <a data-role="button" id="quit-game" style="margin-left: 10%; width: 65%">Quit Game</a>
- </div>
- <div class="ui-grid-solo" id="table" style="margin-left: 20%; margin-right: 20%"></div>
- </div>
- </div>
- </div>
- <div data-role="page" id="highscore-view">
- <div data-role="header" data-add-back-btn="true">
- <h1>HIGHSCORE</h1>
- </div>
- <div role="main" class="ui-content">
- <h2 style="text-align: center">High Score</h2>
- <table data-role="table" class="ui-responsive table-stroke">
- <thead>
- <tr>
- <th>Rank</th>
- <th>Nickname</th>
- <th>Score</th>
- </tr>
- </thead>
- <tbody id="highfive">
- </tbody>
- </table>
- </div>
- </div>
- <script>
- $(document).ready(function() {
- });
- if ('serviceWorker' in navigator) {
- console.log("Will the service worker register?");
- navigator.serviceWorker.register('sw.js')
- .then(function(reg){
- console.log("Yes, it did.");
- }).catch(function(err) {
- console.log("No it didn't. This happened: ", err)
- });
- }
- </script>
- <script type="text/javascript">
- var high=[];
- var randomCard = [];
- var openedCard = [];
- var turn = 1;
- var first = -1;
- var interval;
- var size = 10;
- //
- var timeLabel = document.getElementById("time-shown");
- var totalSeconds = 0;
- function setTime() {
- ++totalSeconds;
- timeLabel.innerHTML = totalSeconds + "";
- }
- function load(){
- if (localStorage.getItem("high")){
- high = JSON.parse(localStorage.getItem("high"));
- }
- else{
- resetScore();
- }
- displayScores();
- }
- function displayScores() {
- high = JSON.parse(localStorage.getItem("high"));
- $("#highfive").html("<tr><td>1</td><td>"+high[0].player+"</td><td>"+high[0].time+"</td></tr>"+
- "<tr><td>2</td><td>"+high[1].player+"</td><td>"+high[1].time+"</td></tr>"+
- "<tr><td>3</td><td>"+high[2].player+"</td><td>"+high[2].time+"</td></tr>"+
- "<tr><td>4</td><td>"+high[3].player+"</td><td>"+high[3].time+"</td></tr>"+
- "<tr><td>5</td><td>"+high[4].player+"</td><td>"+high[4].time+"</td></tr>");
- }
- function resetScore() {
- high = [{"player": "-", "time": "999"},
- {"player": "-", "time": "999"},
- {"player": "-", "time": "999"},
- {"player": "-", "time": "999"},
- {"player": "-", "time": "999"}];
- var items = JSON.stringify(high);
- localStorage.setItem("high", items);
- }
- function calculateScores(){
- var playerr = $('#player-name').text();
- var time = parseInt($('#time-shown').text());
- high.push({"player":playerr, "time":time});
- high.sort(function(x1,x2){return x1.time - x2.time}); //high to low
- high.pop();
- var items = JSON.stringify(high);
- localStorage.setItem("high", items);
- displayScores();
- }
- function completeAll(){
- var complete = true;
- for (var i = 0; i < size * 2 && complete; i++){
- if (openedCard[i] == 0)
- complete = false;
- }
- return complete;
- }
- function showSecond(first, indx){
- $("#card-"+first).prop('src', 'src/images/card/14_of_hearts.png');
- $("#card-"+indx).prop('src', 'src/images/card/14_of_hearts.png');
- }
- function alertWin(totalSeconds){
- alert ("Congratulations! You're finished at " + totalSeconds + " seconds");
- }
- function openCard(indx){
- if (openedCard[indx] == 0 && first != indx){
- // console.log(turn, randomCard[indx]);
- if (turn == 1){
- first = indx;
- $("#card-"+indx).prop('src', 'src/images/card/' + randomCard[indx] + '_of_spades.png');
- turn = 2;
- }
- else if (turn == 2){
- $("#card-"+indx).prop('src', 'src/images/card/' + randomCard[indx] + '_of_spades.png');
- if (randomCard[first] == randomCard[indx]){
- openedCard[first] = 1;
- openedCard[indx] = 1;
- if (completeAll()){
- setTimeout(alertWin, 100, totalSeconds);
- clearInterval(interval);
- calculateScores();
- $("#play-again").css("visibility", "visible");
- }
- console.log(turn, randomCard[first], randomCard[indx]);
- }
- else{
- setTimeout(showSecond, 1000, first, indx);
- }
- first = -1;
- turn = 1;
- }
- }
- }
- function initializeCard(){
- var countCard = [];
- randomCard = [];
- openedCard = [];
- for (var i = 0; i < size; i++){
- countCard.push(2);
- }
- for (var i = 0; i < size * 2; i++){
- var rand = Math.floor(Math.random() * size);
- if (countCard[rand] > 0){
- randomCard.push(rand + 1);
- openedCard.push(0);
- countCard[rand] = countCard[rand] - 1;
- }
- else{
- i = i - 1;
- }
- }
- var tablehtml = "";
- for (var i =0; i < 4; i++){
- for (var j = 0; j < 5; j++){
- var indx = i * 5 + j;
- 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 +")'>";
- }
- tablehtml = tablehtml + "<br>";
- }
- $("#table").html(tablehtml);
- }
- $("#highscore-view").on("click", function(){
- displayScores();
- });
- $("#quit-game").on("click", function(){
- $("#nickname_form").css('visibility', 'visible');
- $("#nickname_form").css('display', 'flex');
- $("#game").css('visibility', 'hidden');
- $("#game").css('display', 'none');
- $("#play-again").css('visibility', 'hidden');
- $("#play-again").css('display', 'none');
- clearInterval(interval);
- $("#time-shown").html("0");
- });
- $("#play-again").on("click", function(){
- totalSeconds = 0;
- interval = setInterval(setTime, 1000);
- $("#time-shown").html("0");
- $("#play-again").css("visibility", 'hidden');
- initializeCard();
- $("#nickname_form").css('visibility', 'hidden');
- $("#nickname_form").css('display', 'none');
- $("#game").css('visibility', 'visible');
- $('.flex-container').css('display','flex');
- });
- $("#submit").on("click",function() {
- if($("#nick").val() == ""){
- alert("PLEASE INSERT A NAME");
- }else{
- var nick = $("#nick").val();
- $("#nick").val("");
- totalSeconds = 0;
- interval = setInterval(setTime, 1000);
- initializeCard();
- $("#nickname_form").css('visibility', 'hidden');
- $("#nickname_form").css('display', 'none');
- $("#game").css('visibility', 'visible');
- $("#play-again").css("visibility", 'hidden');
- $("#player-name").html(nick);
- $('.flex-container').css('display','flex');
- }
- })
- $( window ).on( "navigate", function() {
- console.log( "navigated!" );
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement