头像

cocoonnnp




离线:19天前


最近来访(47)
用户头像
ljp_7
用户头像
H小轩
用户头像
arch_hui
用户头像
一万小时定律
用户头像
laser
用户头像
ilotus
用户头像
L._5
用户头像
风影_23
用户头像
yxc
用户头像
Skuy
用户头像
ღSupperღ
用户头像
123_34
用户头像
Traveller_t
用户头像
-摆烂王-
用户头像
shark_big
用户头像
Bob_8
用户头像
被大佬嘲笑的小菜鸡
用户头像
AJ
用户头像
masaki123
用户头像
瑶光


cocoonnnp
1个月前



cocoonnnp
1个月前



cocoonnnp
1个月前



cocoonnnp
1个月前



cocoonnnp
1个月前

实现AcWing一键登录

一、Player数据组更新

1、在ac-app/game/model/player下的player.py中添加

2、在ac-app下执行:python3 manage.py makemigrationspython3 manage.py migrate

二、安装在Django中集成Redis

1、安装django_redispip install django_redis

2、配置settings.py:

CACHES = {
    'default': {
        'BACKEND': 'django_redis.cache.RedisCache',
        'LOCATION': 'redis://127.0.0.1:6379/1',
        "OPTIONS": {
            "CLIENT_CLASS": "django_redis.client.DefaultClient",
        },
    },
}
USER_AGENTS_CACHE = 'default'

3、 启动redis-serversudo redis-server /etc/redis/redis.conf

三、后端编写apply_code.py:

1、定义参数:appid、redirect_uri、scope、state

2、利用参数生成一个apply_url_code返回给前端

from django.http import JsonResponse
from urllib.parse import quote
from random import randint
from django.core.cache import cache

def get_state(): # 获取8位随机数
    res = ""
    for i in range(8):
        res += str(randint(0, 9))
    return res

def apply_code(request):
    appid = "2783"

    redirect_uri = quote("https://app2783.acapp.acwing.com.cn/settings/acwing/web/receive_code") # 重定向链接,收到授权码之后的跳转

    scope = "userinfo" # 申请授权范围
    state = get_state() # 对一种暗号

    cache.set(state, True, 7200) # 将state放到redis中,有效期为2小时

    apply_code_url = "https://www.acwing.com/third_party/api/oauth2/web/authorize/"

    return JsonResponse({
        'result': "success",  # 测试
        'apply_code_url' : apply_code_url + "?appid=%s&redirect_uri=%s&scope=%s&state=%s"%(appid, redirect_uri, scope, state)
    })

四、前端点击acwing login调用apply_code.py

//接受后端数据resp 并跳转到指定网址resp.apply_code_url(后端给的)
acwing_login()
{
    $.ajax({
        url: "https://app2783.acapp.acwing.com.cn/settings/acwing/web/apply_code/",
        type: "GET",
        success: function(resp){
            if (resp.result === "success")
            {
                //将页面跳转到apply_code_url
                window.location.replace(resp.apply_code_url);
            }
        }
    });
}

五、同意授权后执行后端文件receive_code.py

1、该文件是用户在acwing里面同意授权之后
2、前端利用URL:https://app2783.acapp.acwing.com.cn/settings/acwing/web/receive_code/
3、该文件被调用:获取前端传入的参数data、code、state

from django.shortcuts import redirect                                                                                                               
from django.core.cache import cache                                                                                                                 
import requests                                                                                                                                     
from django.contrib.auth.models import User                                                                                                         
from django.contrib.auth import login                                                                                                               
from game.models.player.player import Player                                                                                                        
from random import randint                                                                                                                          

def receive_code(request):                                                                                                                          

    #1、获取acwing前端参数                                                                                                                          
    data = request.GET                                                                                                                              
    code = data.get('code') # Code                                                                                                                  
    state = data.get('state') # 暗号                                                                                                                
    if not cache.has_key(state): # 对暗号 失败则返回首页                                                                                            
        return redirect("index")                                                                                                                    

    cache.delete(state) # 暗号用完即扔                                                                                                              


    #2、通过Code、appid、app-secret申请授权令牌字典access_token_res                                                                                 
    apply_access_token_url = "https://www.acwing.com/third_party/api/oauth2/access_token/" # 申请授权令牌的api                                      
    params = { # 三个参数                                                                                                                           
        'appid': "2783",                                                                                                                            
        'secret': "6085fa28ee38460996aeadeeb5675327",                                                                                               
        'code': code,                                                                                                                               
    }                                                                                                                                               

    access_token_res = requests.get(apply_access_token_url, params = params).json() # 通过传入这几个参数访问api,获取授权令牌                       


    #3、通过得到的access_token_res获取access_token、openid                                                                                          
    access_token = access_token_res['access_token'] # 授权令牌
    openid = access_token_res['openid'] # openid                                                                                                    
    players = Player.objects.filter(openid = openid) # 在自己的服务器上的数据库找到一样的openid的玩家,表示已经有这个用户了,直接登录
    if players.exists():             
        login(request, players[0].user)                                   
        return redirect("index")     


    #4、通过得到的access_token、openid申请授权acwing用户username、photo   
    get_userinfo_url = "https://www.acwing.com/third_party/api/meta/identity/getinfo/" #申请的api
    params = {                       
        "access_token": access_token,                                     
        "openid": openid             
    }                                
    userinfo_res = requests.get(get_userinfo_url, params = params).json() #申请到的参数


    username = userinfo_res['username'] #获取名字、片                   
    photo = userinfo_res['photo']    


    while User.objects.filter(username = username).exists():              
        username += str(randint(0, 9))                                    


    #5、注册用户并登录               
    user = User.objects.create(username = username)                       
    player = Player.objects.create(user = user, photo = photo, openid = openid)

    login(request, user)


    # 最后一步!回到首页 如果注册成功则直接进入游戏模式
    return redirect("index")



cocoonnnp
1个月前

实现用户登录及注册


后端代码出错特别danten!! 没有报错显示 只有502界面!!!

  • 想要实现一个逻辑需要三步:views函数 urls路由 $.ajax前端请求

  • 实现登录

  • views函数
    1、game.views.settings.sigin处理$.ajax前端请求
    2、JsonResponse回复前端 前端得到一个resp字典

from django.http import JsonResponse
from django.contrib.auth import authenticate, login

def signin(request):
    data = request.GET # 获取$.ajax前端请求信息
    username = data.get('username') # 用户名
    password = data.get('password') # 密码
    user = authenticate(username = username, password = password) # 从数据库中查找这个用户
    if not user: # 如果没有就直接返回不成功
        return JsonResponse({
            'result': "用户名或密码不正确"
        })
    login(request, user) # 找到了后台就会在admin下登录
    return JsonResponse({
        'result': 'success'
    })
  • urls路由
    1、在路径/settings/login下会执行game.views.settings.sigin函数
...
from game.wiews.settings.login import signin

urlpatterns = [
    ...
    path("login/",signin,name="setings_login"),
]
  • $.ajax前端请求
    1、$.ajax固定模板!!
    login_on_remote()//前端登录                                                                                                                     
    {                                                                                                                                               
        let outer = this;                                                                                                                           

        let username = this.$login_username.val(); // 获取输入框中的用户名                                                                          
        let password = this.$login_password.val(); // 获取输入框中的密码                                                                            

        this.$login_error_message.empty(); // 清楚错误信息                                                                                          

        //向后端发送request 并发送date 得到resp回应                                                                                                 
        $.ajax({                                                                                                                                    
            url: "https://app2783.acapp.acwing.com.cn/settings/login", // 访问url                                                                   
            type: "GET",                                                                                                                            
            data: {                                                                                                                                 
                username: username, // 传输数据                                                                                                     
                password: password,                                                                                                                 
            },                                                                                                                                      
            success: function(resp){                                                                                                                
                console.log(resp); // 测试输出                                                                                                      
                if (resp.result === "success")                                                                                                      
                {                    
                    location.reload(); // 如果成功了就刷新                                                                                          
                }                    
                else
                {                    
                    outer.$login_error_message.html(resp.result); // 如果失败了就显错误信息
                }                    
            }                        
        });                          
    }

  • 实现注册

  • views函数
    1、game.views.settings.register处理$.ajax前端请求
    2、JsonResponse回复前端 前端得到一个resp字典

from django.http import JsonResponse                                                                                                                
from django.contrib.auth import login                                                                                                               
from django.contrib.auth.models import User                                                                                                         
from game.models.player.player import Player                                                                                                        

def register(request):
    data = request.GET

    #strip()去除前后空格
    username = data.get("username", "").strip()
    password = data.get("password", "").strip()
    password_confirm = data.get("password_confirm", "").strip()


    if not username or not password:
        return JsonResponse({
            'result': "The username or password is null"
        })
    if password != password_confirm:
        return JsonResponse({
            'result': "The two passwords are different"
        })
    if User.objects.filter(username = username).exists():
        return JsonResponse({
            'result': "The username already exists"
        })

    user = User(username = username)
    user.set_password(password)
    user.save()
    Player.objects.create(user = user, photo = "https://wx4.sinaimg.cn/mw690/008adqNDgy1h51u0ep7wxj30ea0e9we9.jpg")
    login(request, user)
    return JsonResponse({
        'result': "success"
    })
  • urls路由
    1、在路径/settings/register下会执行game.views.settings.register函数
...
from game.wiews.settings.register import register

urlpatterns = [
    ...
    path("register/",signin,name="setings_register"),
]
  • $.ajax前端请求
    1、$.ajax固定模板!!
    register_on_remote()//前端注册                                                                                                                  
    {                                                                                                                                               
        let outer = this;                                                                                                                           
        let username = this.$register_username.val();                                                                                               
        let password = this.$register_password.val();                                                                                               
        let password_confirm = this.$register_password_confirm.val();                                                                               

        this.$register_error_message.empty();                                                                                                       

        $.ajax({                                                                                                                                    
            url: "https://app2783.acapp.acwing.com.cn/settings/register/",                                                                          
            type: "GET",                                                                                                                            
            data: {                                                                                                                                 
                username: username,                                                                                                                 
                password: password,                                                                                                                 
                password_confirm: password_confirm,                                                                                                 
            },                                                                                                                                      
            success: function(resp){                                                                                                                
                console.log(resp);                                                                                                                  
                if (resp.result === "success")                                                                                                      
                {                                                                                                                                   
                    location.reload(); // 刷新网页                                                                                                  
                }                                                                                                                                   
                else                                                                                                                                
                {                                                                                                                                   
                    outer.$register_error_message.html(resp.result);                                                                                
                }                                                                                                                                   
            }                                                                                                                                       
        });                                                                                                                                         
    }



cocoonnnp
1个月前

用域名登录网站代替ip地址

#! /bin/bash

JS_PATH=/home/czy/ac-app/game/static/js/
#JS_PATH_DIST=${JS_PATH}dist/
JS_PATH_SRC=${JS_PATH}src/

find $JS_PATH_SRC -type f -name '*.js' | sort | xargs cat > ${JS_PATH}game.js

echo yes | python3 /home/czy/ac-app/manage.py collectstatic
  • 启动uwsgi服务:uwsgi --ini scripts/uwsgi.ini

  • 做封面真不容易!!!先录屏 再加入场出场渐变 最后转GIF 还不能超过10MB!!




cocoonnnp
1个月前

利用JS实现游戏页面单人模式

  • 主要参考这篇笔记: Django-4.1 游戏页面

  • playground主目录下创建AcGamePlayground这个游戏页面系统类,在里面创建玩家(当前+电脑玩家)、地图

  • ac_game_object下创建一个基类AcGameObject,作用有:

  • 1、创建玩家数组
  • 2、当玩家创建时会被存入玩家数组中
  • 3、当玩家销毁时从数组中删除
  • 4、实现玩家初始执行start() 此后每一帧执行update()函数
  • 5、虚函数:start()、update()、on_destroy()

  • game_map中创建AcGameObject的派生类GameMap,实现背景画布功能

  • player中创建AcGameObject的派生类Player,实现玩家的所有功能如:

  • 1、监听系统(当前玩家专属)
  • 2、移动函数
  • 3、技能函数

  • 派生类构造函数中必须首先调用super() 即可调用基类的构造函数

  • skill中创建AcGameObject的派生类FireBall,实现火球技能




cocoonnnp
2个月前

JS学习笔记

  • 因为html里面创建了一个AcGame类的一个对象 因此在html里直接调用用js写的一个对象从而达到用js渲染html的功能 html源码:
{% load static %}  <!--查找并载入静态文件static的文件夹-->

<head>
    <!--引入jQuery的css-->
    ···
    <!--引入jQuery的js-->  
    ···

    <!--引入自己写的game.css-->
    <link rel="stylesheet" href="{% static 'css/game.css' %}">
    <!--引入自己写的game.js-->
    <script src="{% static 'js/game.js' %}"></script>
</head>

<body style="margin: 0">   
    <div id="ac_game_01"></div>  #div id 且生成一个div对象!!!
    <script>
        $(document).ready(function(){      
            let ac_game = new AcGame("ac_game_01");  <!--创建AcGame对象ac_game-->
        }); 
    </script>
</body>

  • js/src下创建总js文件zbase编写AcGame对象
class AcGame {
    #constructor:构造函数 创建对象后会执行!!
    constructor(id) {
        this.id = id; #div_id

        #定义一个html的div变量一般前面会加上$
        this.$div_acgame = $('#'+id);  #通过div_id绑定的html下的div变量

        this.menu = new AcGameMenu(this); #创建一个AcGameMenu对象menu
        this.start();
    }
    start() {
    }
}

  • js/src/menu下的zbase.js创建AcGameMenu对象
class AcGameMenu
{
    #root就是html中创建的AcGame对象ac_game
    constructor(root)
    {
        this.root = root;

        #定义一个html的div变量menu   $('')里面就是html的内容!!!!
        this.$menu = $(`

#div变量 和css挂钩
<div class="ac-game-menu" >
</div>

`);
        #html下的div变量:ac_game.div_acgame后面添加div变量menu  实现渲染!!!!
        this.root.$div_acgame.append(this.$menu);
    }
}
  • 用js渲染html原理:
  • 1、在web.html里有一个div变量div_acgame(div id=ac_game_01)等待添加其他div变量
  • 2、在web.html里又有一个js对象ac_game 里面存了div_acgame 所以在js对象里对ac_game添加其他的div变量就ok了!!!

  • 详细前端代码就不写了 大概思路都一样 利用js对象和函数实现动态处理


  • 监听系统注释:
#add_listening_events()、hide()均为AcGameMenu的函数
    add_listening_events() {

        let outer = this; #outer定义为该AcGameMenu对象

        #当div变量single_mode被点击
        this.$single_mode.click(function(){
             outer.hide(); // 隐藏这个Menu

             #root为outer下的AcGame对象  从而可创建里面的AcGamePlayground对象
             outer.root.playground = new AcGamePlayground(outer.root);
        });
    }

    hide(){
        this.$menu.hide();
    }



cocoonnnp
2个月前

Django学习遇到的问题

  • game/views/index.py中发现:命令return render(request,"mutiends/web.html")Django会自动去template下查找mutiends/web.html 返回首页的html

  • 首页html实现:acapp/urls/path=''>>>game/urls/index/path=''>>>views/index/index函数>>>template/mutiends/web.html

  • 各文件夹功能:src(js)、views(函数)、template(前端html)、urls(路由)

  • 最脑残的bug!!!:static静态文件里的内容终端里面改了 但是前端那边没有改!
    解决办法:在网页打开static/js/game.jscss刷新