-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
226 lines (192 loc) · 9.33 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Socket.IO</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
margin: 4px;
color:#111;
font-size:14px;
font-family: 'Open Sans', Arial, sans-serif;
}
</style>
</head>
<body>
<p>A <a href="https://phaser.io/">phaser.io,</a> <a href="http://socket.io/">socket.io,</a> and <a href="https://nodejs.org/">node.js</a> with <a href="http://expressjs.com/">express</a> project by vez. Source code soon...</p>
<script src="socket.io/socket.io.js"></script>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
var socket = io(); //initialise socket connection
function preload() { //preload our images
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
var platforms; //these variables are explained inline
var player;
var cursors;
var userscount = 0;
var userText;
var login = ' ';
var loginText = '';
var buddys;
var addBuddy = 0;
var myx;
var myy;
var myanim;
var userhashmap = {};
var socketid;
var buddydistancetimer;
function create() {
game.stage.disableVisibilityChange = true;
game.physics.startSystem(Phaser.Physics.ARCADE);
game.add.sprite(0,0,'sky');
platforms = game.add.group();
platforms.enableBody = true;
var ground = platforms.create(0, game.world.height - 64, 'ground');
ground.scale.setTo(2,2);
ground.body.immovable = true;
var ledge = platforms.create(400,400,'ground');
ledge.body.immovable = true;
ledge = platforms.create(-150,250,'ground');
ledge.body.immovable = true;
//player
player = game.add.sprite(32, game.world.height - 150, 'dude');
game.physics.arcade.enable(player);
player.body.bounce.y = 0.2;
player.body.gravity.y = 800;
player.body.collideWorldBounds = true;
player.animations.add('left', [0,1,2,3], 10, true);
player.animations.add('right', [5,6,7,8], 10, true);
//other players (buddy)
buddys = game.add.group(); //buddys represent the other connected players
buddys.enableBody = true;
cursors = game.input.keyboard.createCursorKeys();
userText = game.add.text(16, 16, 'users: 1', {fontSize: '32px', fill: '#16718F'}); //displays num users online
loginText = game.add.text(200, 16, '', {fontSize: '32px', fill: '#36718F'}); //displays user join and leave
}
//socket.io
socket.on('userhashmap', function(msg){ //receive other player's info
userhashmap = msg; //put the other player's info into userhashmap
});
socket.on('connect', function() {
console.log("hello " + socket.id);
socketid = socket.id; //store socket.id for use in the game
setInterval(function() { //send info about your character to the server
//if-else if for only sending data if the character has moved
if (!(socket.id in userhashmap)) {
socket.emit('clientinfo', [myx, myy, myanim]);
}
else if (userhashmap[socket.id][0] != myy || userhashmap[socket.id][1] != myx) {
socket.emit('clientinfo', [myx, myy, myanim]);
}
}, 100); //every 100 ms
});
function update() {
//buddy control
userscount = 0;
for(var user in userhashmap) { //iterate through all connected players
userscount += 1;
var nobuddy = true; //flag for if a buddy has been created for this user already
if (user != socketid) { //if the connected user isn't you
buddys.forEach(function (guy) { //iterate through current representations of players
if (guy.name == user) { //if a guy (individual buddy) has already been created
//***manipulating buddys already present in room***
nobuddy = false; //a buddy has already been created for this user
game.physics.arcade.moveToXY(guy,userhashmap[guy.name][0],userhashmap[guy.name][1], 300, 70);
//above: interpolate the guy's position to the current one
//below: checks if a guy gets too far away from where hes supposed to be and deals with it.
if (game.physics.arcade.distanceToXY(guy,userhashmap[guy.name][0],userhashmap[guy.name][1]) > 60) { //arbitrary 60 can be fiddled with
buddydistancetimer += 1;
if (buddydistancetimer > 10) { //arbitrary 10 can be fiddled with
guy.body.position.x = userhashmap[guy.name][0]; //snaps to non-interpolated position
guy.body.position.y = userhashmap[guy.name][1]; //if too far away from it
}
} else buddydistancetimer = 0;
//below: set the animations for the buddy
if (userhashmap[guy.name][2] == 'stop') {
guy.animations.stop();
guy.frame = 4;
} else if (userhashmap[guy.name][2] == 'jump_left'){
guy.animations.stop();
guy.frame = 3;
} else if (userhashmap[guy.name][2] == 'jump_right'){
guy.animations.stop();
guy.frame = 6;
} else {
guy.animations.play(userhashmap[guy.name][2]);
}
}
},this);
if (nobuddy) { //no buddy has been created for this user, so create one
var buddy = buddys.create(userhashmap[user][0], userhashmap[user][1], 'dude'); //create buddy
buddy.tint = '0x' + (Math.round(Math.random()*Math.pow(2, 24))).toString(16); //random color
buddy.name = user; //identify the buddy with it's corresponding user
buddy.animations.add('left', [0,1,2,3], 10, true);
buddy.animations.add('right', [5,6,7,8], 10, true);
buddy.frame = 4;
loginText.text = user.substr(0,5) + '.. joined'; //first time creating a buddy so user just joined
}
}
}
userText.text = 'users: ' + userscount; //update displayed ammount of users
//destroy buddies if they are not in the hashmap (the user left the game)
buddys.forEach(function (guy) { //iterate through all buddys
var nouser = true;
for(var user in userhashmap) {
if (guy.name == user) { //if the buddy represents a documented user
nouser = false; //then make sure he is not destroyed
}
}
if (nouser) { //if the user is gone from the hashmap but the buddy still exists
guy.destroy(); //destroy that buddy
loginText.text = guy.name.substr(0,5) + '.. left'; //tell the player that the user left the game
}
});
game.physics.arcade.collide(player, platforms);
game.physics.arcade.collide(buddys, platforms);
player.body.velocity.x = 0;
myx = player.x;
myy = player.y;
if (cursors.left.isDown)
{
// Move to the left
player.body.velocity.x = -150;
player.animations.play('left');
myanim = 'left';
}
else if (cursors.right.isDown)
{
player.body.velocity.x = 150;
player.animations.play('right');
myanim = 'right';
}
else
{
player.animations.stop();
player.frame = 4;
myanim = 'stop';
}
if (cursors.up.isDown && player.body.touching.down)
{
player.body.velocity.y = -555;
}
if (player.body.velocity.x > 0 && !player.body.touching.down)
{
player.animations.stop();
player.frame = 6;
myanim = 'jump_right';
}
if (player.body.velocity.x < 0 && !player.body.touching.down)
{
player.animations.stop();
player.frame = 3;
myanim = 'jump_left';
}
}
</script>
</body>
</html>