Django学习笔记-实现联机对战

笔记内容转载自 AcWing 的 Django 框架课讲义，课程链接：AcWing Django 框架课。

CONTENTS

    • 1. 统一长度单位
    • 2. 增加联机对战模式
    • 3. 配置Django Channels

1. 统一长度单位

多人模式中每个玩家所看到的地图相对来说应该是一样的，因此需要固定地图的长宽比，一般固定为16:9。我们需要在游戏窗口的长宽中取最小值，然后将地图渲染为16:9的大小。

我们在 AcGamePlayground 类中实现一个 resize 函数用于将长宽比调整为16:9并且达到最大：

class AcGamePlayground {constructor(root) {this.root = root;this.$playground = $(`<div class='ac_game_playground'></div>`);this.root.$ac_game.append(this.$playground);this.start();}get_random_color() {...}start() {this.hide();  // 初始化时需要先关闭playground界面let outer = this;$(window).resize(function() {outer.resize();});  // 用户改变窗口大小时改函数会触发}// 将长宽比调整为16:9resize() {this.width = this.$playground.width();this.height = this.$playground.height();let unit = Math.min(this.width / 16, this.height / 9);this.width = unit * 16;this.height = unit * 9;this.scale = this.height;  // 当窗口大小改变时所有目标的相对大小和位置也要改变if (this.game_map) this.game_map.resize();  // 如果地图存在需要调用地图的resize函数}// 显示playground界面show() {this.$playground.show();// 将界面的宽高先存下来this.width = this.$playground.width();this.height = this.$playground.height();this.game_map = new GameMap(this);  // 创建游戏画面this.resize();  // 界面打开后需要resize一次，需要将game_map也resize...}// 关闭playground界面hide() {this.$playground.hide();}
}

现在需要将窗口大小的修改效果作用到黑色背景上，因此我们在 GameMap 类中也实现一个 resize 函数用于修改背景大小：

class GameMap extends AcGameObject {constructor(playground) {  // 需要将AcGamePlayground传进来super();  // 调用基类构造函数，相当于将自己添加到了AC_GAME_OBJECTS中this.playground = playground;this.$canvas = $(`<canvas></canvas>`);  // 画布，用来渲染画面this.ctx = this.$canvas[0].getContext('2d');  // 二维画布this.ctx.canvas.width = this.playground.width;  // 设置画布宽度this.ctx.canvas.height = this.playground.height;  // 设置画布高度this.playground.$playground.append(this.$canvas);  // 将画布添加到HTML中}start() {}resize() {this.ctx.canvas.width = this.playground.width;this.ctx.canvas.height = this.playground.height;this.ctx.fillStyle = 'rgba(0, 0, 0, 1)';  // 每次调整大小后直接涂一层不透明的背景this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);}update() {this.render();  // 每一帧都要画一次}render() {this.ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';  // 黑色背景// 左上角坐标(0, 0)，右下角坐标(w, h)this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);}
}

我们修改一下 game.css 文件，添加以下内容，实现将地图居中：

.ac_game_playground > canvas {position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

现在我们还需要修改地图里面的目标，一共有三种分别是玩家、火球、被击中的粒子效果。

首先修改一下 AcGamePlayground 类中的玩家初始化代码：

class AcGamePlayground {constructor(root) {...}get_random_color() {...}start() {...}// 将长宽比调整为16:9resize() {...}// 显示playground界面show() {this.$playground.show();// 将界面的宽高先存下来this.width = this.$playground.width();this.height = this.$playground.height();this.game_map = new GameMap(this);  // 创建游戏画面this.resize();  // 界面打开后需要resize一次，需要将game_map也resizethis.players = [];  // 所有玩家this.players.push(new Player(this, this.width / 2 / this.scale, 0.5, 0.05, 'white', 0.15, true));  // 创建自己// 创建敌人for (let i = 0; i < 8; i++) {this.players.push(new Player(this, this.width / 2 / this.scale, 0.5, 0.05, this.get_random_color(), 0.15, false));}}// 关闭playground界面hide() {this.$playground.hide();}
}

然后我们修改 Player 类，将所有绝对变量替换为相对变量：

class Player extends AcGameObject {constructor(playground, x, y, radius, color, speed, is_me) {...this.eps = 0.01;  // 误差小于0.01认为是0...}start() {if (this.is_me) {this.add_listening_events();} else {// Math.random()返回一个0~1之间的数，随机初始化AI的位置let tx = Math.random() * this.playground.width / this.playground.scale;let ty = Math.random() * this.playground.height / this.playground.scale;this.move_to(tx, ty);}}add_listening_events() {let outer = this;this.playground.game_map.$canvas.on('contextmenu', function() {return false;});  // 取消右键的菜单功能this.playground.game_map.$canvas.mousedown(function(e) {const rect = outer.ctx.canvas.getBoundingClientRect();if (e.which === 3) {  // 1表示左键，2表示滚轮，3表示右键outer.move_to((e.clientX - rect.left) / outer.playground.scale, (e.clientY - rect.top) / outer.playground.scale);  // e.clientX/Y为鼠标点 击坐标} else if (e.which === 1) {if (outer.cur_skill === 'fireball') {outer.shoot_fireball((e.clientX - rect.left) / outer.playground.scale, (e.clientY - rect.top) / outer.playground.scale);}outer.cur_skill = null;  // 释放完一次技能后还原}});$(window).keydown(function(e) {if (e.which === 81) {  // Q键outer.cur_skill = 'fireball';return false;}});}// 计算两点之间的欧几里得距离get_dist(x1, y1, x2, y2) {...}// 向(tx, ty)位置发射火球shoot_fireball(tx, ty) {...}move_to(tx, ty) {...}is_attacked(theta, damage) {  // 被攻击到...}// 更新移动update_move() {this.spent_time += this.timedelta / 1000;// AI敌人随机向玩家射击，游戏刚开始前三秒AI不能射击if (this.spent_time > 3 && !this.is_me && Math.random() < 1 / 360.0) {let player = this.playground.players[0];this.shoot_fireball(player.x, player.y);}if (this.damage_speed > this.eps) {  // 有击退效果时玩家无法移动this.vx = this.vy = 0;this.move_length = 0;this.x += this.damage_vx * this.damage_speed * this.timedelta / 1000;this.y += this.damage_vy * this.damage_speed * this.timedelta / 1000;this.damage_speed *= this.friction;} else {if (this.move_length < this.eps) {this.move_length = 0;this.vx = this.vy = 0;if (!this.is_me) {  // AI敌人不能停下来let tx = Math.random() * this.playground.width / this.playground.scale;let ty = Math.random() * this.playground.height / this.playground.scale;this.move_to(tx, ty);}} else {// 计算真实移动距离，与一帧的移动距离取min防止移出界let true_move = Math.min(this.move_length, this.speed * this.timedelta / 1000);this.x += this.vx * true_move;this.y += this.vy * true_move;this.move_length -= true_move;}}}update() {this.update_move();this.render();}render() {let scale = this.playground.scale;  // 要将相对值恢复成绝对值if (this.is_me) {this.ctx.save();this.ctx.beginPath();this.ctx.arc(this.x * scale, this.y * scale, this.radius * scale, 0, Math.PI * 2, false);this.ctx.stroke();this.ctx.clip();this.ctx.drawImage(this.img, (this.x - this.radius) * scale, (this.y - this.radius) * scale, this.radius * 2 * scale, this.radius * 2 * scale);this.ctx.restore();} else {  // AIthis.ctx.beginPath();// 角度从0画到2PI，是否逆时针为falsethis.ctx.arc(this.x * scale, this.y * scale, this.radius * scale, 0, Math.PI * 2, false);this.ctx.fillStyle = this.color;this.ctx.fill();}}
}

然后修改 FireBall 类，只需要修改 eps 以及 render 函数即可：

class FireBall extends AcGameObject {// 火球需要标记是哪个玩家发射的，且射出后的速度方向与大小是固定的，射程为move_lengthconstructor(playground, player, x, y, radius, vx, vy, color, speed, move_length, damage) {...this.eps = 0.01;}start() {}update() {...}get_dist(x1, y1, x2, y2) {...}is_collision(player) {...}attack(player) {...}render() {let scale = this.playground.scale;this.ctx.beginPath();this.ctx.arc(this.x * scale, this.y * scale, this.radius * scale, 0, Math.PI * 2, false);this.ctx.fillStyle = this.color;this.ctx.fill();}
}

最后修改 Particle 类，同样也是只需要修改 eps 以及 render 函数即可：

class Particle extends AcGameObject {constructor(playground, x, y, radius, vx, vy, color, speed, move_length) {...this.eps = 0.01;this.friction = 0.9;}start() {}update() {...}render() {let scale = this.playground.scale;this.ctx.beginPath();this.ctx.arc(this.x * scale, this.y * scale, this.radius * scale, 0, Math.PI * 2, false);this.ctx.fillStyle = this.color;this.ctx.fill();}
}

2. 增加联机对战模式

我们先修改 AcGameMenu 类，实现多人模式按钮的逻辑：

class AcGameMenu {constructor(root) {  // root用来传AcGame对象...}start() {this.hide();this.add_listening_events();}// 给按钮绑定监听函数add_listening_events() {let outer = this;// 注意在function中调用this指的是function本身，因此需要先将外面的this存起来this.$single.click(function() {outer.hide();  // 关闭menu界面outer.root.playground.show('single mode');  // 显示playground界面，加入参数用于区分});this.$multi.click(function() {outer.hide();outer.root.playground.show('multi mode');  // 多人模式});this.$settings.click(function() {outer.root.settings.logout_on_remote();});}// 显示menu界面show() {this.$menu.show();}// 关闭menu界面hide() {this.$menu.hide();}
}

然后修改 AcGamePlayground 类，区分两种模式，且需要进一步区分玩家类别，之前使用 True/False 表示是否是玩家本人，现在可以用字符串区分玩家本人、其他玩家以及人机：

class AcGamePlayground {constructor(root) {...}get_random_color() {...}start() {...}// 将长宽比调整为16:9resize() {...}// 显示playground界面show(mode) {this.$playground.show();// 将界面的宽高先存下来this.width = this.$playground.width();this.height = this.$playground.height();this.game_map = new GameMap(this);  // 创建游戏画面this.resize();  // 界面打开后需要resize一次，需要将game_map也resizethis.players = [];  // 所有玩家this.players.push(new Player(this, this.width / 2 / this.scale, 0.5, 0.05, 'white', 0.15, 'me', this.root.settings.username, this.root.settings.avatar));  // 创建自己，自己的用户名和头像从settings中获得// 单人模式下创建AI敌人if (mode === 'single mode'){for (let i = 0; i < 8; i++) {this.players.push(new Player(this, this.width / 2 / this.scale, 0.5, 0.05, this.get_random_color(), 0.15, 'robot'));}} else if (mode === 'multi mode') {}}// 关闭playground界面hide() {this.$playground.hide();}
}

然后还需要修改一下 Player 类，将原本的 this.is_me 判断进行修改：

class Player extends AcGameObject {constructor(playground, x, y, radius, color, speed, character, username, avatar) {...this.character = character;this.username = username;this.avatar = avatar;...if (this.character !== 'robot') {  // 只有AI不用渲染图片this.img = new Image();this.img.src = this.avatar;}}start() {if (this.character === 'me') {  // 只给自己添加监听函数this.add_listening_events();} else {...}}add_listening_events() {...}// 计算两点之间的欧几里得距离get_dist(x1, y1, x2, y2) {...}// 向(tx, ty)位置发射火球shoot_fireball(tx, ty) {...}move_to(tx, ty) {...}is_attacked(theta, damage) {  // 被攻击到...}// 更新移动update_move() {this.spent_time += this.timedelta / 1000;// AI敌人随机向玩家射击，游戏刚开始前三秒AI不能射击if (this.character === 'robot' && this.spent_time > 3 && Math.random() < 1 / 360.0) {...}if (this.damage_speed > this.eps) {  // 有击退效果时玩家无法移动...} else {if (this.move_length < this.eps) {...if (this.character === 'robot') {  // AI敌人不能停下来...}} else {// 计算真实移动距离，与一帧的移动距离取min防止移出界...}}}update() {this.update_move();this.render();}render() {let scale = this.playground.scale;  // 要将相对值恢复成绝对值if (this.character !== 'robot') {...} else {  // AI...}}
}

3. 配置Django Channels

假设有三名玩家编号为1、2、3进行多人游戏，那么每个玩家都有自己的一个窗口，且窗口中都能看到三名玩家。如果当前玩家1、2在进行游戏，3加入了游戏，那么需要告诉1、2两名玩家3来了，且还要告诉3当前已经有玩家1、2了。

要实现这一点，可以通过一个中心服务器（可以就是自己租的云服务器），即3向服务器发送他来了，服务器给1、2发送消息，且服务器给3发送消息说之前已经有1、2两名玩家了。因此服务器中需要存储每个地图中的玩家信息，用于完成第一个同步事件：生成玩家事件。

我们之后一共需要实现四个同步函数：create_player、move_to、shoot_fireball、attack。前三个函数顾名思义，最后的 attack 函数是因为服务器存在延迟，比如3发射一个火球在本地看打中了1，但是由于延迟在1那边可能是没被打中的。

攻击判断是一个权衡问题，一般的游戏都是选择在本地进行攻击判断，而不是云服务器，即以发起攻击的玩家窗口进行判断，如果击中了则通过 attack 函数在服务器上广播信息。

在此之前我们使用的是 HTTP 协议，该协议为单向的，即客户端需要先向服务器请求信息后服务器才会返回信息，而服务器是不会主动向客户端发送信息的。

因此此处我们需要使用 WebSocket 协议（WS），同理该协议也有对应的加密协议 WSS，Django Channels 即为 Django 支持 WSS 协议的一种实现方式。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/60956.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

30 - 个人博客项目-01-配置环境

30 - 个人博客项目-01-配置环境

(1). 安装第三方库 pip install flask2.3.2 -i https://pypi.tuna.tsinghua.edu.cn/simple/ pip install pymysql -i https://pypi.tuna.tsinghua.edu.cn/simple/ pip3 install jinja23.1.2 -i https://pypi.tuna.tsinghua.edu.cn/simple/ pip install flask-script2.0.5 -i h…
阅读更多...
《Kubernets证书篇：kubernetes1.24.17证书修改时间限制》

《Kubernets证书篇：kubernetes1.24.17证书修改时间限制》

一、背景 Kubernetes 默认的证书有效期只有1年，因此需要每年手动更新一次节点上面的证书，特别麻烦而且更新过程中可能会出现问题，因此我们要对 Kubernetes 的 SSL 证书有效期进行修改，这里将证书的时间限制修改为100年。 环境信息如下： 操作系统内核版本K8S版本Ubuntu 20.…
阅读更多...
含纽扣电池的产品出口澳洲需要做哪些认证？认证标准是什么？

含纽扣电池的产品出口澳洲需要做哪些认证？认证标准是什么？

澳大利亚含纽扣电池产品新规 01纽扣电池安全问题<<<< 在澳大利亚&#xff0c;已有儿童因为误食纽扣电池而导致死亡&#xff0c;且每月至少有一名儿童因吞咽或插入纽扣/硬币电池而严重受伤&#xff0c;导致其中一些儿童永久性损伤&#xff0c;而全世界数以百万计的…
阅读更多...
5分钟快速搭建！这款颜值爆表的数据可视化工具，你值得拥有！

5分钟快速搭建！这款颜值爆表的数据可视化工具，你值得拥有！

最好的数据可视化工具是什么&#xff1f; 没有最好&#xff0c;只有最适合的。不过&#xff0c;想要找一个优秀的数据可视化工具&#xff0c;可以从下面几点进行评估&#xff1a; &#xff08;1&#xff09;易用性&#xff1a; 直观的界面可以帮助新手快速上手&#xff0c;并…
阅读更多...
kafka--技术文档--架构体系

kafka--技术文档--架构体系

架构体系 Kafka的架构体系包括以下几个部分&#xff1a; Producer. 消息生产者&#xff0c;就是向Kafka broker发送消息的客户端。Broker. 一台Kafka服务器就是一个Broker。一个集群由多个Broker组成。一个Broker可以容纳多个Topic。Topic. 可以理解为一个队列&#xff0c;一…
阅读更多...
CRM客户关系管理系统是什么？好用不？

CRM客户关系管理系统是什么？好用不？

阅读更多...
200. 岛屿数量

200. 岛屿数量

200. 岛屿数量 class Solution { public:vector<vector<char>> g;int dx[4] {-1, 0, 1, 0}, dy[4] {0, 1, 0, -1};int numIslands(vector<vector<char>>& grid) {g grid;int cnt 0;for (int i 0; i < g.size(); i )for (int j 0; j <…
阅读更多...
JVM垃圾回收算法和CMS垃圾收集器

JVM垃圾回收算法和CMS垃圾收集器

目录 判断一个对象是否死亡&#xff1f; 1、引用计数法 2、可达性分析算法 三色标记 垃圾收集算法 1、分代收集理论 2、垃圾回收算法 标记-清除 标记-复制 标记-整理 CMS&#xff08;Concurrent Mark Sweep&#xff09;收集器 CMS垃圾收集器步骤 CMS垃圾收集器优…
阅读更多...
Servlet简介

Servlet简介

一、servlet介绍 1、概念 servlet是一个运行在服务器端的小程序&#xff0c;也是一个接口&#xff0c;介绍了Java类被tomcat识别的规则。 2、servlet的创建和使用 &#xff08;1&#xff09;创建一个JavaEE项目 &#xff08;2&#xff09;定义一个类&#xff0c;实现servlet…
阅读更多...
为Android做一个ShowModal窗口

为Android做一个ShowModal窗口

大家知道&#xff0c;用Delphi实现一个Form&#xff0c;并用ShowModal显示出来&#xff0c;在Android平台是非阻塞的&#xff0c;即执行了Form.ShowModal&#xff0c;代码会继续往下执行而不是等待&#xff0c;这跟在Windows平台是完全不一样的。如果我们需要类似阻塞的效果&am…
阅读更多...
Vue3 ElementPlus el-cascader级联选择器动态加载数据

Vue3 ElementPlus el-cascader级联选择器动态加载数据

参考了这位的大佬的写法 element el-cascader动态加载数据 &#xff08;多级联动&#xff0c;落地实现&#xff09;_el-cascader 动态加载_林邵晨的博客-CSDN博客 <el-cascader style"width: 300px" :props"address" v-model"addressValue" …
阅读更多...
Redis 主从复制和哨兵模式

Redis 主从复制和哨兵模式

一、概念 主从复制&#xff0c;是指将一台 Redis 服务器的数据&#xff0c;复制到其他的 Redis 服务器。前者称为主节点&#xff08;master/leader&#xff09;&#xff0c;后者称为从节点&#xff08;slave/follower&#xff09;。数据的复制是单向的&#xff0c;只能由主节点…
阅读更多...
【Vue2.0源码学习】生命周期篇-初始化阶段(initEvents)

【Vue2.0源码学习】生命周期篇-初始化阶段(initEvents)

文章目录 1. 前言2. 解析事件3. initEvents函数分析4. 总结 1. 前言 本篇文章介绍生命周期初始化阶段所调用的第二个初始化函数——initEvents。从函数名字上来看&#xff0c;这个初始化函数是初始化实例的事件系统。我们知道&#xff0c;在Vue中&#xff0c;当我们在父组件中…
阅读更多...
AUTOSAR开发工具DaVinci Configurator里的Modules

AUTOSAR开发工具DaVinci Configurator里的Modules

DaVinci Configurator 里面有个Module这个概念。 如你所想&#xff0c;基本上跟AUTOSAR架构里面的Module相对应 从软件的Project菜单中的Basic Editor项可以打开 打开这个菜单后&#xff0c;会看到很多Modules项以及其相关配置项 这个Basic Editor显示出整个ECU配置中的所有…
阅读更多...
代码题: 看代码说结果, 事件循环 + async 函数的

代码题: 看代码说结果, 事件循环 + async 函数的

1. 基本的 async/await 和事件循环 console.log(1);async function asyncFunc() {console.log(2);await Promise.resolve();console.log(3); }asyncFunc();console.log(4);执行顺序&#xff1a; 打印 1定义异步函数 asyncFunc&#xff0c;但并不执行它。调用 asyncFunc()。 打…
阅读更多...
Python中的迭代器与生成器

Python中的迭代器与生成器

文章目录 1、迭代器2、生成器3、列表推导式和生成器表达式4、enumerate() 在Python中&#xff0c;迭代器&#xff08;Iterator&#xff09;和生成器&#xff08;Generator&#xff09;是两种用于处理可迭代对象的重要工具。而可迭代对象包括列表&#xff0c;元组&#xff0c;字…
阅读更多...
C#里Bitmap转Halocn的HObject

C#里Bitmap转Halocn的HObject

一般情况下&#xff0c;图像的width是4的倍数的话&#xff0c;用以下代码便可将彩色bitmap转出halcon里的HObject public void Bitmap2HObject(Bitmap bmp, out HObject image){try{Rectangle rect new Rectangle(0, 0, bmp.Width, bmp.Height);BitmapData srcBmpData bmp.L…
阅读更多...
day-06 多进程服务器端 -- 进程间通信

day-06 多进程服务器端 -- 进程间通信

一.多进程服务器端 &#xff08;一&#xff09;进程概念及应用 利用之前学习到的内容&#xff0c;我们的服务器可以按照顺序处理多个客户端的服务请求。在客户端和服务时间增长的情况下&#xff0c;服务器就不足以满足需求了。 1.两种类型的服务器端 &#xff08;1&#xff…
阅读更多...
记录--解决前端内存泄漏：问题概览与实用解决方案

记录--解决前端内存泄漏：问题概览与实用解决方案

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 内存泄漏是前端开发中的一个常见问题&#xff0c;可能导致项目变得缓慢、不稳定甚至崩溃。在本文中&#xff0c;我们将深入探讨在JavaScript、Vue和React项目中可能导致内存泄漏的情况&#xff0c;并提…
阅读更多...
xml和json互转工具类

xml和json互转工具类

分享一个json与xml互转的工具类&#xff0c;非常好用 一、maven依赖 <!-->json 和 xm 互转</!--><dependency><groupId>org.dom4j</groupId><artifactId>dom4j</artifactId><version>2.1.3</version></dependency&g…
阅读更多...
最新文章

Copyright @ 2022~2023