0

I'm trying to figure out the best way of adding a time counter to my memory game. The game consists of a lot of squares and if the user has figured out and won the game, a modal pops up and tells the user that they have won and offers to reset the game to start over.

I want to add the time the user spent playing the game. Since they have opened the page it should count the time from 0 to x seconds, and later when the user finishes the game, it echo's the score on the modal, so the user can see their score. But if someone did not complete the quiz in x seconds, a function runs that opens modal, but this time echo's that person has run out of time and offers to start over.

I'm using a small remake of this game on codepen

HTML:

<div class="modal-overlay">
    <div class="modal">
        <h2 class="winner">You Rock!</h2>
        <button class="restart">Play Again?</button>
        <p class="message">Developed on <a href="http://codepen.io">CodePen</a> by <a href="http://codepen.io/natewiley">Nate Wiley</a></p>
        <p class="share-text">Share it?</p>
        <ul class="social">
            <li><a target="_blank" class="twitter" href="http://twitter.com/share?url=http://codepen.io/natewiley/pen/HBrbL"><span class="brandico-twitter-bird"></span></a></li>
            <li><a target="_blank" class="facebook" href="http://www.facebook.com/sharer.php?u=http://codepen.io/natewiley/pen/HBrbL"><span class="brandico-facebook"></span></a></li>
            <li><a target="_blank" class="google" href="https://plus.google.com/share?url=http://codepen.io/natewiley/pen/HBrbL"><span class="brandico-googleplus-rect"></span></a></li>
        </ul>
    </div>
</div>

All logos are property of their respective owners, No Copyright infringement intended.

The CSS part:

@import url(http://weloveiconfonts.com/api/?family=brandico);

/* brandico */
[class*="brandico-"]:before {
  font-family: 'brandico', sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    background: black;
    min-height: 100%;
    font-family: "Arial", sans-serif;
}

.wrap {
  position: relative;
  height: 100%;
  min-height: 500px;
  padding-bottom: 20px;
}

.game {
    transform-style: preserve-3d;
    perspective: 500px;
    min-height: 100%;
  height: 100%;
}

@mixin width($max){
    @media (max-width: $max){
        @content;
    }
}

@keyframes matchAnim {
    0% {
        background: #bcffcc;
    }
    100% {
        background: white;
    }
}

.card {
  float: left;
  width: 16.66666%;
  height: 25%;
  padding: 5px;
  text-align: center;
    display: block;
    perspective: 500px;
    position: relative;
    cursor: pointer;
  z-index: 50; 
    -webkit-tap-highlight-color: rgba(0,0,0,0);  
    @include width(800px){
        width: 25%;
        height: 16.666%;
    }
    .inside {
        width: 100%;
        height: 100%;
        display: block;
        transform-style: preserve-3d;
        transition: .4s ease-in-out;
        background: white;

        &.picked, &.matched {
            transform: rotateY(180deg);
        }
        &.matched {
            animation: 1s matchAnim ease-in-out;
            animation-delay: .4s;
        }
    }

  .front, .back {
    border: 1px solid black;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;

    img {
        max-width: 100%;
        display: block;
        margin: 0 auto;
        max-height: 100%;
    }
  }
  .front {
    transform: rotateY(-180deg);
    @include width(800px){
        padding: 5px;
    }
  }
  .back{
        @include width(800px){
        padding: 10px;
    }
  }
}

.modal-overlay {
    display: none;
    background: rgba(0,0,0,.8);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.modal {
    display: none;
    position: relative;
    width: 500px;
    height: 400px;
    max-height: 90%;
    max-width: 90%;
    min-height: 380px;
    margin: 0 auto;
    background: white;
    top: 50%;
    transform: translateY(-50%);
    padding: 30px 10px;
    .winner {
        font-size: 80px;
        text-align: center;
        font-family: "Anton", sans-serif;
        color: #4d4d4d;
        text-shadow: 0px 3px 0 black;
        @include width(480px){
            font-size: 60px;
        }
    }
    .restart {
        font-family: "Anton", sans-serif;
        margin: 30px auto;
        padding: 20px 30px;
        display: block;
        font-size: 30px;
        border: none;
        background: #4d4d4d;
        background: linear-gradient(#4d4d4d, #222);
        border: 1px solid #222;
        border-radius: 5px;
        color: white;
        text-shadow: 0px 1px 0 black;
        cursor: pointer;
        &:hover {
            background: linear-gradient(#222, black);
        }
    }
    .message {
        text-align: center;
        a {
            text-decoration: none;
            color: #28afe6;
            font-weight: bold;
            &:hover {
                $c: lighten(#28afe6, 10%);
                color: $c;
                border-bottom: 1px dotted $c;
            }
        }
    }
    .share-text {
        text-align: center;
        margin: 10px auto;
    }
    .social {
        margin: 20px auto;
        text-align: center;
        li {
            display: inline-block;
            height: 50px;
            width: 50px;
            margin-right: 10px;
            &:last-child {
                margin-right: 0;
            }
            a {
                display: block;
                line-height: 50px;
                font-size: 20px;
                color: white;
                text-decoration: none;
                border-radius: 5px;
                &.facebook {
                    background: #3b5998;
                    &:hover {
                        background: lighten(#3b5998, 10%);
                    }
                }
                &.google {
                    background: #D34836;
                    &:hover {
                        background: lighten(#D34836, 10%);
                    }
                }
                &.twitter {
                    background: #4099FF;
                    &:hover {
                        background: lighten(#4099FF, 10%);
                    }
                }
            }
        }
    }
}

footer {
    height: 20px;
    position: absolute;
    bottom: 0;
    width: 100%;
  z-index: 0;
    .disclaimer {
        line-height: 20px;
        font-size: 12px;
        color: #727272;
        text-align: center;
        @include width(767px){
            font-size: 8px;
        }
    }
}

And js:

(function(){

var Memory = {

    init: function(cards){
        this.$game = $(".game");
        this.$modal = $(".modal");
        this.$overlay = $(".modal-overlay");
        this.$restartButton = $("button.restart");
        this.cardsArray = $.merge(cards, cards);
        this.shuffleCards(this.cardsArray);
        this.setup();
    },

    shuffleCards: function(cardsArray){
        this.$cards = $(this.shuffle(this.cardsArray));
    },

    setup: function(){
        this.html = this.buildHTML();
        this.$game.html(this.html);
        this.$memoryCards = $(".card");
        this.binding();
        this.paused = false;
    this.guess = null;
    },

    binding: function(){
        this.$memoryCards.on("click", this.cardClicked);
        this.$restartButton.on("click", $.proxy(this.reset, this));
    },
    // kinda messy but hey
    cardClicked: function(){
        var _ = Memory;
        var $card = $(this);
        if(!_.paused && !$card.find(".inside").hasClass("matched") && !$card.find(".inside").hasClass("picked")){
            $card.find(".inside").addClass("picked");
            if(!_.guess){
                _.guess = $(this).attr("data-id");
            } else if(_.guess == $(this).attr("data-id") && !$(this).hasClass("picked")){
                $(".picked").addClass("matched");
                _.guess = null;
            } else {
                _.guess = null;
                _.paused = true;
                setTimeout(function(){
                    $(".picked").removeClass("picked");
                    Memory.paused = false;
                }, 600);
            }
            if($(".matched").length == $(".card").length){
                _.win();
            }
        }
    },

    win: function(){
        this.paused = true;
        setTimeout(function(){
            Memory.showModal();
            Memory.$game.fadeOut();
        }, 1000);
    },

    showModal: function(){
        this.$overlay.show();
        this.$modal.fadeIn("slow");
    },

    hideModal: function(){
        this.$overlay.hide();
        this.$modal.hide();
    },

    reset: function(){
        this.hideModal();
        this.shuffleCards(this.cardsArray);
        this.setup();
        this.$game.show("slow");
    },

    // Fisher--Yates Algorithm -- http://bost.ocks.org/mike/shuffle/
    shuffle: function(array){
        var counter = array.length, temp, index;
    // While there are elements in the array
    while (counter > 0) {
        // Pick a random index
        index = Math.floor(Math.random() * counter);
        // Decrease counter by 1
        counter--;
        // And swap the last element with it
        temp = array[counter];
        array[counter] = array[index];
        array[index] = temp;
        }
        return array;
    },

    buildHTML: function(){
        var frag = '';
        this.$cards.each(function(k, v){
            frag += '<div class="card" data-id="'+ v.id +'"><div class="inside">\
            <div class="front"><img src="'+ v.img +'"\
            alt="'+ v.name +'" /></div>\
            <div class="back"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/codepen-logo.png"\
            alt="Codepen" /></div></div>\
            </div>';
        });
        return frag;
    }
};

var cards = [
    {
        name: "php",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/php-logo_1.png",
        id: 1,
    },
    {
        name: "css3",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/css3-logo.png",
        id: 2
    },
    {
        name: "html5",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/html5-logo.png",
        id: 3
    },
    {
        name: "jquery",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/jquery-logo.png",
        id: 4
    }, 
    {
        name: "javascript",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/js-logo.png",
        id: 5
    },
    {
        name: "node",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/nodejs-logo.png",
        id: 6
    },
    {
        name: "photoshop",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/photoshop-logo.png",
        id: 7
    },
    {
        name: "python",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/python-logo.png",
        id: 8
    },
    {
        name: "rails",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/rails-logo.png",
        id: 9
    },
    {
        name: "sass",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sass-logo.png",
        id: 10
    },
    {
        name: "sublime",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sublime-logo.png",
        id: 11
    },
    {
        name: "wordpress",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/wordpress-logo.png",
        id: 12
    },
];

Memory.init(cards);
})();
Nighterance
  • 31
  • 4
  • What is the question? Sure you wanted to tag it `php` there is no PHP code. – Daniel W. Feb 02 '17 at 16:55
  • Basically what is best way to count time user has spent on website, until user has finished the puzzle, then echo time – Nighterance Feb 02 '17 at 16:58
  • You simply calculate the difference of two timestamps. Your question cannot be answered in a straight forward way within the scope of this platform. – Daniel W. Feb 02 '17 at 17:00
  • Possible duplicate of [plain count up timer in javascript](http://stackoverflow.com/questions/5517597/plain-count-up-timer-in-javascript) – Heretic Monkey Feb 02 '17 at 17:20

1 Answers1

1

You can accomplish a timer functionality with using setTimeout recursively or setInterval like so:

(function () {
  var timeContainer = document.getElementById("timer-value");
  var startButton = document.getElementById("start-game");
  var timer = 0;
  var maxTime = 30;
  var timeout = null;
  function count () {
    timeout = setTimeout(function () {
      if (timer < maxTime) {
        timer++;
        timeContainer.innerText = timer;
        count();
      }
      else {
        alert("Time's up!");
        startButton.style.display = "inline-block";
      }
    }, 1000);
  }
  function endGame () {
    clearTimeout(timeout);
    startButton.style.display = "inline-block";
    alert("You completed the game in time!");
  }
  function startGame () {
    if (timeout) { clearTimeout(timeout); }
    timer = 0;
    timeContainer.innerText = timer;
    this.style.display = "none";
    count();
  }
  document.getElementById("start-game").addEventListener("click", startGame);
  document.getElementById("end-game").addEventListener("click", endGame);
})();
<h3>Timer: <span id="timer-value">0</span></h3>
<button id="start-game">Start Game</button> <button id="end-game">End Game</button>
mhodges
  • 10,938
  • 2
  • 28
  • 46