0

I have problem with moving the numbers with arrows, as you see i want to make a multiplayer application so 2 users can move there numbers across the canvas. I have no clue why my numbers are not moving. Something is wrong with the keydown and keyup function. But i cant find the problem

// Server.js ´

    var express = require('express');

    var app = express();
    var server = app.listen(3000);

    app.use(express.static('public'));
    console.log("server started!");

    var socket = require('socket.io');

    var io = socket(server);

    io.sockets.on('connection', newConnection);


    // Skapar en lista för alla som är connectade till servern
    var SOCKET_LIST = {};
    var PLAYER_LIST = {};

    var Player = function(id){
var self = {
    x:250,
    y:250,
    id:id,
    number:"" + Math.floor(10 * Math.random()),
    pressingRight:false,
    pressingLeft:false,
    pressingUp:false,
    pressingDown:false,
    maxSpd:10,
}
self.updatePosition = function(){
    if(self.pressingRight)
        self.x += self.maxSpd;
    if(self.pressingLeft)
        self.x += self.maxSpd;
    if(self.pressingUp)
        self.y += self.maxSpd;
    if(self.pressingDown)
        self.y += self.maxSpd;
}
return self;
    }

    // Skapar functionen så att man kan connecta till hemsidan via sockets

    function newConnection(socket){

socket.id = Math.random();
SOCKET_LIST[socket.id] = socket;

var player = Player(socket.id);
PLAYER_LIST[socket.id] = player;

socket.on('disconnect', function(){
    delete SOCKET_LIST[socket.id];
    delete PLAYER_LIST[socket.id];

});

socket.on('keyPress', function(data){
    if(data.inputId === 'left')
        player.pressingLeft = data.state;
    else if (data.inputId === 'right')
        player.pressingRight = data.state;
    else if (data.inputId === 'up')
        player.pressingUp = data.state;
    else if (data.inputId === 'down')
        player.pressingDown = data.state;
});

console.log('Socket:' + socket.id + ' connected');

      }


    // Skapar en loop som 
    setInterval(function(){
var pack = [];

for (var i in PLAYER_LIST){
    var player = PLAYER_LIST[i];

    player.updatePosition();
    pack.push({
    x:player.x,
    y:player.y,
    number:player.number
    });     
}

for (var i in SOCKET_LIST){
    var socket = SOCKET_LIST[i];
    socket.emit('newPositions',pack);

}



    }, 1000/25);

´

index.html(client) ´

    <html>
    <head>
<title>monsta</title>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>


 <style>

     </style>
      </head>
      <body>

    <canvas id="ctx" width="500" height="500" style="border: 1px solid black"> </canvas>




    <script type="text/javascript">
    var ctx = document.getElementById("ctx").getContext("2d");
    ctx.font = '30px';


    var socket;
    socket = io.connect("http://192.168.1.73:3000");



    socket.on('newPositions', function(data){
        ctx.clearRect(0,0,500,500);
        for (var i = 0 ; i < data.length; i++)
            ctx.fillText(data[i].number,data[i].x,data[i].y);


    });

    document.addEventListener("keydown", function(event){
        if(event.keyCode === 68) {
            socket.emit('keyPress', {inputId:'right', state:true});

        }
        else if(event.keyCode === 83){
            socket.emit('keyPress', {inputId:'down', state:true});
        }
        else if(event.keyCode === 65){
            socket.emit('keyPress', {inputId:'left', state:true});
        }
        else if(event.keyCode === 87){
            socket.emit('keyPress', {inputId:'up', state:true});
        }
    });

    document.addEventListener("keyup",function(event){
        if(event.keyCode === 68){
            socket.emit('keyPress', {inputId:'right', state:false});
        }
        else if(event.keyCode === 83){
            socket.emit('keyPress', {inputId:'down', state:false});
        }
        else if(event.keyCode === 65){
            socket.emit('keyPress', {inputId:'left', state:false});
        }
        else if(event.keyCode === 87){
            socket.emit('keyPress', {inputId:'up', state:false});
        }
    });

</script>
    </body>
    </html>

´

Adam Fischer
  • 11
  • 5
  • Do you see the mesaage showing a new socket is connected? Is this from RainingChains tutorial? – Matei Adriel Feb 09 '19 at 19:12
  • 1
    @MateiAdriel yes i can see in the terminal that the sockets are connected i got new socket everytime new browser connects. Yes this is from his tutorial, i cant really see the problem. Everything is working find the only thing that i cant move the numbers. – Adam Fischer Feb 09 '19 at 20:07
  • Try loggin something to the console on the server when you get a new key pressed, and see if you see it – Matei Adriel Feb 09 '19 at 20:09
  • @MateiAdriel yeah i tried that when i pressed right arrow to get something to the console but nothing shows up. – Adam Fischer Feb 09 '19 at 20:11
  • Now try logging it in the client console.. if it shows up there, it means the message doesnt get to the server... also, i hope you know you dont need to press on the arrows, you need to press wasd – Matei Adriel Feb 09 '19 at 20:13
  • @MateiAdriel i fixed it now, but i have an another problem right now, my left goes to right and my up goes down and right and down is working fine – Adam Fischer Feb 09 '19 at 20:23
  • In self.updatePosition, u have += at all of them. Change the secind and the 2rd to -= – Matei Adriel Feb 09 '19 at 20:29
  • @MateiAdriel yes i did it minute before you write haha! Thanks for you help! – Adam Fischer Feb 09 '19 at 20:30
  • No problem, i watched that tutorial limk a year ago, and now im much more advanced with node, so im happy to help – Matei Adriel Feb 09 '19 at 20:31

0 Answers0