在jQuery拖拽中得分

本文关键字：jQuery | 更新日期: 2023-09-27 18:10:07

我正在制作一款基于jQuery的游戏，我是新手。我想知道如何将这个游戏分数存储在一些变量中，然后在c#中的一些变量中，这样我就可以进行SQL连接并将其发送到数据库表。我不知道这是否可能，但我希望它能像那样工作。不知道如何使用ajax调用之类的东西。如果它以某种方式链接到c#，对我来说工作起来会更容易。我正在研究asp.net webforms。

请帮我记分吧!我很想做这件事，但我没有多少时间。谢谢。

下面是代码，

 $(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 );
    });
    });

在jQuery拖拽中得分

我建议使用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);
            }
        });
相关文章：