topical media & game development

talk show tell print

graphic-canvas-example-canvascape-level.htm / htm



  <!DOCTYPE HTML>
  <html lang="en-AU"><head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1252">
  
  <title>www.benjoffe.com | Canvascape</title>
  <meta name="author" content="Benjamin Joffe">
  <meta name="Content-Script-Type" content="text/javascript">
  <meta name="Content-Style-Type" content="text/css">
  <style><!-- @import "/css/main.css"; --></style>
  <link rel=stylesheet type=text/css href=graphic-canvas-example-canvascape-style.css>
  <script type="text/javascript" src="graphic-canvas-example-canvascape-main.js"></script><style type="text/css"><!-- @import "style.css"; --></style>
  </head><body>
  <div id="benjoffe">
      <div id="head">
          <h1>Ben Joffe</h1>
      </div>
      <ul id="nav">
          <li><a href="http://www.benjoffe.com/">Home</a>        </li><li><a href="http://www.benjoffe.com/code/">Code</a>        </li><li><a href="http://www.benjoffe.com/contact">Contact</a>    </li></ul>
      <div id="content">        
  <h2>Canvascape - "3D Walker"</h2>
  
  <canvas id="underMap" width="80" height="80"></canvas>
  <canvas id="map" width="80" height="80"></canvas>
  <a id="code" href="http://www.benjoffe.com/code/demos/canvascape/code.js">code.js</a>
  
  <div id="holder" style="clear: both;">
      <div style="background-position: -153px 0pt;" id="sky"></div>
      <div id="floor"></div>
      <canvas id="canvas" width="400" height="300"></canvas>
      <div id="overlay"></div>
  </div>
  
  <p>Use the arrow keys to walk around the map. Space bar = jump. B = Shoot.</p>
  <p>What you are seeing is a test using the Canvas tag to demonstrate its capability. See also: <a href="http://www.benjoffe.com/code/demos/canvascape/textures">textured version</a>.</p>
  <p>IE support provided using <a href="http://excanvas.sourceforge.net/">ExplorerCanvas</a>.</p>
  
  <script type="text/javascript" src="graphic-canvas-example-canvascape-level.js"></script>
  <script type="text/javascript" src="graphic-canvas-example-canvascape-excanvas.js"></script>
  
      </div>
      <div id="foot">
          <p>
              © 2009 Benjamin Joffe<span style="display: none;"> | <a href="http://www.benjoffe.com/es/code/demos/canvascape/">en español</a></span><!-- not enough pages have been translated yet to show the link to users -->
              
          </p>
      </div>
  </div>
  </body></html>
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.