I currently have a NodeJS server setup that connects to my html5 canvas. The canvas displays the user as a number (given to them when they join) Not implemented a login yet. Now i am having a lot of trouble with the click to move event. As the numbers already appear on the canvas all i want do is have the canvas read where the click is on it and register it to the server allowing the player to move to that location. I can implement WASD but i want to use the click to move instead of WASD. All i can find over the internet is to display co-ordinates but not update the players location
[JavaScript]
var express = require('express');
var app = express();
var serv = require('http').Server(app);
app.get('/',function(req, res) {
res.sendFile(__dirname + '/client/index.html');
});
app.use('/client',express.static(__dirname + '/client'));
//Port to listen for client
serv.listen(2000);
console.log("Server Started");
var SOCKET_LIST = {};
var PLAYER_LIST = {};
var Player = function(id){
var self = {
// Character Starting
x:0,
y:0,
id:id,
number:"" + Math.floor(10 * Math.random())
}
return self;
}
var io = require('socket.io')(serv,{});
io.sockets.on('connection', function(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 PLAYER_LIST[socket.id];
});
});
setInterval(function(){
var pack = [];
for(var i in PLAYER_LIST){
var player = PLAYER_LIST[i];
player.x++;
player.y++;
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/30);
[HTML]
<canvas id="ctx" width="1500" height="900" style="border:1px solid #000000;"></canvas>
</center>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script>
var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '30px Arial';
var socket = io();
socket.on('newPositions',function(data){
ctx.clearRect(0,0,1500,900);
for(var i = 0 ; i < data.length; i++)
ctx.fillText(data[i].number,data[i].x,data[i].y);
});
</script>
via Jason Reynolds
No comments:
Post a Comment