1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 4<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5<head> 6 7<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 8 9<title>Re-Infiltration at Dusk</title> 10 11<meta name="description" content="The biomechanical horde is back for a sequel! Mash your keyboard to play this old school action game in HTML5-ready browsers: Firefox, Chrome, Safari, IE9." /> 12 13<style type="text/css" media="screen"> 14@font-face 15{ 16 font-family: "joystix"; 17 src: url(joystix.otf); 18} 19 20@font-face 21{ 22 font-family: "lilliput-steps"; 23 src: url(lilliput-steps.otf); 24} 25 26html, 27body 28{ 29 margin: 0; 30 padding: 0; 31 height: 100%; 32 background: #111; 33 text-align: center; 34 color: #fff; 35} 36 37.hide 38{ 39 position: absolute; 40 width: 1px; 41 height: 1px; 42 overflow: hidden; 43 top: 0; 44 left: -9999px 45} 46 47#container 48{ 49 position: relative; 50 margin: 0 auto; 51 padding: 15px; 52 background: #000; 53 width: 640px; 54 height: 500px; 55 -webkit-perspective: 450; 56} 57 58#title 59{ 60 position: absolute; 61 left: 15px; 62 top: 15px; 63 width: 640px; 64 height: 500px; 65 background: url(images/title.png) top left no-repeat; 66} 67 68p 69{ 70 margin: 0; 71 padding: 0; 72} 73 74p#re_big 75{ 76 position: absolute; 77 left: -180px; 78 top: 40px; 79 width: 183px; 80 height: 64px; 81 text-indent: -999em; 82 background: url(images/re-big.png) top left no-repeat; 83 -webkit-transform: rotate(-20deg); 84 -moz-transform: rotate(-20deg); 85 -ms-transform: rotate(-20deg); 86 transform: rotate(-20deg); 87} 88 89p#loading 90{ 91 position: absolute; 92 left: 0; 93 top: 210px; 94 font-size: 40px; 95 text-align: center; 96 width: 640px; 97 font-family: "joystix", monospace; 98 color: #fff; 99 z-index: 1; 100 -webkit-animation: loading 1s linear infinite alternate; 101 -moz-animation: loading 1s linear infinite alternate; 102} 103 104p#mozilla_link 105{ 106 position: absolute; 107 left: 0; 108 top: 323px; 109 width: 493px; 110 height: 43px; 111} 112 113p#zachstronaut_link 114{ 115 position: absolute; 116 left: 0; 117 top: 367px; 118 width: 565px; 119 height: 26px; 120} 121 122p#tettix_link 123{ 124 position: absolute; 125 left: 0; 126 top: 394px; 127 width: 487px; 128 height: 18px; 129} 130 131p#mozilla_link a, 132p#zachstronaut_link a, 133p#tettix_link a 134{ 135 display: block; 136 height: 100%; 137 text-indent: -999em; 138} 139 140p#mozilla_link a:hover, 141p#zachstronaut_link a:hover, 142p#tettix_link a:hover 143{ 144 background: rgba(255, 255, 255, 0.25); 145} 146 147p#zachstronaut_link a span 148{ 149 display: block; 150 position: absolute; 151 left: 570px; 152 top: -43px; 153 width: 40px; 154 height: 90px; 155} 156 157@-webkit-keyframes loading 158{ 159 0% 160 { 161 color: #333; 162 } 163 100% 164 { 165 color: #fff; 166 } 167} 168 169@-moz-keyframes loading 170{ 171 0% 172 { 173 color: #333; 174 } 175 100% 176 { 177 color: #fff; 178 } 179} 180 181p.pressanykey 182{ 183 position: absolute; 184 left: 0; 185 top: 210px; 186 font-size: 40px; 187 text-align: center; 188 width: 640px; 189 font-family: "joystix", monospace; 190 color: #fff; 191 z-index: 1; 192 -webkit-animation: pressanykey 100ms linear infinite alternate; 193 -moz-animation: pressanykey 100ms linear infinite alternate; 194 display: none; 195} 196 197#start { 198 cursor: pointer; 199} 200 201@-webkit-keyframes pressanykey 202{ 203 0% 204 { 205 color: #fff; 206 } 207 10% 208 { 209 color: #fff; 210 } 211 20% 212 { 213 color: #fff; 214 } 215 30% 216 { 217 color: #fff; 218 } 219 40% 220 { 221 color: #ff0; 222 } 223 50% 224 { 225 color: #ff0; 226 } 227 60% 228 { 229 color: #ff0; 230 } 231 70% 232 { 233 color: #ff0; 234 } 235 80% 236 { 237 color: #f00; 238 } 239 90% 240 { 241 color: #f00; 242 } 243 100% 244 { 245 color: #f00; 246 } 247} 248 249@-moz-keyframes pressanykey 250{ 251 0% 252 { 253 color: #fff; 254 } 255 10% 256 { 257 color: #fff; 258 } 259 20% 260 { 261 color: #fff; 262 } 263 30% 264 { 265 color: #fff; 266 } 267 40% 268 { 269 color: #ff0; 270 } 271 50% 272 { 273 color: #ff0; 274 } 275 60% 276 { 277 color: #ff0; 278 } 279 70% 280 { 281 color: #ff0; 282 } 283 80% 284 { 285 color: #f00; 286 } 287 90% 288 { 289 color: #f00; 290 } 291 100% 292 { 293 color: #f00; 294 } 295} 296 297.leaders 298{ 299 font-family: "joystix", monospace; 300 margin: 40px auto; 301 width: 600px; 302 text-align: center; 303} 304 305.leaders caption 306{ 307 font-size: 40px; 308 padding-bottom: 15px; 309} 310 311.leaders tr 312{ 313 font-size: 25px; 314} 315 316.focused 317{ 318 -webkit-animation: pressanykey 100ms linear infinite alternate; 319 -moz-animation: pressanykey 100ms linear infinite alternate; 320} 321 322.gameover 323{ 324 position: absolute; 325 left: -9999px; 326 top: 15px; 327 width: 640px; 328 height: 500px; 329 background: rgba(0, 0, 0, 0.85); 330 -moz-transition: -moz-transform 600ms ease-in; 331 -moz-transform: translate(0px, -500px); 332} 333 334.bounce 335{ 336 left: 15px; 337 -webkit-animation: bounce 700ms; 338 -moz-animation: bounce 700ms; 339 -moz-transform: translate(0px, 0px); 340} 341 342@-webkit-keyframes bounce 343{ 344 0% 345 { 346 -webkit-transform: translate3d(0, -500px, 0); 347 -webkit-animation-timing-function: ease-in; 348 } 349 70% 350 { 351 -webkit-transform: translate3d(0, 0, 0); 352 -webkit-animation-timing-function: ease-in; 353 } 354 85% 355 { 356 -webkit-transform: translate3d(0, -50px, 0); 357 -webkit-animation-timing-function: ease-out; 358 } 359 100% 360 { 361 -webkit-transform: translate3d(0, 0, 0); 362 -webkit-animation-timing-function: ease-in; 363 } 364} 365 366@-moz-keyframes bounce 367{ 368 0% 369 { 370 -moz-transform: translate(0, -500px); 371 -moz-animation-timing-function: ease-in; 372 } 373 70% 374 { 375 -moz-transform: translate(0, 0); 376 -moz-animation-timing-function: ease-in; 377 } 378 85% 379 {
380 -moz-transform: translate(0, -50px); 381 -moz-animation-timing-function: ease-out; 382 } 383 100% 384 { 385 -moz-transform: translate(0, 0); 386 -moz-animation-timing-function: ease-in; 387 } 388} 389 390p.again 391{ 392 font-size: 40px; 393 text-align: center; 394 width: 640px; 395 font-family: "joystix", monospace; 396 color: #fff; 397 margin-bottom: 40px; 398} 399 400.gameover p.pressanykey 401{ 402 position: relative; 403 top: 0; 404 display: block; 405} 406 407canvas 408{ 409 background: #000; 410 width: 640px; 411 height: 480px; 412 /* 413 -webkit-transform-origin: top center; 414 -webkit-transform: scale(2.0); 415 -moz-transform-origin: top center; 416 -moz-transform: scale(2.0); 417 transform: scale(2.0); 418 */ 419 -webkit-transform-origin: bottom center; 420 image-rendering: -moz-crisp-edges; 421 -ms-interpolation-mode: nearest-neighbor; 422} 423 424p#score 425{ 426 float: left; 427 font-family: "lilliput-steps", monospace; 428 font-size: 16px; 429} 430 431p#timer 432{ 433 float: right; 434 font-family: "lilliput-steps", monospace; 435 font-size: 16px; 436} 437 438p#hiscore 439{ 440 position: absolute; 441 left: 120px; 442 width: 400px; 443 text-align: center; 444 font-family: "lilliput-steps", monospace; 445 font-size: 16px; 446} 447 448p#hiscore.new 449{ 450 -webkit-animation: pressanykey 100ms 3 linear alternate; 451 -moz-animation: pressanykey 100ms 3 linear alternate; 452} 453 454#error 455{ 456 position: absolute; 457 left: 0; 458 top: 0; 459 width: 100%; 460 height: 100%; 461 background: #f00; 462 color: #000; 463 font-size: 3em; 464 z-index: 2; 465 text-align: center; 466} 467 468#error a 469{ 470 color: #000; 471} 472 473.footer 474{ 475 width: 640px; 476 margin: 0 auto; 477} 478 479#read 480{ 481 font-family: "lilliput-steps", monospace; 482 font-size: 12px; 483 text-align: left; 484} 485 486#read a 487{ 488 color: #060; 489} 490 491#read a:hover 492{ 493 color: #0f0; 494 text-decoration: none; 495} 496 497.share 498{ 499 float: right; 500 list-style: none; 501 margin: 0; 502 padding: 0; 503 font-family: "lilliput-steps", monospace; 504 font-size: 12px; 505 width: 180px; 506} 507 508.share li 509{ 510 width: 32px; 511 height: 32px; 512 margin-left: 4px; 513 float: right; 514} 515 516.share li a 517{ 518 display: block; 519 width: 32px; 520 height: 32px; 521 text-indent: -999em; 522 background: url(images/social.gif) no-repeat; 523} 524 525.share .delicious a 526{ 527 background-position: 0px 0; 528} 529 530.share .delicious a:hover 531{ 532 background-position: -32px 0; 533} 534 535.share .digg a 536{ 537 background-position: 0px -32px; 538} 539 540.share .digg a:hover 541{ 542 background-position: -32px -32px; 543} 544 545.share .facebook a 546{ 547 background-position: 0px -64px; 548} 549 550.share .facebook a:hover 551{ 552 background-position: -32px -64px; 553} 554 555.share .reddit a 556{ 557 background-position: 0px -96px; 558} 559 560.share .reddit a:hover 561{ 562 background-position: -32px -96px; 563} 564 565.share .stumbleupon a 566{ 567 background-position: 0px -128px; 568} 569 570.share .stumbleupon a:hover 571{ 572 background-position: -32px -128px; 573} 574 575.share .twitter a 576{ 577 background-position: 0px -160px; 578} 579 580.share .twitter a:hover 581{ 582 background-position: -32px -160px; 583} 584</style> 585
586<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
vendor: 1 bytes, line 586
586
587<script src="js/support.js?v=2.0" type="text/javascript"></script>
587 588<!--
588<script src="js/sprites.js?v=2.0" type="text/javascript"></script>
vendor: 1 bytes, line 588
588
589<script src="js/patterns.js?v=2.0" type="text/javascript"></script>
vendor: 1 bytes, line 589
589
590<script src="js/Game.js?v=2.0" type="text/javascript"></script>
vendor: 1 bytes, line 590
590
591<script src="js/main.js?v=2.0" type="text/javascript"></script>
591-->
592<script src="js/compiled.js?v=2.2" type="text/javascript"></script>
592 593
594<script type="text/javascript"> 595function trackShare() {} 596</script>
596 597 598<!--[if IE]> 599<style type="text/css" media="all"> 600</style> 601
602<script type="text/javascript"> 603</script>
603 604<![endif]--> 605 606<!-- begin auto analytics block -->
607<script type="text/javascript"> 608var _gaq = _gaq || []; 609_gaq.push(['_setAccount', 'UA-192935-6']); 610_gaq.push(['_trackPageview']); 611 612(function() { 613 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 614 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 615 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 616})(); 617</script>
617 618<!-- end auto analytics block --> 619 620</head> 621<body> 622 623<div class="hide"> 624<h1>Re-Infiltration at Dusk</h1> 625<h2>A sequel HTML5 videogame by Zachstronaut based on the song by Tettix</h2> 626<img src="//www.zachstronaut.com/projects/re-infiltration/re-infil-screenshot2.jpg" alt="Screenshot of gameplay." /> 627<p>That darn evil Artificial Intelligence is raiding the remaining human settlements of Earth again! New biomechanical horrors approach at nightfall. Your rusty old gun turret is the only hope for survival you have in this unique keyboard-mashing action game. (Author not responsible for finger cramps or broken keys.)</p> 628<p>Play this game in HTML5-ready browsers like Firefox, Chrome, Safari, and IE9. This game was built with JavaScript plus the Canvas and Audio HTML5 tags. I made this sequel as an entry into the Mozilla Labs Game On 2010 competition.</p> 629</div> 630 631<!--<p><span id="stop">stop</span> <span id="mute">mute</span></p>--> 632 633<div id="container"> 634 <p id="score">0000</p> 635 <p id="hiscore">HISCORE: <span id="hiscorenumber">??? ????</span></p> 636 <p id="timer">00:00</p> 637 <canvas moz-opaque="true" id="game" width="320" height="240"> 638 <p id="error">Your browser does not support this game, please try <a href="http://www.google.com/chrome/">Google Chrome</a> or <a href="http://www.firefox.com/">Firefox 3.6+</a> or <a href="http://apple.com/safari">Safari</a>.</p> 639 </canvas> 640 <div id="title"> 641 <p id="re_big">Re-</p> 642 <p id="loading">Loading…</p> 643 <p id="start" class="pressanykey">Click to Start</p> 644 <p id="mozilla_link"><a href="https://gaming.mozillalabs.com/games/finalists" target="_new">Mozilla Labs Game On Finalist</a></p> 645 <p id="zachstronaut_link"><a href="//www.zachstronaut.com" target="_new">Created By Zachstronaut<span></span></a></p> 646 <p id="tettix_link"><a href="http://www.tettix.net" target="_new">Music By Tettix</a></p> 647 </div> 648 <div class="gameover"> 649 <table class="leaders"> 650 <caption>HISCORES</caption> 651 <tbody> 652 <tr><td>???</td><td>????</td></tr> 653 <tr><td>???</td><td>????</td></tr> 654 <tr><td>???</td><td>????</td></tr> 655 <tr><td>???</td><td>????</td></tr> 656 <tr><td>???</td><td>????</td></tr> 657 </tbody> 658 </table> 659 660 <p class="again">Play Again!</p> 661 </div> 662</div> 663<div class="footer"> 664 <ul class="share"> 665 <li class="twitter"><a href="http://twitter.com/home?status=Play+Re-Infiltration+at+Dusk+http%3A%2F%2Fa.stronaut.com%2Fz1b+%23videogame+%23javascript" rel="nofollow" target="share" onclick="trackShare('twitter');">Twitter</a></li> 666 <li class="delicious"><a href="http://del.icio.us/post?v=4&noui&jump=close&url=https://www.zachstronaut.com/projects/re-infiltration/game.html&title=JavaScript+Video+Game%3A+Re-Infiltration+at+Dusk" rel="nofollow" target="share" onclick="trackShare('delicious');">del.icio.us</a></li> 667 <li class="facebook"><a href="http://www.facebook.com/share.php?u=https://www.zachstronaut.com/projects/re-infiltration/game.html" rel="nofollow" target="share" onclick="trackShare('facebook');">Facebook</a></li> 668 <li class="reddit"><a href="http://reddit.com/submit?url=https://www.zachstronaut.com/projects/re-infiltration/game.html&title=JavaScript+Video+Game%3A+Re-Infiltration+at+Dusk" rel="nofollow" target="share" onclick="trackShare('reddit');">reddit</a></li> 669 <li class="stumbleupon"><a href="http://www.stumbleupon.com/submit?url=https://www.zachstronaut.com/projects/re-infiltration/game.html&title=JavaScript+Video+Game%3A+Re-Infiltration+at+Dusk" rel="nofollow" target="share" onclick="trackShare('stumbleupon');">StumbleUpon</a></li> 670 </ul> 671 672 <!-- 673 <p id="read"><a href="//www.zachstronaut.com/posts/2010/07/08/javascript-video-game-infiltration.html" target="_blog">Click here to read about this game.</a> 674 <br /> 675 <a href="http://www.youtube.com/watch?v=JhvupyRdR5I" target="_youtube">Watch the tutorial video.</a></p>--> 676</div> 677<p id="debug"></p> 678 679</body> 680</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.