-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.ejs
112 lines (106 loc) · 5.67 KB
/
index.ejs
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
<!doctype html>
<html xmlns:og="http://opengraphprotocol.org/schema/">
<head>
<meta property="og:title" content="<%= gameName %> - A multiplayer game written in javascript using the HTML5 canvas, node.js, and Socket.IO"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://snakes.eric-wieser.tk/"/>
<meta property="og:description" content="A game for two (or more) players. Control the snakes with the arrow keys and WASD. Eat or be eaten!"/>
<meta property="og:image" content="http://eric-wieser.tk/images/snaps/snakes.png" />
<meta property="fb:admins" content="eric.wieser"/>
<link rel="shortcut icon" href="/favicon.png">
<link rel="stylesheet" href="/style.css">
<script>
var port = <%- port %>;
var gameName = <%- JSON.stringify(room) %>;
</script>
<script src="/socket.io/socket.io.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/script.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dosis:300,600|Ubuntu" />
<title><%= gameName %> - A multiplayer game written in javascript using the HTML5 canvas, node.js, and Socket.IO</title>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24953524-2']);
_gaq.push(['_setDomainName', 'eric-wieser.tk']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : 258769527571740,//'<%= app.id %>', // App ID
//channelUrl : '<%= url_no_scheme('/channel.html') %>', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Listen to the auth.login which will be called when the user logs in
// using the Login button
FB.Event.subscribe('auth.login', function(response) {
// We want to reload the page now so PHP can read the cookie that the
// Javascript SDK sat. But we don't want to use
// window.location.reload() because if this is in a canvas there was a
// post made to this page and a reload will trigger a message to the
// user asking if they want to send data again.
window.location = window.location;
});
};
// Load the SDK Asynchronously
$.getScript("//connect.facebook.net/en_US/all.js");
</script>
<div id="wrapper"><canvas id="canvas">If you can see this, your browser sucks</canvas></div>
<div id="top">
<div id="message"></div>
<div class="score-bar">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div id="bottom">
<ul id="scores"></ul>
<form id="chat">
<ul class="history">
</ul>
<input />
<button type="submit" style="display: none"></button>
</form>
</div>
<div id="login" class="vertical-center">
<div>
<div class="box">
<h1><%= gameName %> @ <%= room %> </h1>
<p>Control the snake by moving the mouse - no clicking required. Eat other snakes, or be eaten. <a href="#" id="about-link">About</a>.</p>
<form id="join" class="one-box-form">
<button type="submit">Join the game</button>
<input id="name" placeholder="Enter your name here" autocomplete="off" autofocus="autofocus" />
</form>
<small>Type your name above, and press Enter to join the game</small>
<fb:login-button>log in with facebook</fb:login-button>
</div>
</div>
</div>
<div id="about" class="vertical-center" style="display: none">
<div>
<div class="box">
<h1>About <span class="game-name"><%= gameName %></span></h1>
<p><span class="game-name"><%= gameName %></span> started off as a simple physics engine, with just balls bouncing off each other and the edges of the screen. Then a form of magnetic attraction was simulated. Interestingly, the balls naturally formed into wriggling snake shapes. A couple more tweaks, and a set of balls followed the player. It began to become apparent that there was a potential for a game here. Add a second player, a scoring system, and the ability to eat other balls, and you have a single computer, keyboard-mashing game. You can still play a <a href="/local">2 player</a>, <a href="/local?3">3 player</a>, or even <a href="/local?4">4 player</a> version of the single-computer version.</p>
<h2>Networking</h2>
<p><span class="game-name"><%= gameName %></span> needed improving. The controls were terrible, the arena too small, and most keyboards couldn't cope with the strain of 4 users each hammering arrow keys. It needed to go networked. Node.js was the answer, along with Socket.IO. This was an exercise in learning new technologies, and seeing where they led to. </p>
<h2>Created by <a href="http://eric-wieser.tk/">Eric Wieser</a></h2>
<p>With thanks to Max Sinclair for allowing a core of his webserver to be devoted to <span class="game-name"><%= gameName %></span>, Luke Suess and Jonathan Laver for game inspiration along the way, and numerous friends for playing, testing, and hacking the game so that it could be improved.</p>
<p>The inspiration to go networked came from Rob Hawkes' <a href="http://rawkets.com">Rawkets</a></p>
<p>Browse the source code <a href="http://github.com/eric-wieser/snakes">on github</a>
</div>
</div>
</div>
</body>
</html>