Team:Calgary/VGSandbox

From 2012.igem.org

(Difference between revisions)
 
(44 intermediate revisions not shown)
Line 1: Line 1:
-
 
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<!DOCTYPE html>
+
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
-
<html lang="en">
+
<head>
-
  <head>
+
<title>iGEMGameV1_1</title>
-
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
      <title>Asteroids [Reloaded] - HTML5 Canvas JavaScript Game Demo by Kevin Roast</title>
+
<style type="text/css" media="screen">
-
      <script src="scripts/soundmanager2-min.js"></script>
+
html, body { height:100%; background-color: #ffffff;}
-
      <script>
+
body { margin:0; padding:0; overflow:hidden; }
-
var soundManagerLoaded = false;
+
#flashContent { width:100%; height:100%; }
-
soundManager.flashVersion = 9;
+
</style>
-
soundManager.useFastPolling = true;
+
</head>
-
soundManager.useHighPerformance = true;
+
<body>
-
soundManager.onready(function() {
+
<div id="flashContent">
-
  soundManagerLoaded = true;
+
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="480" id="iGEMGameV1_1" align="middle">
-
});
+
<param name="movie" value="iGEMGameV1_1.swf" />
-
soundManager.ontimeout(function() {
+
<param name="quality" value="high" />
-
  soundManagerLoaded = true;
+
<param name="bgcolor" value="#ffffff" />
-
  soundManager = false;
+
<param name="play" value="true" />
-
});
+
<param name="loop" value="true" />
-
soundManager.url = 'swf/';
+
<param name="wmode" value="window" />
-
      </script>
+
<param name="scale" value="showall" />
-
      <script src="../canvask3d/scripts/mathlib-min.js"></script>
+
<param name="menu" value="true" />
-
      <script src="scripts/gamelib-min.js"></script>
+
<param name="devicefont" value="false" />
-
      <script src="scripts/asteroids-min.js"></script>
+
<param name="salign" value="" />
-
      <script async defer src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
+
<param name="allowScriptAccess" value="sameDomain" />
-
      <script async defer src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e4813104686cad8"></script>
+
<!--[if !IE]>-->
-
      <style type="text/css">
+
<object type="application/x-shockwave-flash" data="iGEMGameV1_1.swf" width="640" height="480">
-
body
+
<param name="movie" value="iGEMGameV1_1.swf" />
-
{
+
<param name="quality" value="high" />
-
  font-family: Segoe UI Light, Arial, Helvetica;
+
<param name="bgcolor" value="#ffffff" />
-
  font-size: 1.1em;
+
<param name="play" value="true" />
-
  background-color: #000;
+
<param name="loop" value="true" />
-
  color: #ddd;
+
<param name="wmode" value="window" />
-
  background-image: url(images/asteroid_bg.jpg);
+
<param name="scale" value="showall" />
-
  background-repeat: no-repeat;
+
<param name="menu" value="true" />
-
  margin: 0;
+
<param name="devicefont" value="false" />
-
}
+
<param name="salign" value="" />
-
 
+
<param name="allowScriptAccess" value="sameDomain" />
-
.box-shadow
+
<!--<![endif]-->
-
{
+
<a href="http://www.adobe.com/go/getflash">
-
  -moz-box-shadow: 3px 3px 6px #222;
+
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
-
  -webkit-box-shadow: 3px 3px 6px #222;
+
</a>
-
  box-shadow: 3px 3px 6px #222;
+
<!--[if !IE]>-->
-
}
+
</object>
-
 
+
<!--<![endif]-->
-
canvas
+
</object>
-
{
+
</div>
-
  background-color: #000;
+
</body>
-
  border: 1px solid #888;
+
-
}
+
-
 
+
-
.wrapper
+
-
{
+
-
  padding-top: 12px;
+
-
  text-align: center;
+
-
}
+
-
 
+
-
.info
+
-
{
+
-
  text-align: left;
+
-
  display: inline-block;
+
-
  vertical-align: top;
+
-
  margin-left: 0.5em;
+
-
}
+
-
 
+
-
.infopanel
+
-
{
+
-
  max-width: 22em;
+
-
  margin-top: 64px;
+
-
  background-color: rgba(40,40,50,.85);
+
-
  color: #fff;
+
-
  line-height: 1.25em;
+
-
  padding: 0.5em;
+
-
}
+
-
 
+
-
.title
+
-
{
+
-
  font-size: 1.75em;
+
-
  padding-top: 6px;
+
-
  padding-bottom: 12px;
+
-
  text-align: center;
+
-
  color: #fff;
+
-
  text-shadow: 1px 1px 4px rgb(60,60,60);
+
-
  line-height: 1em;
+
-
}
+
-
 
+
-
.highlight
+
-
{
+
-
  color: #ffff88;
+
-
}
+
-
 
+
-
.section
+
-
{
+
-
  padding-top: 0.5em;
+
-
}
+
-
 
+
-
.heading
+
-
{
+
-
  font-size: 1.2em;
+
-
  text-shadow: 1px 1px 3px rgba(55,55,55, .5);
+
-
}
+
-
 
+
-
.credits-wrapper
+
-
{
+
-
  text-align: center;
+
-
}
+
-
 
+
-
.credits
+
-
{
+
-
  display: inline-block;
+
-
  padding: 4px 64px;
+
-
  margin: 8px;
+
-
  text-align: center;
+
-
  background-color: rgba(40,40,50,.85);
+
-
  font-size: 0.8em;
+
-
}
+
-
 
+
-
P
+
-
{
+
-
  padding-left: 1em;
+
-
  padding-top: 0;
+
-
  padding-bottom: 0;
+
-
  line-height: 1.1em;
+
-
  margin-top: 0;
+
-
  margin-bottom: 0.66em;
+
-
}
+
-
 
+
-
P.left
+
-
{
+
-
  padding-left: 0.5em;
+
-
  line-height: 1.25em;
+
-
}
+
-
 
+
-
a, a:visited, a:active, a:hover
+
-
{
+
-
  color: #ddddff;
+
-
}
+
-
 
+
-
.results
+
-
{
+
-
  color: white;
+
-
  padding-bottom: 0.25em;
+
-
}
+
-
 
+
-
.results-wrapper
+
-
{
+
-
  display: none;
+
-
  font-size: 1.0em;
+
-
  border: 2px solid grey;
+
-
  background-color: rgba(48,48,48,0.75);
+
-
  padding: 0.5em;
+
-
  margin-top: 1em;
+
-
  line-height: 1.25em;
+
-
  text-align: center;
+
-
}
+
-
 
+
-
.button-overlay
+
-
{
+
-
  position: absolute;
+
-
  right: 1em;
+
-
}
+
-
      </style>
+
-
      <meta name="description" content="Asteroids - HTML5 Canvas and JavaScript demo by Kevin Roast - an example of what can be achieved without a Flash plugin using the canvas 2D APIs" />
+
-
  </head>
+
-
 
+
-
  <body style="background-color: #000000">
+
-
      <div class="button-overlay">
+
-
        <!-- AddThis Button BEGIN -->
+
-
        <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
+
-
        <a class="addthis_button_preferred_1"></a>
+
-
        <a class="addthis_button_preferred_2"></a>
+
-
        <a class="addthis_button_compact"></a>
+
-
        <a class="addthis_counter addthis_bubble_style"></a>
+
-
        </div>
+
-
        <!-- AddThis Button END -->
+
-
      </div>
+
-
      <div class="wrapper">
+
-
        <canvas class="box-shadow" id="canvas" width="640" height="640"></canvas>
+
-
        <div class="info">
+
-
            <div class="infopanel box-shadow">
+
-
              <div class="title">Asteroids [Reloaded]</div>
+
-
              <div class="settings">
+
-
                  <p class="left heading">Instructions:</p>
+
-
                  <p>Left and Right Arrows: Rotate ship</p>
+
-
                  <p>Up Arrow: Thrust</p>
+
-
                  <p>SPACE: Fire main weapon(s)</p>
+
-
                  <p>Z: Fire bomb weapon (area effect, uses energy)</p>
+
-
                  <p>Down Arrow or SHIFT: Shield (will recharge...)</p>
+
-
                  <p class="highlight section">S: Enable or disable sound effects</p>
+
-
                  <p class="highlight">R: Switch between Modern and Retro graphics</p>
+
-
                  <p class="highlight">Escape: Pause the game</p>
+
-
              </div>
+
-
              <div id="results-wrapper" class="results-wrapper">
+
-
                  <div class="results" id="results"></div>
+
-
                  <div class="results"><a id="tweetlink" href="#" target="new">Tweet your high score...</a></div>
+
-
              </div>
+
-
              <div>
+
-
                  <p class="left section"><a href="./index-debug.html">Asteroids DEBUG page</a></p>
+
-
              </div>
+
-
              <div>
+
-
                  <p class="left"><a href="http://www.google.co.uk/chrome" target="new">Chrome</a> | <a href="http://www.apple.com/safari/download" target="new">Safari</a> | <a href="http://www.mozilla.com/firefox" target="new">FireFox</a> | <a href="http://www.opera.com/download" target="new">Opera</a> | <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home" target="new">IE9</a></p>
+
-
              </div>
+
-
              <div>
+
-
                  <p class="left"><a href="asteroids-src.zip">Download JavaScript source code</a></p>
+
-
              </div>
+
-
              <div>
+
-
                  <p class="left"><a href="../index.html">HTML5 Canvas demos and experiments</a></p>
+
-
              </div>
+
-
              <div>
+
-
                  <p class="left" style="font-size: 0.75em;padding-top:4px">Contact me by email: kevtoast at yahoo.com</p>
+
-
              </div>
+
-
            </div>
+
-
        </div>
+
-
      </div>
+
-
      <div class="credits-wrapper">
+
-
        <div class="credits box-shadow">
+
-
            Game by Kevin Roast - written to learn the <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas-element" target="new">HTML5 Canvas API</a> while reading about the concepts in <a href="http://www.amazon.co.uk/exec/obidos/ASIN/0123742978" target="new">this book on game maths</a>.<br>
+
-
            <a href="http://twitter.com/kevinroast" target="new">Follow me on Twitter</a> - Last updated: 9th December 2011
+
-
        </div>
+
-
      </div>
+
-
  </body>
+
</html>
</html>

Latest revision as of 21:54, 7 September 2012

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> iGEMGameV1_1

Retrieved from "http://2012.igem.org/Team:Calgary/VGSandbox"