Home/ Questions/Q 8492799
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T22:49:41+00:00

<!doctype html> <html> <head> <script src=http://localhost:8000/socket.io/socket.io.js></script> <script src=http://code.jquery.com/jquery-1.6.2.min.js></script> <script> var name=”; var socket =

  • 0
<!doctype html>
<html>
<head>
    <script  src="http://localhost:8000/socket.io/socket.io.js"></script>
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script>
        var name='';                
        var socket = io.connect('http://localhost:8000');
        $(document).ready(function() {
            //var app = require('http').createServer(handler),
            //io = require('socket.io').listen(app);
            //app.listen(8000);

            //var url = 'http://localhost:8000';
            //var socket = io.connect(url);

            //socket.connect();
            //socket.on('movement', function() {socket.send();
            //console.log('Connected!');});

            while (name == '') { name = prompt("What's your name?",""); }

               var left =5;
               var top = 5;
               var width =20;
               var height =20;

               var rcolor= get_random_color();   
               var ctx = $('#cgame')[0].getContext("2d");
               ctx.fillStyle = rcolor;         
               ctx.fillRect(left, top, width, height);
               ctx.lineWidth = 10;
            $(document).keydown(onkeydown);
            socket.emit('movement',  function onkeydown(left,top, width, height)
            {
            var kycode;

                if (evt!= null)
                {
                kycode = evt.keyCode;
                ctx = $('#cgame')[0].getContext("2d");      
                switch(kycode)
                            {
                    case 37: //left
                        if(left >> ctx.left){
                        call: clear();
                        left--;
                        call:draw();
                        //alert("Hi left");
                        break;
                        }
                    case 38: //up
                        if(top >> ctx.top)
                        {
                        call: clear();
                        top--;
                        call:draw();
                        //alert("Hi Up");
                        break;
                        }
                            case 39://right
                        if((left+width)  << (ctx.width+ctx.left) )
                        {
                        call: clear();
                        left++;
                        call:draw();
                        //alert("Hi right");
                        break;
                        }
                    case 40:
                        {
                        call: clear();
                        top++;
                        call:draw();
                        //alert("Hi down");
                        break;
                        }
                            Default:
                        {
                        alert("Hi");
                        break;
                        }
                    }       
                }

            }
            ); 

            function get_random_color() 
            {
                var letters = '0123456789ABCDEF'.split('');
            var color = '#';
            for (var i = 0; i < 6; i++ ) 
            {
            color += letters[Math.round(Math.random() * 15)];
            }
                return color;
            }

            function clear()
            {   
            ctx.width = ctx.width;
            ctx.height = ctx.height;
            ctx = $('#cgame')[0].getContext("2d");
            ctx.clearRect(0,0,cgame.width,cgame.height);
            }

            function draw()
            {   
                ctx.width = ctx.width;
            ctx.height = ctx.height;
            ctx = $('#cgame')[0].getContext("2d");
            ctx.fillRect(left, top, width, height);
                }

            socket.emit('register', name );

            $('#Name').hide(); 
            $('#Game').hide();  
            $('#start').hide(); 
            });
            </script>
        </head>
        <body>
            <label id="Game">Welcome to Node JS Gaming</label>
            <input type='text'  id ='Name'>
            <input type='button' id="start" value= 'login' Onclick="welcome()" >
            <div>
                <canvas id= "cgame" style="border:1px solid #000000; width: 100%; height: 100%;"; onkeydown ="onkeydown"></canvas>
            </div>
        </body>
    </html>

Attempted socket code:

var io = require('socket.io').listen(8000);
io.sockets.on('connection', function (socket)
{
socket.on('movement',function(left,top, width, height){});
socket.broadcast.emit('movement', {

      });
   });

}
);

//io.sockets.emit();

I have to pass the left top width and height values to the server so that the value is reflected on another client. Say for example, two clients are Chrome and Mozilla, whenever a user presses up, down, left or right the corresponding rectangle has to be moved. Similarly it should happen for other users as well.

I don’t know how to pass the values. Sorry for being so naive; I am a beginner in node.js.

Please let me know what the appropriate code is for the server side.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Please see this question regarding a game that is very similar to what you are trying to achieve

    EDIT: Just realised that that question omits the actual multiplayer section. My implementation of that code was as follows (not full code, only the important bits)

    Client Side: 

    socket.on('message', function(msg) {
    msg = JSON.parse(msg);
    players[msg.player] = new Player(msg.name, msg.x, msg.y, msg.width, msg.height, msg.color); 
});

    In the Player class:

    draw : function(){
    context.fillStyle = this.color; // context is canvas.getContext('2d');
    context.fillRect(this.x, this.y, this.width, this.height);
}

    Now also on the client side you can have:

    function update() {
    context.clearRect(0, 0, 700, 300); // clearing the canvas (width = 700, height = 300)
    for( var player in players ) {
        players[player].draw();
    }
}
var FPS = 60;
setInterval(update, 1000/FPS);

    In my experience you’d be better off doing the actual moving of the players coordinates on the server side. So client presses Left -> sent via socket -> server adjusts players x to x-=1 and sends it back where it’s then drawn.

    Note that this is a crude version of the code required

    • 0