Question

我正在开发一个关于jQuery的游戏，我是新手。我想知道如何将这些游戏分数存储在某个变量中，然后存储在c＃中的某个变量中，这样我就可以建立SQL连接并将其发送到db表。我不知道它是否可能，但我希望它能像这样工作。不知道如何使用ajax调用和东西。如果它以某种方式链接到c＃，我会更容易工作。我正在开发asp.net webforms。

请帮帮我得分！我很想这样做，而且我没有太多时间。 Thankss。

这是代码，

 $(document).ready(function () {
            $('#Img6').hide();
            $('#Img7').hide();
            $(function () {
            $("#draggable").draggable({ revert: "invalid", helper: 'clone', tolerance: 'fit' });
            $("#draggable1").draggable({ revert: "invalid", helper: 'clone', tolerance: 'fit' });
            $("#draggable2").draggable({ revert: "invalid", helper: 'clone', tolerance: 'fit' });
            $("#droppable").droppable({

                activeClass: "ui-state-default",
                hoverClass: "ui-state-hover",
                drop: function (event, ui) {
                    var TestOp = $(this).attr('id');
                    if (TestOp == "droppable") {
                        $("#draggable2").draggable({ revert: "invalid" });
                        $("#draggable1").draggable({ revert: "valid" });
                        $("#draggable").draggable({ revert: "valid" });

                        $(this)
      .addClass("ui-state-highlight")
      .find("> p")
        .html("Dropped!");
                        return true;
                    }

                    else {
                        $(this)
      .addClass("ui-state-highlight")
      .find("> p")
        .html("Wolaaa");
                    }
                }
            });
        });


        $(".arrow").click(function () {
            $('#Img1').hide();
            $('#Img6').show();

            $(function () {
                $("#draggable").draggable({ revert: "valid", helper: 'clone' });
                $("#draggable1").draggable({ revert: "valid", helper: 'clone' });
                $("#draggable2").draggable({ revert: "valid", helper: 'clone' });

                //            $(".draggable,.draggable1,.draggable2").draggable('refresh');
                $("#droppable").droppable({
                    activeClass: "ui-state-default",
                    hoverClass: "ui-state-hover",
                    drop: function (event, ui) {
                        var TestOp = $(this).attr('id');
                        if (TestOp == "droppable") {
                            $("#draggable2").draggable({ revert: "valid" });

                            $("#draggable1").draggable({ revert: "valid" });
                            $("#draggable").draggable({ revert: "invalid" });

                            $(this)
      .addClass("ui-state-highlight")
      .find("> p")
        .html("Dropped!");
                            return true;
                        }

                        else {
                            $(this)
      .addClass("ui-state-highlight")
      .find("> p")
        .html("Wolaaa");
                        }
                    }
                });
            });

        });
        $(".arrow").dblclick(function () {
            $('#Img7').show();
            $('#Img6').hide();
            $('#Img1').hide();
            $(function () {
                $("#draggable").draggable({ revert: "invalid" });
                $("#draggable1").draggable({ revert: "invalid" });
                $("#draggable2").draggable({ revert: "invalid" });
                $("#droppable").droppable({
                    activeClass: "ui-state-default",
                    hoverClass: "ui-state-hover",
                    drop: function (event, ui) {
                        var TestOp = $(this).attr('id');
                        if (TestOp == "droppable") {
                            $("#draggable2").draggable({ revert: "valid" });
                            $("#draggable1").draggable({ revert: "invalid" });
                            $("#draggable").draggable({ revert: "valid" });

                            $(this)
      .addClass("ui-state-highlight")
      .find("> p")
        .html("Dropped!");
                            return true;
                        }

                        else {
                            $(this)
      .addClass("ui-state-highlight")
      .find("> p")
        .html("Wolaaa");
                        }
                    }
                });
            });
        });

        $(".leftarrow").click(function () {
            $('#Img1').show();
            $('#Img6').hide();
            $('#Img7').hide();
        });
    });

    $('#submitScore').on('click', function (e) {

    $.post( 'example.aspx', { userScore: '100', userId: '2' })
    .done(function (data) {

    alert( "Data Loaded: " + data );
    });

    });

Answer 1

我建议使用HTML本地存储来存储分数。这将允许会话之间持续得分。

您可以在此处阅读有关本地存储的信息：http://diveintohtml5.info/storage.html

如果你想将值反馈给C＃，那么你可以通过正常的Ajax调用来做到这一点。假设您正在使用MVC和Web API，那么如果路由与默认路由不同，则设置路由;

        config.Routes.MapHttpRoute(
            name: "ScoreApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

然后创建一个Web Api控制器（如果你真的想要的话，还是普通的控制器，但你也需要一个标准的MVC路由）;

    [HttpPost]
    public HttpResponseMessage Post(string score)
    {
        ////DO SOMETHING WITH SCORE

        HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK, "value");
        response.Content = new StringContent("Score Saved", Encoding.Unicode);
        response.Headers.CacheControl = new CacheControlHeaderValue()
        {
        MaxAge = TimeSpan.FromMinutes(20)
        };

        return response;
    }

现在最后只需从你的drop函数中调用;

        $.ajax({
            type: "POST",
            url: "/api/SaveScore" + score,
            contentType: "application/json",
            dataType: "json",
            success: function(data) {

                alert(Data);

            }
        });

在jQuery draggables中得分

1 个答案: