-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
123 lines (106 loc) · 3.04 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
<!DOCTYPE html>
<html>
<head>
<title>2048 Game in Elm</title>
<style type="text/css">
@import url(https://gabrielecirulli.github.io/2048/style/fonts/clear-sans.css);
html, body {
margin: 0;
padding: 0;
position: relative;
height: 100%;
width: 100%;
}
body {
background: #faf8ef;
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
}
#game, #text {
position: relative;
margin: auto;
width: 40%;
height: auto;
min-width: 300px;
}
#text, a {
margin-top: 15px;
color: rgb(119, 110, 101);
}
a {
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="game"></div>
<div id="text">
This is a clone of the <a
href="https://gabrielecirulli.github.io/2048/">2048 Game</a> rewritten
in <a href="http://elm-lang.org/">Elm</a> programming language by <a
href="https://github.com/zindel">Oleksiy Golovko</a>. Have fun
playing!
</div>
<script type="text/javascript" src="build/elm.js"> </script>
<script type="text/javascript">
// Make sure page is not scrolling on keypress and keydown
document.addEventListener('keydown',
function preventScroll(e) {
if(e.which == 38 || e.which == 40) {
e.preventDefault();
return false;
}
return true;
});
function size(el) {
var rect = el.getBoundingClientRect();
return {
width: rect.width,
height: rect.height,
windowWidth: window.innerWidth,
windowHeight: window.innerHeight
};
}
var KEY = "game2048elm";
function init(container) {
var ret = {
score: 0,
best: 0,
initialBoard: [],
size: size(container)
};
if (window.localStorage) {
try {
var obj = JSON.parse(localStorage.getItem(KEY));
ret.score = obj[0];
ret.best = obj[1];
ret.initialBoard = obj[2];
} catch (e) {}
}
return ret;
}
function save(data) {
if (window.localStorage) {
localStorage.setItem(KEY, JSON.stringify(data));
}
}
var container = document.getElementById('game');
var app = Elm.Game2048.embed(container, init(container));
app.ports.save.subscribe(save);
window.onresize = function() {
app.ports.size.send(size(container));
};
</script>
<!-- Github corner ribbon -->
<a href="https://github.com/zindel/game2048elm">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png">
</a>
<!-------------------------->
</body>
</html>