Ajax Loader
×
HTML 
<!DOCTYPE HTML>
1
<!DOCTYPE HTML>
2
<html lang="en-US">
3
<head>
4
  <title>Loncat</title>
5
</head>
6
<body>
7
  <div class="container">
8
    <canvas id="canvas">
9
      Aduh, browsermu enggak support HTML5!
10
    </canvas>
11
 
12
    <div id="mainMenu">
13
      <h1>doodle jump</h1>
14
      <h3>using HTML5,</h3>
15
      <h3>...by <a href="http://twitter.com/solitarydesigns/" target="_blank">Angga and Kushagra Agarwal</a></h3>
16
      <h3>and <a href="http://cssdeck.com" target="_blank">CSSDeck</a></h3>
17
 
18
      <p class="info">
19
        gunakan
20
        <span class="key left">←</span>
21
        <span class="key right">→</span>
22
        untuk loncat ke kiri dan ke kanan
23
      </p>
24
      <a class="button" href="javascript:init()">Mainkan</a>
25
    </div>
26
27
    <div id="gameOverMenu">
28
      <h1>Jatoh deh :(</h1>
29
      <h3 id="go_score">Scoremu 0 points</h3>
30
 
31
      <a class="button" href="javascript:reset()">Mulai lagi</a>
32
      <a id="tweetBtn" target="_blank" class="button tweet" href="#">Tweet score</a>
33
 
34
      <a id="fbBtn" target="_blank" class="button fb" href="#">Post on FB</a>
35
    </div>
36
37
38
    <!-- Preloading image ;) -->
39
    <img id="sprite" src="http://i.imgur.com/2WEhF.png"/>
40
 
41
    <div id="scoreBoard">
42
      <p id="score">0</p>
43
    </div>
44
 
45
  </div>
46
</body>
47
</html>
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);
1
@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);
2
 
3
*{box-sizing: border-box;}
4
 
5
body {
6
  margin: 0; padding: 0;
7
  font-family: 'cartoon', cursive;
8
}
9
 
10
.container {
11
  height: 552px;
12
  width: 422px;
13
  position: relative;
14
  margin: 20px auto 0;
15
  overflow: hidden;
16
}
17
 
18
canvas {
19
  height: 552px;
20
  width: 422px;
21
  display: block;
22
  background: url(http://i.imgur.com/Y0BMP.png) top left;
23
}
24
 
25
#scoreBoard {
26
  width: 420px;
27
  height: 50px;
28
  background: rgba(182, 200, 220, 0.7);
29
  position: absolute;
30
  top: -3px;
31
  left: 0;
32
  z-index: -1;
33
  border-image: url(http://i.imgur.com/5BBsR.png) 100 5 round;
34
}
35
 
36
#scoreBoard p {
37
  font-size: 20px;
38
  padding: 0;
39
  line-height: 47px;
40
  margin: 0px 0 0 5px;
41
}
42
 
43
img {display: none}
44
 
45
#mainMenu, #gameOverMenu {
46
  height: 100%;
47
  width: 100%;
48
  text-align: center;
49
  position: absolute;
50
  top: 0;
51
  left: 0;
52
  z-index: 2;
53
}
54
 
55
#gameOverMenu {
56
  visibility: hidden;
57
}
58
 
59
h2, h3, h1 {font-weight: normal}
60
h1 {
61
  font-size: 60px;
62
  color: #5a5816;
63
  transform: rotate(-10deg);
64
  margin: 0px;
65
}
66
 
67
h3 {text-align: right; margin: -10px 20px 0 0; color: #5e96be}
68
h3 a {color: #5a5816}
69
 
70
.button {
71
  width: 105px;
72
  height: 31px;
73
  background: url(http://i.imgur.com/2WEhF.png) 0 0 no-repeat;
74
  display: block;
75
  color:  #000;
76
  font-size: 12px;
77
  line-height: 31px;
78
  text-decoration: none;
79
  position: absolute;
80
  left: 50%;
81
  bottom: 50px;
82
  margin-left: -53px;
83
}
84
 
85
.button.tweet {bottom: 100px; background-position: 0 -90px}
86
.but
 

Untitled

CSSDeck G+