-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
132 lines (113 loc) · 3.51 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
<!doctype html>
<html>
<head>
<title>Socket.IO Snake Multiplayer</title>
<style>
* { margin: 0; padding: 0; }
body { font: 24px Helvetica, Arial; }
#scores { float: right; padding-top: 16px; padding-right: 16px; }
</style>
</head>
<body>
<div id="scores">
<div id="own">
Nickname: <input type="text" id="nickname" />
<input type="button" id="auth" value="Play!" />
</div>
<hr />
<div id="others">
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
GameCanvas = (function() {
/*
Constructor
*/
function GameCanvas(canvas) {
var ratio = window.innerWidth < window.innerHeight ?
window.innerWidth : window.innerHeight;
this.canvas = canvas;
this.canvas.width = this.canvas.height = ratio;
this.context = this.canvas.getContext('2d');
this.gridSize = 40;
this.cellSize = ratio / this.gridSize;
}
/*
Render game canvas & draw players, apples & scores
*/
GameCanvas.prototype.draw = function(players, apples) {
var context = this.context;
var cellSize = this.cellSize;
// Render background
this.context.fillStyle = "#555";
this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
// Reset other
$('#others').text('');
// Render scores
players.forEach((p) => {
// scores
if(p.id === playerId) {
$('#own')
.text(p.nickname + ' score: ' + p.points)
.append($('<br>'));
} else {
$('#others')
.append($('<span>')
.text(p.nickname + ' ' + p.id + ': ' + p.points))
.append($('<br>'));
}
// players
if(p.id === playerId) {
context.fillStyle = "#fff";
} else {
context.fillStyle = "#4286f4";
}
context.fillRect(p.x*cellSize, p.y*cellSize, cellSize, cellSize);
// tails
p.tail.forEach((t) => {
context.fillRect(t.x*cellSize, t.y*cellSize, cellSize, cellSize);
});
});
// Render apples
apples.forEach((a) => {
context.fillStyle = "#ff0000";
context.fillRect(a.x*cellSize, a.y*cellSize, cellSize, cellSize);
});
}
return GameCanvas;
})();
/*
Initialize Game
*/
var socket = io();
var playerId;
var nickname;
// Authenticate
$('#auth').click(() => {
nickname = $('#nickname').val().trim();
if(nickname && nickname !== '') {
socket.emit('auth', { nickname }, (session) => {
playerId = session.id;
console.log('new session: ' + playerId);
});
}
});
// Create & insert canvas
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
// Create game with canvas
var game = new GameCanvas(canvas);
// Send keystrokes
document.onkeydown = (ev) => {
socket.emit('key', ev.keyCode);
}
// Receive state from server
socket.on('state', (stuff) => {
// and redraw the game
game.draw(stuff.players, stuff.apples);
});
</script>
</body>
</html>