index.html

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>SURVIVOR (1982 Commodore 64 game remake)</title>
 <meta name="description" content="A playable HTML + CSS + JavaScript remake of a space-based &quot;shoot-'em-up&quot; arcade game, including a level editor and design tool. Written as a prototype / demo of JavaScript and browser capabilities. Original Atari 2600 game by Richard Carr, (C) 1982 Synapse Software. Created for the C64 by Ewing Soft (1983.)" />
 <meta name="keywords" content="Survivor, JavaScript, HTML, DHTML, animation, CSS3, arcade, retro, space, shooter, arcade game, browser game, commodore 64" />
 <meta name="author" content="Scott Schiller" />
 <!--
 /** @license
  *
  * SURVIVOR: A HTML + CSS + JavaScript prototype
  * based on the Commodore 64 version of Survivor from 1983
  *
  * http://schillmania.com/survivor/
  * http://www.schillmania.com/content/entries/2012/survivor-c64-html-remake/
  * http://www.flickr.com/photos/schill/sets/72157628885315581/
  * https://github.com/scottschiller/SURVIVOR
  *
  * Scott Schiller wrote this beginning in December 2011, while on a plane to Hawaii.
  * Code provided under the Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) License:
  * http://creativecommons.org/licenses/by-nc/3.0/
  *
  */

  /**
   * ADDITIONAL PAGE DEBUG OPTIONS / PARAMETERS
   * ?html5audio=1 - prefer HTML5 audio, if available (at own risk)
   * ?profile=1 - shows a performance panel with live DOM stats, options to show/hide groups of DOM elements
   * ?debug=1 - green blocks everywhere on the grid.
   * ?mute=1 - I hate sound
   * ?interval=1 - force setInterval() instead of requestAnimationFrame (if available)
   */
 -->
 <link rel="stylesheet" href="css/survivor.css" />
 <!-- see script/soundmanager2.js for full, commented version -->
 <script src="script/soundmanager2-nodebug-jsmin.js"></script>
 <script src="script/survivor.js"></script>
 <!-- on schillmania.com -->
 <script src="/common/stats.js"></script>
</head>

<body>

<div>

<div id="screens">

 <ul id="screen-list">

  <li id="boot-screen">

   <div id="c64">

    <div id="c64-body">

     <h1>**** COMMODORE 64 BASIC V2 ****</h1>
  
     <h2>64K RAM SYSTEM&nbsp;&nbsp;38911 BASIC BYTES FREE</h2>

     <p>READY.<p>

     <div id="loading0" class="loading">

      <p>LOAD"SURVIVOR-2012",8,1</p>

      <br />

     </div>

     <p id="loading1" class="loading">SEARCHING FOR SURVIVOR-2012</p>

     <p id="loading2" class="loading">LOADING</p>

     <div id="go_go_go">

      <p>READY.</p>

      <p>RUN</p>

     </div>

    </div>

    <div id="cursor"></div>

   </div>

  </li>

  <li id="title-screen">

   <div id="title-content">

    <div id="title-header">

     <h1>SURVIVOR 2012</h1>

    </div>

    <h2>A HTML + CSS + JavaScript prototype, based on the Commodore 64 version of Survivor from 1983.</h2>

    <h3>
     <!-- <marquee> has been outlawed and deprecated for a while, now. We'll do evil things with CSS, to mimic it. -->
     <span class="marquee">
      <span class="marquee-text">Original Atari 2600 game by Richard Carr, (C) 1982 Synapse Software. Created for the C64 by Ewing Soft (1983.)</span>
     </span>
    </h3>

   </div>

  </li>

  <li id="help-screen">

   <div class="c64 bd">
    <div class="wrapper">

     <p>It's 1982, and you're playing an arcade game. Of course it has a space theme -- it's 1982. Your mission: Destroy everything you can.</p>

     <h3>CONTROLS</h3>

     <p>Arrow keys drive the ship. SHIFT or CTRL can be used to fire (for the fastest firing rate, hold the key down.) Use the SPACE BAR to fire "smartbombs", which will kill any bad guys that happen to be chasing you.</p>

     <h3>HOW TO PLAY</h3>

     <p>The goal: Destroy the bases by shooting out the turrets attached to them. When all turrets are dead on a base, it will explode. When all bases are dead, you will pass the level.</p>

     <p>Avoid crashing into "spaceballs" (green asteroid slimeball-like things), and shoot or steer clear of "bad guys" that will occasionally appear and chase you. As you destroy each, the speed of the game will increase slightly.</p>

     <h3>ABOUT</h3>

     <p>SURVIVOR was originally written for the Atari 2600 home arcade game system in 1982, and was ported in 1983 to the popular Commodore 64 computer system. This is a browser-based remake, written in 2012, that is a tribute to the spirit of the Commodore 64 version. It is a browser-based prototype demonstrating (and admittedly, ironically,) how HTML + CSS + JavaScript can be used to emulate games designed for hardware that existed thirty years prior.</p>

    </div>
   </div>

  </li>

  <li id="level-end-sequence">
    <!-- generated explosion elements end up here -->
  </li>

  <li id="level-passed-screen">

   <div class="c64 bd">
    <div class="wrapper">
     <p style="text-align:center">*** LEVEL PASSED ***</p>
     <br />
     <p>This is the part where the game would say "level 2" and you would then get to replay the same scene, but with everything sped up -- since it was 1982, this was a way to make games increasingly difficult at the time.</p>
     <p>Your mission, should you accept it: Repeat the level you just passed, but with everything moving around you 25% faster.</p>
     <p>Thanks for playing!</p>
     <div id="level-passed-stats"></div>
    </div>
   </div>

  </li>

  <li id="game-over-screen">

   <div class="c64 bd">
     <p>"Game over man, game over!"</p>
     <div id="game-over-stats">
       <!-- scores, stats and crap go here -->
     </div>
   </div>

  </li>

 </ul>

</div>

<div id="world-container">

 <div id="world">
    <!-- blocks, walls, bases and turrets end up here -->
 </div>

 <div id="footer">

  <div id="debug-panel">

   <div class="debug-header">Debug options</div>

    <form id="debug-form" action="." method="post" onsubmit="return false">

     <ul class="compact">

      <li><input id="disable-pulse" type="checkbox" /> <label for="disable-pulse">world pulse effect</label></li>
      <li><input id="hide-block" type="checkbox" /> <label for="hide-block">blocks</label></li>
      <li><input id="hide-wall" type="checkbox" /> <label for="hide-wall">walls</label></li>
      <li><input id="hide-spaceball" type="checkbox" /> <label for="hide-spaceball">spaceballs</label></li>
      <li><input id="hide-turret-gunfire" type="checkbox" /> <label for="hide-turret-gunfire">turret gunfire</label></li>
      <li><input id="hide-turret" type="checkbox" /> <label for="hide-turret">turrets</label></li>
      <li><input id="hide-bad-guy" type="checkbox" /> <label for="hide-bad-guy">bad guys</label></li>
      <li><input id="hide-ship" type="checkbox" /> <label for="hide-ship">ship</label></li>
      <li><input id="hide-ship-gunfire" type="checkbox" /> <label for="hide-ship-gunfire">ship gunfire</label></li>
      <li><input id="disable-sprites" type="checkbox" /> <label for="disable-sprites">sprites</label></li>
      <li><input id="disable-css3" type="checkbox" /> <label for="disable-css3">CSS3 effects</label></li>

     </ul>

     <div class="debug-header">DOM stats</div>

      <ul>

       <li><code title="number of these elements in #world">#world &lt;div&gt;</code>: <span id="debug-div-count" class="count">0</span></li>
       <li><code title="number of these elements in #world">#world &lt;div&gt;.block</code>: <span id="debug-div-block-count" class="count">0</span></li>
       <li><code title="number of these elements in #world">#world &lt;div&gt;.wall</code>: <span id="debug-div-wall-count" class="count">0</span></li>
       <li><code title="number of these elements in #world">#world &lt;div&gt;.turret</code>: <span id="debug-div-turret-count" class="count">0</span></li>

      </ul>

      <div class="debug-header">Moving objects in view</div>

       <ul>

        <li><span title="number of active turret fire elements">turret gunfire</span>: <span id="debug-turret-fire-count" class="count">0</span></li>
        <li><span title="number of active spaceballs">spaceballs</span>: <span id="debug-spaceball-count" class="count">0</span></li>
        <li><span title="number of active bad guys">bad guys</span>: <span id="debug-badguy-count" class="count">0</span></li>

       </ul>

      </form>

     </div>

     <div id="stats">
      <a id="help" href="#help" onclick="return false" title="Help, keyboard controls and about the game" class="cta help">?</a>
      <span class="divider">|</span>
      <a href="http://www.schillmania.com/content/entries/2012/survivor-c64-html-remake/" title="Making-of, development notes, screenshots and background info">More &raquo;</a>
      <span class="divider">|</span>
      fps: <span id="fps">N/A</span>
     </div>

     <div id="game-state">
      <!-- lives, score, smartbombs etc. -->
      <a id="remix" href="editor.html" title="Create your own level with blocks, walls and turrets" class="cta">Create a level</a>
      <span class="divider">|</span>
      <span id="original">
       <span id="tweeter">
        <a href="#" title="Looks like you designed something. Challenge your friends to beat it!" onclick="return false" class="cta tweeter">twitter</a>
        <span class="divider">|</span>
       </span>
       <a href="./" title="Play the default level from the original game">Play the original level</a>
       <span class="divider">|</span> 
      </span>
      Score: <span id="points">0</span>
      <span class="divider">|</span> 
      Lives: <span id="lives">0</span>
      <span class="divider">|</span>
      Smartbombs: <span id="smartbombs">0</span>
      <span class="divider">|</span>
      Background music: <a href="http://www.youtube.com/watch?v=btPJPFnesV4&amp;list=PLBAB23D461827111C" rel="nofollow" title="Popular songs from 1982 and 1983, when the original 'Survivor' game was released." target="yt_survivor">arcade era</a> (1982-83) / <a href="http://www.youtube.com/watch?v=PWcaPIOiD_0&amp;list=PLB4B5B0B78FB29258" rel="nofollow" title="A few random songs, not limited to 80's hits." target="yt_survivor">modern</a> (2012)
    </div>

   </div>

   <noscript>Don't forget to enable JavaScript.</noscript>

  </div>

</div>

</body>

</html>