Перемещение рисунка в canvas по месту нажатия мыши в окне canvas...
Короче, новичок, пыхаюсь уже 2 дня, тут далее выложу то что есть.:help:
До меня изображение перемещалось с помощью клавиш wasd.:dance: Использую node.js socket.io express вроде всё. Может,что нибудь не так написал, и т.д. Не понимаю...:-? Буду благодарен любому комментарию по теме.:yes: Заранее спасибо за потраченное время!:thanks: То что наковеркал я: Это 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); |
Rise,
видимо харакири сделал. |
Rise,
возможно глюк связан с редактированием собственного сообщения, админ посмотрит, когда будет время. |
Часовой пояс GMT +3, время: 15:27. |