时间戳

首页 > 解决方案 > 如何让敌人看起来与英雄画布不同 socket.io

javascript - 如何让敌人看起来与英雄画布不同 socket.io

问题描述

您好我正在尝试创建一个 Node.JS Socket.io Express 浏览器游戏。我已经准备好了基础知识，比如当我们加入本地主机时创建一个新的播放器实例并使播放器正确移动。播放器的屏幕是画布的全部部分（您总是可以看到所有内容），并且有边框阻止您逃跑。

问题是每当用户生成时，它们都会呈现为绿色。我想让用户在控制用户的人看来是绿色的。我想让其他所有人都变成红色以表明他们是敌人。

因此，连接到游戏的人必须是绿色的，其他人必须是红色的。（几乎像diep.io）。我确实建议您检查该游戏，因为它正是我正在寻找的。

如果您想知道，这里是代码（有点乱）

服务器端（server.js）：

// Dependencies.
var express = require('express');
var http = require('http');
var path = require('path');
var socketIO = require('socket.io');
//
var app = express();
var server = http.Server(app);
var io = socketIO(server);
app.set('port', 5000);
app.use('/static', express.static(__dirname + '/static'));

// Routing
app.get('/', function (request, response) {
  response.sendFile(path.join(__dirname, 'index.html'));
});

server.listen(5000, '0.0.0.0', function () {
  console.log('Starting server on port 5000');
});

//Interesting stuff
var players = {};
io.on('connection', function (socket) {
  socket.on('new player', function () {
    players[socket.id] = {
      x: 300,
      y: 300
    };
  });
  socket.on('movement', function (data) {
    var player = players[socket.id] || {};
    if (data.left && player.x >= 25) {
      player.x -= 5;
    }
    if (data.up && player.y >= 25) {
      player.y -= 5;
    }
    if (data.right && player.x <= 775) {
      player.x += 5;
    }
    if (data.down && player.y <= 575) {
      player.y += 5;
    }
  });
  socket.on('disconnect', function () {
    players[socket.id] = {}
  })
});

setInterval(function () {
  io.sockets.emit('state', players);
}, 1000 / 60);

客户端（game.js）：

var socket = io();

var movement = {
  up: false,
  down: false,
  left: false,
  right: false
}
document.addEventListener('keydown', function (event) {
  switch (event.keyCode) {
    case 65: // A
      movement.left = true;
      break;
    case 87: // W
      movement.up = true;
      break;
    case 68: // D
      movement.right = true;
      break;
    case 83: // S
      movement.down = true;
      break;
  }
});
document.addEventListener('keyup', function (event) {
  switch (event.keyCode) {
    case 65: // A
      movement.left = false;
      break;
    case 87: // W
      movement.up = false;
      break;
    case 68: // D
      movement.right = false;
      break;
    case 83: // S
      movement.down = false;
      break;
  }
});

socket.emit('new player');
setInterval(function () {
  socket.emit('movement', movement);
}, 1000 / 60);

var canvas = document.getElementById('canvas');
socket.emit('canvas', 800, 600);
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext('2d');
socket.on('state', function (players) {
  context.clearRect(0, 0, 800, 600);
  //Get yourself
  for (var id in players) {
    var yourself = players[socketid];
    context.fillStyle = 'green';
    context.beginPath();
    context.arc(yourself.x, yourself.y, 20, 0, 2 * Math.PI);
    context.fill();
  }
  //Get other players
  for (var id in players) {
    //Every player in the connection
    var player = players[id];
    //Draw each player on canvas
    context.fillStyle = 'red';
    context.beginPath();
    context.arc(player.x, player.y, 20, 0, 2 * Math.PI);
    context.fill();
  }

});

索引.html：

<html>
  <head>
    <title>A Multiplayer Game</title>
    <style>
      canvas {
        width: 800px;
        height: 600px;
        border: 5px solid black;
      }
    </style>
    <script src="/socket.io/socket.io.js"></script>
  </head>
  <body>
    <canvas id="canvas" oncontextmenu="return false"></canvas>
  </body>
  <script src="/static/game.js"></script>
</html>

工作区的视觉展示：

|-server.js
|-index.html
|-static
  |-game.js

（不显示由 Node.JS 创建的文件）

标签： javascriptnode.jsexpresscanvassocket.io

解决方案

基本上你想知道你的socket.id.

您可以在连接时获取您的套接字 ID：

let socket = io.connect('..'); 
socket.on('connect', () => {
    console.log(socket.id); // an alphanumeric id...
    //store the socket id
});

然后在您的state事件中，您可以只创建一个 if 子句：

socket.on('state', function (players) {
  context.clearRect(0, 0, 800, 600);

  //Get other players
  for (var id in players) {
    //Every player in the connection
    var player = players[id];
    //Draw each player on canvas
    context.fillStyle = (id === <your_stored_socket.id or socket.id>)?'green':'red';
    context.beginPath();
    context.arc(player.x, player.y, 20, 0, 2 * Math.PI);
    context.fill();
  }

});

这应该可以正常工作，有关如何在客户端获取套接字 ID 的其他详细信息，您可以在此处参考：如何在客户端获取连接的 socket.id？

推荐阅读