I need to calculate a total duration of the memory game. At the moment I can count the clicks, but I need to figure out how long it takes to open all images in sec. How can I send it to the database? I've tried some code but with no luck. This is my first experience with JavaScript, so please forgive me if the answer is obvious. Thanks for any advice.

Javascript :

    var BoxOpened = "";
    var ImageOpened = "";
    var startTime = new Date().getTime();
    var Counter = 0;
    var ImageFound = 0;
    var Source = "#memorybox";

    var ImageSource = [
      "Images/animals/cow.jpg",
      "Images/animals/cow2.jpg",
      "Images/animals/sheep.jpg",
      "Images/food/lemon.jpg",
      "Images/animals/elephant.jpg",
      "Images/animals/giraffe.jpg",
      "Images/food/banana.jpg",
      "Images/animals/dog.jpg",
      "Images/animals/horse.jpg",
      "Images/animals/lion.jpg"
    ];


   function RandomFunction(MaxValue, MinValue) {
        return Math.round(Math.random() * (MaxValue - MinValue) + MinValue);
    }

    function ShuffleImages() {
        var ImageAll = $(Source).children();
        var ImageThis = $(Source + " div:first-child");
        var ImageArr = new Array();

        for (var i = 0; i < ImageAll.length; i++) {
            ImageArr[i] = $("#" + ImageThis.attr("id") + " img").attr("src");
            ImageThis = ImageThis.next();
        }

        ImageThis = $(Source + " div:first-child");

        for (var z = 0; z < ImgageAll.length; z++) {
            var RandomNumber = RandomFunction(0, ImgArr.length - 1);

            $("#" + ImageThis.attr("id") + " img").attr("src", ImageArr[RandomNumber]);
            ImageArr.splice(RandomNumber, 1);
            ImageThis = ImageThis.next();
        }
    }

    function ResetGame() {
        ShuffleImages();
        $(Source + " div img").hide();
        $(Source + " div").css("visibility", "visible");
        Counter = 0;
        $("#success").remove();
        $("#counter").html("" + Counter);
        BoxOpened = "";
        ImageOpened = "";
        ImageFound = 0;
        return false;
    }

    function OpenCard() {
        var id = $(this).attr("id");

        if ($("#" + id + " img").is(":hidden")) {
            $(Source + " div").unbind("click", OpenCard);

            $("#" + id + " img").slideDown('fast');

            if (ImageOpened == "") {
                BoxOpened = id;
                ImageOpened = $("#" + id + " img").attr("src");
                setTimeout(function () {
                    $(Source + " div").bind("click", OpenCard)
                }, 300);
            } else {
                CurrentOpened = $("#" + id + " img").attr("src");
                if (ImageOpened != CurrentOpened) {
                    setTimeout(function () {
                        $("#" + id + " img").slideUp('fast');
                        $("#" + BoxOpened + " img").slideUp('fast');
                        BoxOpened = "";
                        ImageOpened = "";
                    }, 400);
                } else {
                    $("#" + id + " img").parent().css("visibility", "hidden");
                    $("#" + BoxOpened + " img").parent().css("visibility", "hidden");
                    ImageFound++;
                    BoxOpened = "";
                    ImageOpened = "";
                }
                setTimeout(function () {
                    $(Source + " div").bind("click", OpenCard)
                }, 400);
            }
            Counter++;
            $("#<%=HiddenField1.ClientID%>").val(Counter);


            $("#counter").html("" + Counter);


         if (ImageFound == ImageSource.length) {
                $("#counter").prepend('<span id="success" runat="server">You Found All Pictues With </span>');

                setTimeout(function () {
                    var endTime = new Date().getTime();
                    console.log("duration  = " + (endTime - startTime));
                }, 1500);

                $("#test").html("" + (endTime - startTime));
                alert(endTime - startTime);

            }
        }
    }

    $(function () {

        for (var y = 1; y < 3 ; y++) {
            $.each(ImageSource, function (i, val) {
                $(Source).append("<div id=card" + y + i + "><img src=" + val + " />");
            });
        }
        $(Source + " div").click(OpenCard);
        ShuffleImages();

    });

HTML :

<span id="Span1" class="button" runat="server">

    <span id="counter"   >0 </span>
  Clicks  </span> 

  <asp:HiddenField ID="HiddenField1" runat="server"    />



<span class="button">

  <a onclick="ResetGame();">Reset</a>

</span> 

  <asp:Button ID="Button1" runat="server" Text="Save" OnClick="Button1_Click"     CssClass="button" />
   <asp:Label ID="test" runat="server" Text="Duration" />
    </span>
    <div id="memorybox"></div>
    </div>

C# :

    SqlConnection connection = null;

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {

        }
    }


    protected void Button1_Click(object sender, EventArgs e)
    {
        int sec = int.Parse(test.Text);
        int value = int.Parse(HiddenField1.Value);


        connection = DatabaseConnectionSetup();
        SqlCommand submitCommand;
        try
        {
            submitCommand = new SqlCommand("ResultInsert", connection);
            submitCommand.CommandType = CommandType.StoredProcedure;

          //  submitCommand.Parameters.AddWithValue("@Duration", HiddenField2.Value);
            submitCommand.Parameters.AddWithValue("@UserScore", HiddenField1.Value);

            connection.Open();
            submitCommand.ExecuteNonQuery();


        }
        catch (Exception ex)
        {
        }
        finally
        {
            connection.Close();
        }


    }

    private SqlConnection DatabaseConnectionSetup()
    {

        try
        {
            ConnectionStringSettings connectionString = ConfigurationManager.ConnectionStrings["MonkeyClubConnectionString"];
            if (connectionString != null)
            {
                connection = new SqlConnection(connectionString.ConnectionString);
            }
        }
        catch (Exception ex)
        {

        }

        return connection;
    }

Related posts

Recent Viewed