基于Django的网页游戏开发问题：数据交互、数值增长与按钮控制

1. 将HTML数据存入SQLite数据库 #

核心利用Django ORM处理数据库交互，配合前端提交数据完成感染值更新：

• 第一步：定义玩家模型
  在models.py中创建存储玩家数据的模型：

from django.db import models
from django.contrib.auth.models import User

class Player(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    infection_value = models.IntegerField(default=0)  # 初始感染值设为0

执行python manage.py makemigrations和python manage.py migrate生成数据库表。

• 第二步：前端提交二维码数据
  通过AJAX将扫描得到的负数值发送到后端（需携带Django CSRF令牌）：

// 假设扫描后得到的减益值为reduceValue
const reduceValue = -25;
fetch('/update-infection/', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': getCookie('csrftoken')
    },
    body: JSON.stringify({ reduce_value: reduceValue })
})
.then(res => res.json())
.then(data => console.log(data.new_value));

// 辅助函数获取CSRF令牌
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie) {
        const cookies = document.cookie.split(';');
        for (let cookie of cookies) {
            cookie = cookie.trim();
            if (cookie.startsWith(`${name}=`)) {
                cookieValue = decodeURIComponent(cookie.slice(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

• 第三步：后端处理请求并更新数据库
  在views.py中编写视图函数接收数据，更新玩家感染值：

from django.http import JsonResponse
from django.views.decorators.http import require_POST
from django.contrib.auth.decorators import login_required
from .models import Player

@login_required
@require_POST
def update_infection(request):
    data = request.json
    reduce_value = data.get('reduce_value', 0)
    player = Player.objects.get(user=request.user)
    # 确保感染值不会低于0
    player.infection_value = max(0, player.infection_value + reduce_value)
    player.save()
    return JsonResponse({
        'message': '更新成功',
        'new_value': player.infection_value
    })

在urls.py中配置对应路由：

from django.urls import path
from . import views

urlpatterns = [
    path('update-infection/', views.update_infection, name='update_infection'),
]

2. 实现感染值随时间动态增长 #

推荐后端计算核心逻辑+前端实时同步的方案，避免前端作弊：

• 后端逻辑：基于时间差计算增长值
  给Player模型添加last_update字段，记录上次更新时间：

class Player(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    infection_value = models.IntegerField(default=0)
    last_update = models.DateTimeField(auto_now=True)  # 自动更新为当前时间

编写工具函数计算并更新最新感染值：

from django.utils import timezone
from datetime import timedelta

def get_updated_infection(player):
    # 设定每分钟增长1点，可根据需求调整
    growth_rate = 1
    now = timezone.now()
    time_diff = now - player.last_update
    minutes_passed = int(time_diff.total_seconds() // 60)
    
    if minutes_passed > 0:
        # 感染值最高不超过100
        player.infection_value = min(100, player.infection_value + minutes_passed * growth_rate)
        player.last_update = now
        player.save()
    return player.infection_value

• 前端同步：定时拉取最新数值
  用setInterval定时请求后端接口，更新页面显示：

function refreshInfectionValue() {
    fetch('/get-infection/')
    .then(res => res.json())
    .then(data => {
        document.getElementById('infection-display').textContent = data.value;
        if (data.is_zombie) {
            // 触发僵尸状态的页面逻辑
            document.getElementById('zombie-status').style.display = 'block';
        }
    });
}

// 每30秒刷新一次，可调整频率
setInterval(refreshInfectionValue, 30000);
// 页面加载时立即获取一次
window.onload = refreshInfectionValue;

3. 感染值达标时禁用其他页面的按钮 #

根据页面是否同项目，提供两种方案：

方案1：后端共享状态（安全可靠，推荐） #

如果两个页面属于同一Django项目，通过后端接口判断僵尸状态：

• 后端提供状态查询接口：

@login_required
def check_zombie_status(request):
    player = Player.objects.get(user=request.user)
    current_value = get_updated_infection(player)
    return JsonResponse({'is_zombie': current_value >= 100})

• 朋友的页面加载时请求接口，处理按钮状态：

fetch('/check-zombie/')
.then(res => res.json())
.then(data => {
    const targetBtn = document.getElementById('target-button');
    if (data.is_zombie) {
        targetBtn.disabled = true;
        targetBtn.style.display = 'none';
    }
});

方案2：前端本地存储（跨项目临时方案） #

如果页面不属于同一项目，可通过localStorage传递状态（存在被篡改风险）：

• 你的页面检测到僵尸状态时写入存储：

// 当后端返回is_zombie为true时
localStorage.setItem('is_zombie', 'true');

• 朋友的页面读取存储并处理按钮：

window.onload = () => {
    const isZombie = localStorage.getItem('is_zombie') === 'true';
    if (isZombie) {
        const btn = document.getElementById('target-button');
        btn.disabled = true;
        btn.style.display = 'none';
    }
};

内容的提问来源于stack exchange，提问作者Isaac So