利用AJAX将JavaScript游戏分数集成至Django模型：一份实践指南

# your_app_name/models.py
from django.db import models
from django.contrib.auth.models import User # 导入Django的用户模型

class Ranking(models.Model):
    """
    存储游戏玩家的分数排名信息。
    """
    player = models.ForeignKey(User, on_delete=models.CASCADE, verbose_name="玩家")
    game_overall_score = models.IntegerField(verbose_name="游戏总分", null=True, blank=True)
    submission_date = models.DateTimeField(auto_now_add=True, verbose_name="提交日期")

    class Meta:
        # 按照分数降序排列，同分时按提交日期升序排列
        ordering = ['-game_overall_score', 'submission_date']
        verbose_name = "游戏排名"
        verbose_name_plural = "游戏排名"

    def __str__(self):
        return f"{self.player.username} - {self.game_overall_score}"

# your_app_name/views.py
import json
from django.shortcuts import render
from django.http import JsonResponse
from django.views.decorators.http import require_POST
from django.views.decorators.csrf import csrf_exempt # 生产环境不推荐直接使用
from django.contrib.auth.decorators import login_required
from .models import Ranking, Game # 假设您有一个Game模型

# 原始的加载游戏页面视图
def loadGame(request, slug):
    game = Game.objects.get(slug=slug)
    return render(request, 'main/game-detail.html', {
        'game': game
    })

@require_POST # 确保只接受POST请求
@login_required # 确保只有登录用户才能访问此视图
# @csrf_exempt # 警告：生产环境不应直接使用此装饰器，应通过AJAX请求头传递CSRF Token
def submit_game_score(request):
    """
    处理通过AJAX提交的游戏分数。
    """
    try:
        # 解析请求体中的JSON数据
        data = json.loads(request.body)
        score = data.get('game_overall_score')

        if score is None:
            return JsonResponse({'status': 'error', 'message': '分数不能为空。'}, status=400)

        # 验证分数是否为整数
        try:
            score = int(score)
        except ValueError:
            return JsonResponse({'status': 'error', 'message': '分数必须是整数。'}, status=400)

        # 获取当前登录用户
        player = request.user

        # 创建并保存新的排名记录
        # 您可以在此处添加逻辑，例如只保存用户的最高分，或者更新现有记录
        Ranking.objects.create(player=player, game_overall_score=score)

        return JsonResponse({'status': 'success', 'message': '分数提交成功！'})

    except json.JSONDecodeError:
        return JsonResponse({'status': 'error', 'message': '无效的JSON数据格式。'}, status=400)
    except Exception as e:
        # 捕获其他可能的异常
        return JsonResponse({'status': 'error', 'message': f'服务器内部错误: {str(e)}'}, status=500)

# your_app_name/urls.py
from django.urls import path
from . import views

urlpatterns = [
    # ... 其他URL配置
    path('games/<slug:slug>/', views.loadGame, name='game_detail'), # 原始的游戏详情页URL
    path('submit-score/', views.submit_game_score, name='submit_game_score'), # 提交分数的API端点
]

<!-- main/game-detail.html -->
{% extends 'base.html' %} {# 假设您有一个基础模板 #}
{% load static %} {# 加载静态文件标签 #}

{% block content %}
    <h1>{{ game.title }}</h1>
    <div id="game-container">
        <!-- 您的游戏画布或游戏内容将在此处渲染 -->
        <p>当前分数: <span id="current-score">0</span></p>
    </div>

    <!-- 提交分数按钮，初始可隐藏，游戏结束后再显示 -->
    <button id="submit-score-btn" style="display: none;">上传我的高分</button>

    <!-- 隐藏的CSRF token输入字段，用于AJAX请求 -->
    <input type="hidden" id="csrf-token" value="{{ csrf_token }}">

    {# 确保引入jQuery库 #}
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    {# 引入您的游戏逻辑JS文件 #}
    <script src="{% static 'js/game.js' %}"></script>
{% endblock %}

// static/js/game.js

var score = 0; // 您的游戏分数变量
// ... 您的游戏逻辑，例如分数增加和重置

// 示例：更新分数显示
function updateScoreDisplay() {
    $('#current-score').text(score);
}

// 假设这是您的游戏主循环或分数更新逻辑
var frameCount = 0;
function gameLoop() {
    // ... 您的游戏渲染和逻辑
    frameCount++;
    if (frameCount % 5 === 0) { // 示例：每5帧分数加1
        score++;
        updateScoreDisplay();
    }
    // 假设游戏碰撞会导致分数重置
    // if (pipes[i].hits(bird)) { // 示例：游戏结束逻辑
    //     score = 0;
    //     pipes = [];
    //     updateScoreDisplay();
    //     gameOver(); // 调用游戏结束函数
    //     return;
    // }
    // requestAnimationFrame(gameLoop); // 如果是动画游戏，通常使用这个
}

// 游戏结束时调用的函数
function gameOver() {
    // 执行游戏结束后的清理工作...
    $('#submit-score-btn').show(); // 显示