forked from gabrielecirulli/2048
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
137 lines (123 loc) · 5.63 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Two Player 2048 Game - 2x2048</title>
<link href="style/main.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="meta/apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-47131262-3', 'auto');
ga('send', 'pageview');
if (top.location != location) {
top.location.href = document.location.href ;
}
</script>
</head>
<body>
<div class="container">
<div class="heading">
<h1 class="title">Two Player 2048 - 2x2048</h1>
</div>
<br>
<p style="font-size: 24px">Created by <a href="/">Instapainting.com</a> - turn any photo into a hand-painted oil painting for only $49.</p>
<br>
<!-- script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 2x2048 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-2622706299452180"
data-ad-slot="4061204809"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script -->
<p class="game-intro">
Join the numbers and get to the <strong>2048 tile!</strong>, or have the most points at the end when no moves are available!<br>
<small>This is the two-player version. HN users, please upvote!</small><br>
<small>IMPORTANT: This game only works on the latest versions of most browsers except Safari.</small>
</p>
<p>
Full annotated source code available on <a href="https://github.com/chrischen/2x2048">Github</a>
<ul>
<li>The modified networking and matchmaking code is annotated and available in <a href="https://github.com/chrischen/2x2048/blob/master/js/application.js">application.js</a></li>
<li>The modified game logic to support two players is annotated and available in <a href="https://github.com/chrischen/2x2048/blob/master/js/game_manager.js">game_manager.js</a></li>
<li>Other files were lightly modified to support 2 players.</li>
</ul>
</p>
<div class="matchmaking-button"><a href="#" class="find-match btn">Find Random Opponent</a> or</div>
<p><strong>Give this link to the other player:</strong></p>
<div class="room-link"><input class="room-input" type="text" val="" /></div>
<div class="scores-container">
<div class="blue-score-container score-container">0</div>
<div class="red-score-container score-container">0</div>
</div>
<div class="current-player">Waiting for other player...</div>
<div class="game-container">
<div class="game-message">
<p></p>
<div class="lower">
<a class="keep-playing-button">Keep going</a>
<a class="retry-button">Try again</a>
</div>
</div>
<div class="grid-container">
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
</div>
<div class="tile-container">
</div>
</div>
<p class="game-explanation">
<strong class="important">How to play:</strong> Take turns using your <strong>arrow keys</strong> to move the tiles. When two tiles with the same number touch, they <strong>merge into one!</strong> Merge your opponent's tiles to add to your score. The player who creates the 2048 tile wins, or, if no moves are possible, the player with the highest sum of all tiles wins!
</p>
<hr>
<p>
<strong class="important">Note:</strong> This site is not the official version of 2048. This site is a derivative, and should be used with caution. All other sites are derivatives of this derivative, and should be used with extreme caution.
</p>
<hr>
<p>
Created by Chris Chen of <a href="https://instapainting.com" target="_blank">Instapainting.com</a>. Based on 2048 by <a href="http://gabrielecirulli.com" target="_blank">Gabriele Cirulli</a>.
</p>
</div>
<script src="js/animframe_polyfill.js"></script>
<script src="js/keyboard_input_manager.js"></script>
<script src="js/html_actuator.js"></script>
<script src="js/grid.js"></script>
<script src="js/tile.js"></script>
<script src="js/local_score_manager.js"></script>
<script src="https://unpkg.com/[email protected]/dist/peerjs.min.js"></script>
<script src="js/game_manager.js"></script>
<script src="js/application.js"></script>
</body>
</html>