A multiplayer map with individual controllable points, the basis for a multiplayer game.
The example is at the link above, code below.
The big key is in the server side code:
actors[this.user.clientId]We have an array of actors with the clientId as the key. So simple and so powerful.
Client Side
var context;
var viewport = {
width: 500,
height: 400,
x: 0,
y: 0,
}
$(document).ready(function() {
context = $('#map')[0].getContext('2d');
$('#map').keydown(function(e) {
e.preventDefault();
switch(e.which) {
//left
case 37:
viewport.x -= 5;
now.updateActor(viewport.x, viewport.y);
break;
//right
case 39:
viewport.x += 5;
now.updateActor(viewport.x, viewport.y);
break;
//up
case 38:
viewport.y -= 5;
now.updateActor(viewport.x, viewport.y);
break;
//down
case 40:
viewport.y += 5;
now.updateActor(viewport.x, viewport.y);
break;
}
});
now.ready(function() {
now.updateActor(viewport.x, viewport.y);
});
});
now.drawActors = function(actors) {
context.clearRect(0, 0, 500, 400);
context.beginPath();
for(var i in actors) {
if(i == now.core.clientId) {
context.fillStyle = 'red';
context.fillRect(viewport.width / 2 + actors[i].x - viewport.x, viewport.height / 2 + actors[i].y - viewport.y, 5, 5);
for (var x = -actors[i].x % 40; x < 500; x += 40) {
context.moveTo(x, 0);
context.lineTo(x, 400);
}
for (var y = -actors[i].y % 40; y < 400; y += 40) {
context.moveTo(0, y);
context.lineTo(500, y);
}
context.strokeStyle = "#eee";
context.stroke();
} else {
context.fillStyle = 'black';
context.fillRect(viewport.width / 2 + actors[i].x - viewport.x, viewport.height / 2 + actors[i].y - viewport.y, 5, 5);
}
}
}
Server Side
var actors = [];
nowjs.on('connect', function() {
actors[this.user.clientId] = {x: 0, y: 0};
});
nowjs.on('disconnect', function() {
for(var i in actors) {
if(i == this.user.clientId) {
delete actors[i];
break;
}
}
});
everyone.now.updateActor = function(x, y) {
actors[this.user.clientId].x = x;
actors[this.user.clientId].y = y;
var toUpdate = {};
for(var i in actors) {
if(Math.abs(x - actors[i].x) < 310 && Math.abs(y - actors[i].y) < 210) {
toUpdate[i] = {x: actors[i].x, y: actors[i].y};
}
}
for(var i in toUpdate) {
nowjs.getClient(i, function(err) {
this.now.drawActors(toUpdate);
});
}
}
-----------------------------------
That is all well and good, but how do we jump into making this work?
Ok, in your now/examples/ folder create another folder called "map" or something like that.
Create one file called:
mp_server.js
and one called:
mp.html
Open the mp_server.js and paste in:
var fs = require('fs');
var server = require('http').createServer(function(req, response){
fs.readFile(__dirname+'/mp.html', function(err, data){
response.writeHead(200, {'Content-Type':'text/html'});
response.write(data);
response.end();
});
});
server.listen(8080);
var nowjs = require("now");
var everyone = nowjs.initialize(server);
var actors = [];
nowjs.on('connect', function() {
actors[this.user.clientId] = {x: 0, y: 0};
console.log("nowjs.on Connect");
});
nowjs.on('disconnect', function() {
for(var i in actors) {
if(i == this.user.clientId) {
delete actors[i];
console.log("nowjs.on disconnect: " + i);
break;
}
}
});
everyone.now.updateActor = function(x, y) {
actors[this.user.clientId].x = x;
actors[this.user.clientId].y = y;
var toUpdate = {};
for(var i in actors) {
if(Math.abs(x - actors[i].x) < 310 && Math.abs(y - actors[i].y) < 210) {
toUpdate[i] = {x: actors[i].x, y: actors[i].y};
}
}
for(var i in toUpdate) {
nowjs.getClient(i, function(err) {
this.now.drawActors(toUpdate);
});
}
}
Save and close, now open the mp.html and paste in:
<!DOCTYPE html>
<html lang="en">
<head>
<title>nowjs test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="/nowjs/now.js"></script>
<script>
var context;
var viewport = {
width: 500,
height: 400,
x: 0,
y: 0,
}
$(document).ready(function() {
context = $('#map')[0].getContext('2d');
$('#map').keydown(function(e) {
e.preventDefault();
switch(e.which) {
//left
case 37:
viewport.x -= 5;
now.updateActor(viewport.x, viewport.y);
break;
//right
case 39:
viewport.x += 5;
now.updateActor(viewport.x, viewport.y);
break;
//up
case 38:
viewport.y -= 5;
now.updateActor(viewport.x, viewport.y);
break;
//down
case 40:
viewport.y += 5;
now.updateActor(viewport.x, viewport.y);
break;
}
});
now.ready(function() {
now.updateActor(viewport.x, viewport.y);
});
});
now.drawActors = function(actors) {
context.clearRect(0, 0, 500, 400);
context.beginPath();
for(var i in actors) {
if(i == now.core.clientId) {
context.fillStyle = 'red';
context.fillRect(viewport.width / 2 + actors[i].x - viewport.x, viewport.height / 2 + actors[i].y - viewport.y, 5, 5);
for (var x = -actors[i].x % 40; x < 500; x += 40) {
context.moveTo(x, 0);
context.lineTo(x, 400);
}
for (var y = -actors[i].y % 40; y < 400; y += 40) {
context.moveTo(0, y);
context.lineTo(500, y);
}
context.strokeStyle = "#eee";
context.stroke();
} else {
context.fillStyle = 'black';
context.fillRect(viewport.width / 2 + actors[i].x - viewport.x, viewport.height / 2 + actors[i].y - viewport.y, 5, 5);
}
}
}
</script>
</head>
<body>
<canvas id='map' width='500' height='400' tabindex='1' style="border:solid 1px #000000;"></canvas>
</body>
</html>
Now just execute mp_server.js like you have done with the other nowjs examples. Then point multiple browsers to localhost:8080 or whatever your testing medium might be. You should have a fully working example of a multiplayer map. We are well on our way. Awesome.
