Explication détaillée d'un exemple d'implémentation d'un jeu d'avion multijoueur simple en html5

J'ai vu une application de salle de discussion multi-personnes il y a plus d'un an. Il s'agissait d'un didacticiel socket.io écrit par le professeur Zhang Dan (le lien d'origine ne peut pas être ouvert, j'ai donc posté une republication. J'ai trouvé que les sockets étaient très). magique. Plus tard, un projet au cours de ma période de troisième cycle utilisait également des sockets .Net. La communication entre plusieurs clients était également très intéressante. C'était aussi le moment où j'ai pleinement compris et appliqué des concepts tels que les événements, délégation, etc. Récemment, inspiré par l'enthousiasme pour l'étude de mapbox dans le groupe et par l'aide et l'inspiration de tous les membres de @开 Oncle, @老宇 @F3earth, j'ai soudainement pris le temps de créer un jeu de guerre d'avion basé sur mapbox gl js et socket .io! , bien que l'interface fonctionnelle soit très simple. De plus, le code est relativement primitif et n’a pas été correctement refactorisé. Mais j’ai fondamentalement un cadre, et je l’écris simplement et je l’analyse. Si vous êtes intéressé par le code source ou souhaitez participer aux travaux de développement et d'optimisation, veuillez visiter le dépôt git : Jqmap2

Architecture globale

Pour faire simple, l'idée de conception de l'ensemble du jeu est :

Le serveur surveille toute demande de connexion websocket envoyée par le client depuis le début. Une fois la connexion (événement de connexion) établie, le nom d'utilisateur, les coordonnées et la direction de l'avion actuel sont envoyés. par le client pour la première fois sont ajoutés au pool de données client en tant que client (actuellement, ils sont simplement traités comme des clientstableau). Ensuite, les données d'un client sont synchronisées avec le serveur.

À l'avenir, les coordonnées de l'avion, le cap et d'autres informations du client seront également envoyés régulièrement (socket.send) au serveur, afin que le serveur puisse diffuser à tous les autres clients en même temps. En fait, le serveur l'a clairement indiqué, c'est-à-dire qu'il est responsable du relais des messages, et le but est de maintenir cohérent le statut de l'avion du joueur dans le champ de vision de tous les clients.

Étant donné que websocket est une communication bidirectionnelle, le client doit également envoyer régulièrement des messages au serveur et, plus important encore, traiter divers messages (événements de message) envoyés par le serveur pour distinguer quels messages accueillent les utilisateurs en ligne. , des nouvelles ordinaires sur la synchronisation de la position du joueur ou des nouvelles selon lesquelles A a vaincu B.

Pendant ce processus, le front-end et le serveur maintiennent une connexion websocket et communiquent en permanence. Par rapport aux sondages traditionnels et aux sondages longs, cela permet d'économiser du trafic et des performances. D'une manière générale, la logique du jeu est basée sur divers événements de message. L'événement de connexion génère une connexion socket, et la connexion socket a des événements de message, etc.

Websocket backend

Après avoir dit tant de bêtises, examinons brièvement comment implémenter certains codes clés.

// Implémentation du processus clé back-end

var app = express(),
    server = require('http').createServer(app),
    io = require('socket.io').listen(server); // 引入socket.io 库
io.on('connection', function(socket) { // 开始监听客户端的websocket连接请求，connection事件产生 socket 对象
    socket.emit('open'); // 向该客户端发送open事件.
    // init client drone obj for each connection !!
    var client = {
        name: false,
        color: getColor(),
        direction: 0,
        coordinates: [0, 0]
    }
    // message from client.
    socket.on('message', function(msg) {
        if (!client.name && msg.name) { // 如果是第一次连接，把用户的名字存储起来，并且广播给所有客户端。
          var obj  = { }; // 构建发送给其他客户端的消息
          obj = msg;
          clients.push(client); // 加入后台维持的客户端数组
          socket.broadcast.emit('message', obj); // 广播欢迎语给其他客户端
        } else if ( client.name == msg.name ) { // 客户端发来的飞机状态消息
            // 广播给其他客户端
          socket.broadcast.emit('message', obj);
        }
    }
}

Le processus de traitement en arrière-plan est relativement simple, il vous suffit d'accepter le message envoyé par un client et de le transmettre. à d’autres clients (je ne parlerai pas des emplacements aléatoires des avions ennemis. Bien sûr, cela sera modifié plus tard afin que tous les clients partagent un ensemble d’informations sur les avions ennemis, afin qu’ils puissent combattre le même BOSS ensemble). Cependant, le front-end doit traiter les messages du serveur séparément en fonction des besoins de l'entreprise

Socket front-end et avionModèle

L'activité frontale est relativement complexe. En plus de traiter les messages Websocket, un ensemble de modèles de données d'avion doit être construit, y compris la position, la vitesse, l'orientation, le volume sanguin, les armes et l'équipement, etc. être très complexe, nous allons donc le traiter simplement pour l'instant).

var socket;
try {
    socket = io.connect("http://123.206.201.245:3002");
    socket.on('open', function(){  // 当服务端确认连接后，开始发送第一次数据。
        statusBar.innerText = "已经连上服务器..";
        var askName = prompt("来，取个名字", "");
    }
    socket.on("message", function(json) { // 其实收到的是js 对象，这一点很牛逼。因为双向通信过程中传递的是 Binary 形式的数据，不需要再次解析了。
      if (json.type === "welcome" && json.text.name) {
          // .. 显示其他用户登录消息
      } else if (json.type === "defeat") {
          // .. 在前端的敌机数据模型中移除空血槽的飞机
      } else if (drone && json.text.name != drone.name) {
          // .. 传来的其他客户端飞机消息
          featureCol.features.forEach(function(drone) {
          // featureCol 是所有敌机数据集合，根据用户名check是更新还是新增.
          }
      }
   }

D'autres problèmes incluent :

Les données de l'avion impliquent une modification à tout moment, un un téléchargement sur le serveur et un rendu. Le rendu utilise l'objet geojson comme données source dans l'API mapbox, est-il donc nécessaire de redessiner toutes les positions des avions dès que le message côté serveur est reçu ? Ici, la méthode setData() de la source est appelée régulièrement via setInterval pour implémenter le redessinage.

Le calcul de la trajectoire de la balle de l'avion implique la position et l'orientation de l'avion au moment où l'utilisateur appuie sur la barre d'espace. Une animation est réalisée en fonction du temps de vol de la balle défini pour afficher

La collision entre la balle et l'avion ennemi Détection et traitement simplifié : Fixez une constante comme volume de l'avion, et calculez la distance entre la balle et l'avion ennemi en temps réel pendant le vol de la balle. Lorsque la carte est à petite échelle, le rayon de détection est augmenté, et lorsque la carte est à grande échelle, le rayon de détection est réduit en conséquence.

Actuellement, il est possible que la quantité de calcul de détection de collision pendant le vol de la balle soit trop importante, provoquant des problèmes de décalage, une utilisation élevée du processeur et que l'application entière consomme environ 100 à 130 Mo de mémoire... Il y a beaucoup de petits problèmes que je ne mentionnerai pas. . Cela a vraiment demandé des cerveaux.

Choisissez un ou deux points à analyser, l'un est le processus de vol de la balle et l'autre est le contrôle du comportement aléatoire de l'avion robot ennemi

// setPostion is to update Mydrone position.
function setPosition() {
    // direction in Rad. Generally, 1 Rad stands for 100km
    var current_rotate = map.getBearing(); 
    if (!manual && Math.random() > 0.95) { // 这边有意思，在每秒50帧的情况下，不是每一帧都会随机微调飞机的方向。而是5%的概率。
        direction += (Math.random() - 0.5) /5;
    }    
    // 根据飞机朝向和速度更新位置。
    point.coordinates[0] += speed * Math.sin(direction) / 100;
    point.coordinates[1] += speed * Math.cos(direction) / 100;
    // 校正飞机的朝向显示。因为默认情况下mapbox是根据你的视角随时调整图标方向。但实际上飞机图标的朝向必须和飞机运行方向一致，而不是简单的和标注一样。
    current_rotate = (-current_rotate) + direction * (180 / Math.PI);
}

Ce qui suit est le calcul processus du vol de la balle.

// start: fire location, target: bullet destination, duration: total animation time
function renderBulvar(start, target, direction, duration) {
    // target is geojson POINT, add Temp point in layer.. 
    var interval = 20, ratio = interval/duration, real_point = start, range = 0.4, count = 0, hitted = false;
    if (target.coordinates) {
        var targetSource = map.getSource('drone-target');
        window.setInterval(function(){
            if (count > duration/interval) { // 到达终点，不计算了
            } else {
                // 子弹每一帧跑一定比例的路程，最终到达指定终点
                real_point.coordinates[0] += Math.sin(direction)*ratio*range;
                real_point.coordinates[1] += Math.cos(direction)*ratio*range;
                targetSource.setData(real_point);
                if (!hitted){
                    hitted = testCrash(real_point.coordinates); // 感觉这里的hitted 有问题.
                }
                count += 1;
            }
        }, interval);
    }

到这里其实基本介绍了这个游戏的制作过程，经历了一些不成熟的想法，总共花了近十个小时完成目前的开发。还没有严谨地考虑过代码结构和 函数复杂程序，特别是子弹飞行和碰撞等部分，碰撞到后就终结子弹飞行等等。各位如果感兴趣，愿意完成 To DO list中的事情或者有何建议，请访问git仓库: Jqmap2 。请各位大神多提修改意见！

喜欢的同学请关注、收藏相关专题，会不断更新文章。希望和大家分享！！

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费h5在线视频教程

3. php.cn原创html5视频教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!