Ajax Loader
×
HTML 
<!DOCTYPE HTML>
1
<!DOCTYPE HTML>
2
<html lang="en-US">
3
<head>
4
  <title>Jump</title>
5
</head>
6
<body>
7
  <div class="container">
8
    <canvas id="canvas">
9
      Aww, your browser doesn't support HTML5
10
    </canvas>
11
 
12
    <div id="mainMenu">
13
14
      <h3>...by Brianna, Isabelle, Kyra </h3>
15
16
 
17
18
      <a class="button" href="javascript:init()">Play</a> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
19
      <p>
20
        use
21
        <span class="key left">←</span>
22
        <span class="key right">→</span>
23
        to move!
24
      </p>
25
    </div>
26
27
     <div id="charMenu">
28
    </div>
29
  
30
    <div id="gameOverMenu">
31
     <h1>game over!</h1>
32
      <h3 id="go_score">you scored 0 points</h3>
33
      <br>
34
    <br>
35
36
      <img id="elephant" src= "http://i.imgur.com/UWWNqXq.png"/>
37
 
38
      <a class="button" href="javascript:reset()">Restart</a> <br>
39
      <!--<a class="button" bottom=2px href="javascript:reset()">Players</a>-->
40
41
    </div>
42
43
44
    <!-- Preloading image ;) -->
45
    <img id="sprite" src="http://i.imgur.com/vASgVnn.png"/>
46
 
47
    <div id="scoreBoard">
48
      <p id="score">0</p>
49
    </div>
50
 
51
  </div>
52
</body>
53
</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: 'courier', cursive;
8
}
9
 
10
.container {
11
  height: 552px;
12
  width: 422px;
13
  position: relative;
14
  margin: 20px auto;
15
  overflow: hidden;
16
}
17
 
18
canvas {
19
  height: 552px;
20
  width: 422px;
21
  display: block;
22
  background: url(http://i.imgur.com/n44tVsw.png);
23
  background-size: 422px 552px;
24
}
25
 
26
#scoreBoard {
27
  width: 422px;
28
  height: 50px;
29
  background: rgba(45, 179, 221, 0.7);
30
  position: absolute;
31
  top: -3px;
32
  left: 0;
33
  z-index: -1;
34
  border-image: url(http://i.imgur.com/YXNA9.png) 100 5 round;
35
  visibility: visible;
36
 
37
}
38
 
39
#scoreBoard p {
40
  font-size: 20px;
41
  padding: 0;
42
  line-height: 47px;
43
  margin: 0px 0 0 5px;
44
}
45
 
46
/* img {display: none}
47
 */
48
#mainMenu, #gameOverMenu, #charMenu {
49
  height: 100%;
50
  width: 100%;
51
  text-align: center;
52
  position: absolute;
53
  top: 0;
54
  left: 0;
55
  z-index: 1;
56
  #elephant {
57
  visibility: visible;
58
}
59
}
60
 
61
#mainMenu {
62
  z-index: 2;
63
  visibility:visible;
64
}
65
 
66
#charMenu {
67
  background: url("http://i.imgur.com/QitX7qu.jpg");
68
  background-size: 422px 552px;
69
  background-position:center;
70
  visibility:hidden;
71
}
72
 
73
#char {
74
  visibility:hidden;
75
}
76
 
77
#gameOverMenu {
78
  visibility: hidden;
79
}
80
 
81
 
82
 
83
h2, h3, h1 {font-weight: normal}
84
h1 {
85
  font-size: 60px;
86
  color: #ffffff;
87
  transform: rotate(0deg);
88
  margin: 0px;
89
}
90
 
91
h3 {
92
  font-size: 12px;
93
  text-align: right;
94
  margin: 0px 20px 0 0;
95
  color: #fff;
96
}
97
p  {
98
color: #ffffff;
99
font-size: 25px;
100
 
101
}
102
h3 a {color: #ffffff;
103
      background-color:#ffffff;}
104
 
105
.button {
106
  width: 105px;
107
  height: 31px;
108
  background: url(http://i.imgur.com/Q3sLW.png) 0 0 no-repeat;
109
  display: block;
110
  color:  #000;
111
  font-size: 12px;
112
  line-height: 31px;
113
  text-decoration: none;
114
  position: absolute;
115
  left: 50%;
116
  bottom: 50px;
117
  margin-left: -53px;
118
}
119
 
120
.button.tweet {bottom: 100px; background-position: 0 -90px}
121
.button.fb {bottom: 150px; background-position: 0 -60px}
122
 
123
.info {position: absolute; right: 20px; bottom: 00px; margin: 0; color: black}
124
 
125
.info .key {
126
  width: 16px;
127
  height: 16px;
128
  background: url(http://i.imgur.com/b6ySa.png) no-repeat;
129
  text-indent: -9999px;
130
  display: inline-block;
131
}
132
 
133
 
134
 
135
.info .key.left {background-position: -92px -621px;}
136
.info .key.right {background-position: -92px -641px;}
137
 
 
JavaScript 
// RequestAnimFrame: a browser API for getting smooth animations
1
// RequestAnimFrame: a browser API for getting smooth animations
2
window.requestAnimFrame = (function() {
3
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
4
  function(callback) {
5
    window.setTimeout(callback, 1000 / 60);
6
  };
7
})();
8
 
9
var canvas = document.getElementById('canvas'),
10
  ctx = canvas.getContext('2d');
11
 
12
 
13
var width = 422,
14
  height = 552;
15
 
16
canvas.width = width;
17
canvas.height = height;
18
 
19
//Variables for game
20
var platforms = [],
21
  image = document.getElementById("sprite"),
22
  player, platformCount = 10,
23
  position = 0,
24
  gravity = 0.2,
25
  animloop,
26
  flag = 0,
27
  menuloop, broken = 0,
28
  dir, score = 0, firstRun = true;
29
 
30
//Base object
31
var Base = function() {
32
  this.height = 5;
33
  this.width = width;
34
 
35
  //Sprite clipping
36
  this.cx = 0;
37
  this.cy = 614;
38
  this.cwidth = 100;
39
  this.cheight = 5;
40
 
41
  this.moved = 0;
42
 
43
  this.x = 0;
44
  this.y = height - this.height;
45
 
46
  this.draw = function() {
47
    try {
48
      ctx.drawImage(image, this.cx, this.cy, this.cwidth, this.cheight, this.x, this.y, this.width, this.height);
49
    } catch (e) {}
50
  };
51
};
52
 
53
var base = new Base();
54
 
55
//Player object
56
var Player = function() {
57
  this.vy = 11;
58
  this.vx = 0;
59
 
60
  this.isMovingLeft = false;
61
  this.isMovingRight = false;
62
  this.isDead = false;
63
 
64
  this.width = 55;
65
  this.height = 40;
66
 
67
  //Sprite clipping
68
  this.cx = 0;
69
  this.cy = 0;
70
  this.cwidth = 110;
71
  this.cheight = 80;
72
 
73
  this.dir = "left";
74
 
75
  this.x = width / 2 - this.width / 2;
76
  this.y = height;
77
 
78
  //Function to draw it
79
  this.draw = function() {
80
    try {
81
      if (this.dir == "right") this.cy = 121;
82
      else if (this.dir == "left") this.cy = 201;
83
      else if (this.dir == "right_land") this.cy = 289;
84
      else if (this.dir == "left_land") this.cy = 371;
85
 
86
      ctx.drawImage(image, this.cx, this.cy, this.cwidth, this.cheight, this.x, this.y, this.width, this.height);
87
    } catch (e) {}
88
  };
89
 
90
  this.jump = function() {
91
    this.vy = -8;
92
  };
93
 
94
  this.jumpHigh = function() {
95
    this.vy = -16;
96
  };
97
 
98
};
99
 
100
player = new Player();
101
 
102
//Platform class
103
 
104
function Platform() {
105
  this.width = 70;
106
  this.height = 17;
107
 
108
  this.x = Math.random() * (width - this.width);
109
  this.y = position;
110
 
111
  position += (height / platformCount);
112
 
113
  this.flag = 0;
114
  this.state = 0;
115
 
116
  //Sprite clipping
117
  this.cx = 0;
118
  this.cy = 0;
119
  this.cwidth = 105;
120
  this.cheight = 31;
121
 
122
  //Function to draw it
123
  this.draw = function() {
124
    try {
125
 
126
      if (this.type == 1) this.cy = 0;
127
      else if (this.type == 2) this.cy = 61;
128
      else if (this.type == 3 && this.flag === 0) this.cy = 31;
129
      else if (this.type == 3 && this.flag == 1) this.cy = 1000;
130
      else if (this.type == 4 && this.state === 0) this.cy = 90;
131
      else if (this.type == 4 && this.state == 1) this.cy = 1000;
132
 
133
      ctx.drawImage(image, this.cx, this.cy, this.cwidth, this.cheight, this.x, this.y, this.width, this.height);
134
    } catch (e) {}
135
  };
136
 
137
  //Platform types
138
  //1: Normal
139
  //2: Moving
140
  //3: Breakable (Go through)
141
  //4: Vanishable
142
  //Setting the probability of which type of platforms should be shown at what score
143
  if (score >= 5000) this.types = [2, 3, 3, 3, 4, 4, 4, 4];
144
  else if (score >= 2000 && score < 5000) this.types = [2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4];
145
  else if (score >= 1000 && score < 2000) this.types = [2, 2, 2, 3, 3, 3, 3, 3];
146
  else if (score >= 500 && score < 1000) this.types = [1, 1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3];
147
  else if (score >= 100 && score < 500) this.types = [1, 1, 1, 1, 2, 2];
148
  else this.types = [1];
149
 
150
  this.type = this.types[Math.floor(Math.random() * this.types.length)];
151
 
152
  //We can't have two consecutive breakable platforms otherwise it will be impossible to reach another platform sometimes!
153
  if (this.type == 3 && broken < 1) {
154
    broken++;
155
  } else if (this.type == 3 && broken >= 1) {
156
    this.type = 1;
157
    broken = 0;
158
  }
159
 
160
  this.moved = 0;
161
  this.vx = 1;
162
}
163
 
164
for (var i = 0; i < platformCount; i++) {
165
  platforms.push(new Platform());
166
}
167
 
168
//Broken platform object
169
var Platform_broken_substitute = function() {
170
  this.height = 30;
171
  this.width = 70;
172
 
173
  this.x = 0;
174
  this.y = 0;
175
 
176
  //Sprite clipping
177
  this.cx = 0;
178
  this.cy = 554;
179
  this.cwidth = 105;
180
  this.cheight = 60;
181
 
182
  this.appearance = false;
183
 
184
  this.draw = function() {
185
    try {
186
      if (this.appearance === true) ctx.drawImage(image, this.cx, this.cy, this.cwidth, this.cheight, this.x, this.y, this.width, this.height);
187
      else return;
188
    } catch (e) {}
189
  };
190
};
191
 
192
var platform_broken_substitute = new Platform_broken_substitute();
193
 
194
//Spring Class
195
var spring = function() {
196
  this.x = 0;
197
  this.y = 0;
198
 
199
  this.width = 26;
200
  this.height = 30;
201
 
202
  //Sprite clipping
203
  this.cx = 0;
204
  this.cy = 0;
205
  this.cwidth = 45;
206
  this.cheight = 53;
207
 
208
  this.state = 0;
209
 
210
  this.draw = function() {
211
    try {
212
      if (this.state === 0) this.cy = 445;
213
      else if (this.state == 1) this.cy = 501;
214
 
215
      ctx.drawImage(image, this.cx, this.cy, this.cwidth, this.cheight, this.x, this.y, this.width, this.height);
216
    } catch (e) {}
217
  };
218
};
219
 
220
var Spring = new spring();
221
 
222
function init() {
223
   document.getElementById('canvas').style.background = "#B80000 url('')";
224
  //Variables for the game
225
  var dir = "left",
226
    jumpCount = 0;
227
228
  firstRun = false;
229
 
230
  //Function for clearing canvas in each consecutive frame
231
 
232
  function paintCanvas() {
233
    ctx.clearRect(0, 0, width, height);
234
  }
235
 
236
  //Player related calculations and functions
237
 
238
  function playerCalc() {
239
    if (dir == "left") {
240
      player.dir = "left";
241
      if (player.vy < -7 && player.vy > -15) player.dir = "left_land";
242
    } else if (dir == "right") {
243
      player.dir = "right";
244
      if (player.vy < -7 && player.vy > -15) player.dir = "right_land";
245
    }
246
    
247
    
248
    
249
 
250
 
251
    //Adding keyboard controls
252
    document.onkeydown = function(e) {
253
      var key = e.keyCode;
254
    
255
      if (key == 37) {
256
        dir = "left";
257
        player.isMovingLeft = true;
258
      } else if (key == 39) {
259
        dir = "right";
260
        player.isMovingRight = true;
261
      }
262
    
263
      if(key == 32) {
264
        if(firstRun === true)
265
          init();
266
        else
267
          reset();
268
      }
269
    };
270
 
271
    document.onkeyup = function(e) {
272
      var key = e.keyCode;
273
  
274
      if (key == 37) {
275
        dir = "left";
276
        player.isMovingLeft = false;
277
      } else if (key == 39) {
278
        dir = "right";
279
        player.isMovingRight = false;
280
      }
281
    };
282
 
283
    //Accelerations produces when the user hold the keys
284
    if (player.isMovingLeft === true) {
285
      player.x += player.vx;
286
      player.vx -= 0.15;
287
    } else {
288
      player.x += player.vx;
289
      if (player.vx < 0) player.vx += 0.1;
290
    }
291
 
292
    if (player.isMovingRight === true) {
293
      player.x += player.vx;
294
      player.vx += 0.15;
295
    } else {
296
      player.x += player.vx;
297
      if (player.vx > 0) player.vx -= 0.1;
298
    }
299
 
300
    //Jump the player when it hits the base
301
    if ((player.y + player.height) > base.y && base.y < height) player.jump();
302
 
303
    //Gameover if it hits the bottom
304
    if (base.y > height && (player.y + player.height) > height && player.isDead != "lol") player.isDead = true;
305
 
306
    //Make the player move through walls
307
    if (player.x > width) player.x = 0 - player.width;
308
    else if (player.x < 0 - player.width) player.x = width;
309
 
310
    //Movement of player affected by gravity
311
    if (player.y >= (height / 2) - (player.height / 2)) {
312
      player.y += player.vy;
313
      player.vy += gravity;
314
    }
315
 
316
    //When the player reaches half height, move the platforms to create the illusion of scrolling and recreate the platforms that are out of viewport...
317
    else {
318
      platforms.forEach(function(p, i) {
319
 
320
        if (player.vy < 0) {
321
          p.y -= player.vy;
322
        }
323
 
324
        if (p.y > height) {
325
          platforms[i] = new Platform();
326
          platforms[i].y = p.y - height;
327
        }
328
 
329
      });
330
 
331
      base.y -= player.vy;
332
      player.vy += gravity;
333
 
334
      if (player.vy >= 0) {
335
        player.y += player.vy;
336
        player.vy += gravity;
337
      }
338
 
339
      score++;
340
    }
341
 
342
    //Make the player jump when it collides with platforms
343
    collides();
344
 
345
    if (player.isDead === true) gameOver();
346
  }
347
 
348
  //Spring algorithms
349
 
350
  function springCalc() {
351
    var s = Spring;
352
    var p = platforms[0];
353
 
354
    if (p.type == 1 || p.type == 2) {
355
      s.x = p.x + p.width / 2 - s.width / 2;
356
      s.y = p.y - p.height - 10;
357
 
358
      if (s.y > height / 1.1) s.state = 0;
359
 
360
      s.draw();
361
    } else {
362
      s.x = 0 - s.width;
363
      s.y = 0 - s.height;
364
    }
365
  }
366
 
367
  //Platform's horizontal movement (and falling) algo
368
 
369
  function platformCalc() {
370
    var subs = platform_broken_substitute;
371
 
372
    platforms.forEach(function(p, i) {
373
      if (p.type == 2) {
374
        if (p.x < 0 || p.x + p.width > width) p.vx *= -1;
375
 
376
        p.x += p.vx;
377
      }
378
 
379
      if (p.flag == 1 && subs.appearance === false && jumpCount === 0) {
380
        subs.x = p.x;
381
        subs.y = p.y;
382
        subs.appearance = true;
383
 
384
        jumpCount++;
385
      }
386
 
387
      p.draw();
388
    });
389
 
390
    if (subs.appearance === true) {
391
      subs.draw();
392
      subs.y += 8;
393
    }
394
 
395
    if (subs.y > height) subs.appearance = false;
396
  }
397
 
398
  function collides() {
399
    //Platforms
400
    platforms.forEach(function(p, i) {
401
      if (player.vy > 0 && p.state === 0 && (player.x + 15 < p.x + p.width) && (player.x + player.width - 15 > p.x) && (player.y + player.height > p.y) && (player.y + player.height < p.y + p.height)) {
402
 
403
        if (p.type == 3 && p.flag === 0) {
404
          p.flag = 1;
405
          jumpCount = 0;
406
          return;
407
        } else if (p.type == 4 && p.state === 0) {
408
          player.jump();
409
          p.state = 1;
410
        } else if (p.flag == 1) return;
411
        else {
412
          player.jump();
413
        }
414
      }
415
    });
416
 
417
    //Springs
418
    var s = Spring;
419
    if (player.vy > 0 && (s.state === 0) && (player.x + 15 < s.x + s.width) && (player.x + player.width - 15 > s.x) && (player.y + player.height > s.y) && (player.y + player.height < s.y + s.height)) {
420
      s.state = 1;
421
      player.jumpHigh();
422
    }
423
 
424
  }
425
 
426
  function updateScore() {
427
    var scoreText = document.getElementById("score");
428
    scoreText.innerHTML = score;
429
  }
430
 
431
  function gameOver() {
432
    platforms.forEach(function(p, i) {
433
      p.y -= 12;
434
    });
435
 
436
    if(player.y > height/2 && flag === 0) {
437
      player.y -= 8;
438
      player.vy = 0;
439
    }
440
    else if(player.y < height / 2) flag = 1;
441
    else if(player.y + player.height > height) {
442
      showGoMenu();
443
      hideScore();
444
      player.isDead = "lol";
445
 
446
      // var tweet = document.getElementById("tweetBtn");
447
      // tweet.href='http://twitter.com/share?url=http://is.gd/Htgf5C&text=I just scored ' +score+ ' points in the HTML5 Milo Jump game!&count=horiztonal&via=cssdeck&related=solitarydesigns';
448
  
449
      // var facebook = document.getElementById("fbBtn");
450
      // facebook.href='http://facebook.com/sharer.php?s=100&p[url]=http://cssdeck.com/labs/html5-milo-jump-game&p[title]=I just scored ' +score+ ' points in the HTML5 Milo Jump game!&p[summary]=Can you beat me?';
451
 
452
    }
453
  }
454
 
455
  //Function to update everything
456
 
457
  function update() {
458
    paintCanvas();
459
    platformCalc();
460
 
461
    springCalc();
462
 
463
    playerCalc();
464
    player.draw();
465
 
466
    base.draw();
467
 
468
    updateScore();
469
  }
470
 
471
  menuLoop = function(){return;};
472
  animloop = function() {
473
    update();
474
    requestAnimFrame(animloop);
475
  };
476
 
477
  animloop();
478
 
479
  hideMenu();
480
  showScore();
481
}
482
 
483
function reset() {
484
  hideGoMenu();
485
  showScore();
486
  player.isDead = false;
487
488
  flag = 0;
489
  position = 0;
490
  score = 0;javascript:void(0);
491
 
492
  base = new Base();
493
  player = new Player();
494
  Spring = new spring();
495
  platform_broken_substitute = new Platform_broken_substitute();
496
 
497
  platforms = [];
498
  for (var i = 0; i < platformCount; i++) {
499
    platforms.push(new Platform());
500
  }
501
}
502
//Hides the menu
503
function hideMenu() {
504
  var menu = document.getElementById("mainMenu");
505
  menu.style.zIndex = -1;
506
}
507
 
508
//Shows the game over menu
509
function showGoMenu() {
510
  var menu = document.getElementById("gameOverMenu");
511
  menu.style.zIndex = 1;
512
  menu.style.visibility = "visible";
513
 
514
  var scoreText = document.getElementById("go_score");
515
  scoreText.innerHTML = "You scored " + score + " points!";
516
}
517
 
518
//Hides the game over menu
519
function hideGoMenu() {
520
  var menu = document.getElementById("gameOverMenu");
521
  menu.style.zIndex = -1;
522
  menu.style.visibility = "hidden";
523
}
524
 
525
//Show ScoreBoard
526
function showScore() {
527
  var menu = document.getElementById("scoreBoard");
528
  menu.style.zIndex = 1;
529
}
530
 
531
//Hide ScoreBoard
532
function hideScore() {
533
  var menu = document.getElementById("scoreBoard");
534
  menu.style.zIndex = -1;
535
}
536
 
537
function playerJump() {
538
  player.y += player.vy;
539
  player.vy += gravity;
540
 
541
  if (player.vy > 0 &&
542
    (player.x + 15 < 260) &&
543
    (player.x + player.width - 15 > 155) &&
544
    (player.y + player.height > 475) &&
545
    (player.y + player.height < 500))
546
    player.jump();
547
 
548
  if (dir == "left") {
549
    player.dir = "left";
550
    if (player.vy < -7 && player.vy > -15) player.dir = "left_land";
551
  } else if (dir == "right") {
552
    player.dir = "right";
553
    if (player.vy < -7 && player.vy > -15) player.dir = "right_land";
554
  }
555
 
556
  //Adding keyboard controls
557
  document.onkeydown = function(e) {
558
    var key = e.keyCode;
559
 
560
    if (key == 37) {
561
      dir = "left";
562
      player.isMovingLeft = true;
563
    } else if (key == 39) {
564
      dir = "right";
565
      player.isMovingRight = true;
566
    }
567
568
    if(key == 32) {
569
      if(firstRun === true) {
570
        init();
571
        firstRun = false;
572
      }
573
      else
574
        reset();
575
    }
576
  };
577
 
578
  document.onkeyup = function(e) {
579
    var key = e.keyCode;
580
 
581
    if (key == 37) {
582
      dir = "left";
583
      player.isMovingLeft = false;
584
    } else if (key == 39) {
585
      dir = "right";
586
      player.isMovingRight = false;
587
    }
588
  };
589
 
590
  //Accelerations produces when the user hold the keys
591
  if (player.isMovingLeft === true) {
592
    player.x += player.vx;
593
    player.vx -= 0.15;
594
  } else {
595
    player.x += player.vx;
596
    if (player.vx < 0) player.vx += 0.1;
597
  }
598
 
599
  if (player.isMovingRight === true) {
600
    player.x += player.vx;
601
    player.vx += 0.15;
602
  } else {
603
    player.x += player.vx;
604
    if (player.vx > 0) player.vx -= 0.1;
605
  }
606
 
607
  //Jump the player when it hits the base
608
  if ((player.y + player.height) > base.y && base.y < height) player.jump();
609
 
610
  //Make the player move through walls
611
  if (player.x > width) player.x = 0 - player.width;
612
  else if (player.x < 0 - player.width) player.x = width;
613
 
614
  player.draw();
615
}
616
 
617
function update() {
618
  ctx.clearRect(0, 0, width, height);
619
  playerJump();
620
621
    //Adding keyboard controls
622
    document.onkeydown = function(e) {
623
      var key = e.keyCode;
624
    
625
      if (key == 49) {
626
        document.getElementById('sprite').src = "http://i.imgur.com/7yw6TGz.png";
627
      }
628
    
629
      if (key == 50) {
630
        document.getElementById('sprite').src = "http://i.imgur.com/1VteKrQ.png";
631
      }
632
    
633
       if (key == 51) {
634
        document.getElementById('sprite').src = "http://i.imgur.com/811P3tz.png";
635
      }
636
    
637
       if (key == 52) {
638
        document.getElementById('sprite').src = "http://i.imgur.com/Jj0uagM.png ";
639
      }
640
    
641
       if (key == 53) {
642
        document.getElementById('sprite').src = "http://i.imgur.com/luTbLDB.png";
643
      }
644
    
645
       if (key == 54) {
646
        document.getElementById('sprite').src = "http://i.imgur.com/YegJ1fv.png";
647
      }
648
    
649
       if (key == 55) {
650
        document.getElementById('sprite').src = "http://i.imgur.com/bq3PVfz.png";
651
      }
652
    
653
       if (key == 56) {
654
        document.getElementById('sprite').src = "http://i.imgur.com/hscRcze.png";
655
      }
656
    
657
       if (key == 57) {
658
        document.getElementById('sprite').src = "http://i.imgur.com/vASgVnn.png";
659
      }
660
 
661
    };
662
}  
663
 
664
menuLoop = function() {
665
  update();
666
  requestAnimFrame(menuLoop);
667
};
668
 
669
menuLoop();
 

Untitled

CSSDeck G+