Показать сообщение отдельно
  #1 (permalink)  
Старый 27.05.2020, 13:37
SorasLight
 
Сообщений: n/a

Перемещение рисунка в canvas по месту нажатия мыши в окне canvas...
Короче, новичок, пыхаюсь уже 2 дня, тут далее выложу то что есть.
До меня изображение перемещалось с помощью клавиш wasd.
Использую node.js socket.io express вроде всё.
Может,что нибудь не так написал, и т.д. Не понимаю...
Буду благодарен любому комментарию по теме.
Заранее спасибо за потраченное время!
То что наковеркал я:

Это server.js:

// Зависимости
let express = require('express');
let http = require('http');
let path = require('path');
let socketIO = require('socket.io');
let app = express();
let server = http.Server(app);
let io = socketIO(server);

app.set('port', 5000);
app.use('/static', express.static(__dirname + '/static'));

// Маршруты
app.get('/', function(request, response) {
    response.sendFile(path.join(__dirname, 'index.html'));
});

// Запуск сервера
server.listen(5000, function() {
    console.log('Запущен сервер, порт: 5000');
});
// Обработчик веб-сокетов


let players = {};
io.on('connection', function(socket) {
  console.log('Новенький присоединился');
	socket.on('new player', function() {
		players[socket.id] = {
		  x: 870,
		  y: 315
		};
  });
  socket.on('movement', function() {
    console.log('Двигаюсь');
    let player = players[socket.id] || {};
    if (data.a) {
      player.x = data.xpos;
      player.y = data.ypos;
    }
  })
});

io.on('connection', function(socket) {
  socket.on('disconnect', function() {
    console.log('Пользователь вышел');
    // удаляем отключившегося игрока
      players[socket.id] = {
        x: -1000,
        y: -1000
      };
  });
});

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


Это game.js:

let socketio = io();

// Отслеживание координаты мыши

function init() {
    if (document.layers) document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = mousemove;
}
function mousemove(event) {
    let mouse_x = mouse_y = 0;
    if (document.attachEvent != null) {
        mouse_x = window.event.clientX;
        mouse_y = window.event.clientY;
    } else if (!document.attachEvent && document.addEventListener) {
        mouse_x = event.clientX;
        mouse_y = event.clientY;
    }
    status = "x = " + mouse_x + ", y = " + mouse_y;
    document.getElementById('xy').innerHTML = status;
}
init()

// движение

let movement = {
	a: false,
	xpos: mousemove(mouse_x),
	ypos: mousemove(mouse_y)
}

document.addEventListener('mousedown', function() {
  		movement.a = true;
  		console.log('Мышкой нажал');
});
document.addEventListener('mouseup', function() {
  		movement.a = false;
  		console.log('Отпустил');
});

// Canvas

let canvas = document.getElementById('canvas');
canvas.width = 1754;
canvas.height = 1240;
let context = canvas.getContext('2d');
socketio.on('state', function(players) {
	context.clearRect(0, 0, 1754, 1240);
    context.fillStyle = 'black';
  for (var id in players) {
    var player = players[id];
    context.beginPath();
    context.arc(player.x, player.y, 15, 0, 2 * Math.PI);
    context.fill();
  }
  context.fillStyle = 'red';
  for (var id in players) {
    var player = players[id];
    context.beginPath();
    context.arc(player.x + 0.15, player.y, 13, 0, 2 * Math.PI);
    context.fill();
  }
});

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

Последний раз редактировалось SorasLight, 27.05.2020 в 15:10. Причина: Поменять картинку и убрать лишний текст
Ответить с цитированием