html5로 간단한 멀티플레이어 비행기 게임을 구현한 예에 대한 자세한 설명

1년여 전 다자간 채팅방 어플을 봤는데 장단선생님이 쓰신 소켓.io 튜토리얼이더군요. 마법 같은. 나중에 대학원 시절에도 .Net 소켓을 사용한 프로젝트가 있었는데, 이벤트, 위임 등의 개념을 완벽하게 이해하고 적용할 수 있었던 시간이기도 했습니다. 최근 그룹 내에서 mapbox를 공부하려는 열정과 @开삼촌 @老宇 @F3earth 멤버 모두의 도움과 영감에 영감을 받아 갑자기 시간을 내어 mapbox gl js와 소켓을 기반으로 비행기 전쟁 게임을 만들었습니다. .io! , 기능적 인터페이스는 매우 간단하지만. 더욱이 코드는 상대적으로 원시적이며 제대로 리팩터링되지 않았습니다. 하지만 저는 기본적으로 프레임워크가 있고, 간단히 적어서 분석합니다. 소스코드에 관심이 있거나 개발 및 최적화 작업에 참여하고 싶다면 git 저장소를 방문해 주세요: Jqmap2

전체 아키텍처

간단히 말하면 ​​의 디자인 아이디어 전체 게임은 다음과 같습니다.

서버는 클라이언트가 보낸 웹소켓 연결 요청을 처음부터 모니터링합니다. 연결(연결 이벤트)이 설정된 후 사용자 이름, 현재 항공기의 좌표 및 방향이 전송됩니다. 클라이언트에 의해 처음으로 클라이언트 데이터 풀에 클라이언트로 추가됩니다. (현재는 단순히 클라이언트어레이로 처리됩니다.) 그런 다음 클라이언트의 데이터가 서버에 동기화됩니다.

향후에는 클라이언트의 항공기 좌표, 방향 및 기타 정보도 정기적으로(socket.send) 서버로 전송되어 서버가 다른 모든 클라이언트에게 동시에 방송할 수 있습니다. 실제로 서버는 메시지 전달을 담당한다는 점을 분명히 했으며, 그 목적은 모든 클라이언트의 시야에서 플레이어 항공기의 상태를 일관되게 유지하는 것입니다.

웹소켓은 양방향 통신이기 때문에 클라이언트도 정기적으로 서버에 메시지를 보내야 하며, 더 중요한 것은 서버에서 보내는 다양한 메시지(메시지 이벤트)를 처리하여 어떤 메시지가 온라인에서 사용자를 환영하는지 구별하는 것입니다. , 일반 플레이어 위치 동기화 소식 또는 A가 B를 이겼다는 소식입니다.

이 과정에서 프론트엔드와 서버는 웹소켓 연결을 유지하며 지속적으로 통신을 합니다. 기존 폴링 및 장기 폴링에 비해 트래픽과 성능이 절약됩니다. 일반적으로 게임의 로직은 다양한 메시지 이벤트를 기반으로 하며, 연결 이벤트는 소켓 연결을 생성하고, 소켓 연결에는 메시지 이벤트 등이 있습니다.

백엔드 웹소켓

말도 안되는 소리를 너무 많이 했으니 몇 가지 핵심 코드를 구현하는 방법을 간단히 살펴보겠습니다.

// 백엔드 핵심 프로세스 구현

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);
        }
    }
}

백그라운드 처리 프로세스는 비교적 간단합니다. 기본적으로 클라이언트의 메시지를 수락하고 다른 클라이언트에 전달하기만 하면 됩니다. 물론, 이후 단계에서는 모든 클라이언트가 적 항공기 정보 세트를 공유하여 동일한 BOSS와 싸울 수 있도록 변경됩니다. 단, 프런트엔드는 업무상 필요에 따라 서버에서 보내는 메시지를 별도로 처리해야 합니다

프런트엔드 소켓과 항공기모델

프론트 엔드 비즈니스는 웹 소켓 메시지 외에도 위치, 속도, 방향, 혈액량, 무기 및 장비 등을 포함한 일련의 항공기 데이터 모델을 구축해야 합니다. 매우 복잡하므로 지금은 간단하게 처리하겠습니다.)

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是更新还是新增.
          }
      }
   }

기타 문제는 다음과 같습니다.

항공기 데이터에는 언제든지 변경되는서버에 업로드 및 렌더링이 포함됩니다. 렌더링은 mapbox api의 소스 데이터로 geojson 객체를 사용하는데, 서버 측 메시지를 받자마자 모든 항공기 위치를 다시 그려야 하나요? 여기서는 소스의 setData() 메소드를 setInterval을 통해 정기적으로 호출하여 다시 그리기를 구현합니다.

항공기 총알의 궤적 계산에는 사용자가 스페이스바를 누르는 순간의 항공기 위치와 방향이 포함됩니다. 설정된 총알 비행 시간을 기준으로 애니메이션이 만들어져 표시됩니다

탄환과 적기의 충돌 감지 및 단순화 처리: 항공기의 부피를 상수로 설정하고, 총알이 비행하는 동안 실시간으로 총알과 적기 사이의 거리를 계산합니다. 지도가 작은 축척이면 감지 반경이 늘어나고, 지도가 큰 축척이면 감지 반경이 그에 따라 줄어듭니다.

현재 총알 비행 중 충돌 감지 계산량이 너무 커서 지연 문제가 발생하고 CPU 사용량이 높으며 전체 애플리케이션이 약 100~130Mb 정도의 메모리를 소비하는 것이 가능합니다... 제가 언급하지 않을 작은 문제들이 많이 있습니다. . 정말 두뇌가 필요했습니다.

분석할 점을 한두 개 선택하여 하나는 총알의 비행 과정이고 다른 하나는 로봇 적 항공기의 무작위 행동 제어입니다

// 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);
}

다음은 의 계산 과정입니다. 총알 비행.

// 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视频教程

위 내용은 html5로 간단한 멀티플레이어 비행기 게임을 구현한 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!