Question

我正在尝试制作纸牌游戏，而我正在使用ajax来实现这一目标而无需重新加载页面。我在下方发布了一个视频，以便您更好地了解。我要做的是，玩家可以根据需要抽出任意数量的卡，并在桌子上发送他想要的卡数量。使用我的代码，玩家只要不尝试将牌发送到桌子上，就只能抽取任意数量的牌。如果他想将卡片发送到桌子，则不能，他必须刷新页面。现在，如果他将一张卡片发送到桌子上，他将无法再发送一张卡片，也无法抽出另一张卡片。我在做什么错了，所以播放器不必再刷新页面了？

以下是视频：https://streamable.com/7iuaf

烧瓶代码：

from flask import Flask, render_template, jsonify, request
from game import Game

app = Flask(__name__)
game = Game(4)


@app.route('/')
def game_main():
    return render_template('game.html', card_on_table=game.card_on_table, player_deck=game.player_cards,
                           players_cards=game.ai_players)


@app.route('/cardChose', methods=['POST'])
def card_chose():
    chosen_card = int(request.json)
    game.put_card(chosen_card)

    return jsonify({'player_cards': render_template('playercards.html', player_deck=game.player_cards),
                    'table_card': render_template('cardOnTable.html', card_on_table=game.card_on_table)})


@app.route('/drawCard', methods=['POST'])
def draw_card():
    game.draw_card(game.player_cards)
    return jsonify({'player_cards': render_template('playercards.html', player_deck=game.player_cards)})


if __name__ == '__main__':
    app.run(debug=True)

JavaScript：

$(function(){
   $('.drawCard').on('click', function(){
      req = $.ajax({
         url: '/drawCard',
         type: 'POST'
      });

      req.done(function(resp) {
         $('.playerDeck').html(resp.player_cards);

      });
   });

   $('.playerCard').on('click', function(e){
      req = $.ajax({
          url : '/cardChose',
          type : 'POST',
          data: JSON.stringify(e.target.id, null, '\t'),
          contentType: 'application/json;charset=UTF-8'

      });

      req.done(function(resp){
        $('.playerDeck').html(resp.player_cards);
        $('.tableCard').html(resp.table_card);
      });
   });
});

HTML：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="{{url_for('static', filename='main.css')}}">

    <title>Game</title>
  </head>
  <body>
    <div class="container">
    <div class="float-left">
        <ul class="pt-4 list-group">{% block players %}{% endblock %}</ul></div>
        <div class="pt-4 text-center">
        <div class="tableCard">{% block current_card %}{% endblock %}
        <a href="#"><img class="ml-4 img-responsive drawCard" src="/static/cards/back.png" width="250" height="363"></a></div>

            <div class="pt-4 playerDeck">{% block player_cards %}{% endblock %}</div>
        </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="http://code.jquery.com/jquery.js"></script>
{#    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>#}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="{{ url_for('static', filename='app.js') }}"></script>

  </body>
</html>

无需载入页面即可加载玩家卡片的HTML（代码中为playercards.html）：

{% block player_cards %}
    {% for card in player_deck %}
    <a href="#"><img class="img-responsive playerCard" src="{{ card.image }}" width="100" height="145" id="{{ card.id }}"></a>
    {% endfor %}
{% endblock player_cards %}

HTML（代码中为cardOnTable.html），可加载表格中的卡片而无需刷新页面

{% block current_card %}
    <img class="img-responsive" src="{{ card_on_table.image }}" width="250" height="363" cardId="{{ card_on_table.id }}">
    <a href="#"><img class="ml-4 img-responsive drawCard" src="/static/cards/back.png" width="250" height="363"></a></div>

{% endblock current_card %}

如果我不刷新，则Ajax POST方法不起作用

0 个答案: