topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

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



  <html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  
  <title>raycaster</title>
  <script type="text/javascript" src="graphic-canvas-example-raycaster-trace.js"></script>
  <link rel="stylesheet" type="text/css" href="trace.css">
  <script type="text/javascript" src="graphic-canvas-example-raycaster-input.js"></script>
  <script type="text/javascript" src="graphic-canvas-example-raycaster-player.js"></script>
  <script type="text/javascript" src="graphic-canvas-example-raycaster-level.js"></script>
  <script type="text/javascript" src="graphic-canvas-example-raycaster-raycaster.js"></script>
  
  <script type="text/javascript">
          var C2D, W, H, RC;
          var fps = 24;
          var mspf = 1000 / fps;
          var updateInterval;
          var quit = false;
          
          function main() {
                  var c = document.getElementById('canvas');
                  if (c.getContext) {
                          initializeCanvas(c);
                          var P = new Player(8);
                          var L = new Level();
                          RC = new RayCaster(C2D, W, H, 4, L, P, input);
                          if (initializeLevel()) {
                                  trace('map loaded successfully.');
                                  trace("now casting...");
                                  trace("  \'a\' - turn left");
                                  trace("  \'d\' - turn right");
                                  trace("  \'w\' - step forward");
                                  trace("  \'s\' - step backward");
                                  trace("  \'q\' - stop casting");
                                  updateInterval = window.setInterval("update()", mspf);
                          }
                          else {
                                  trace("map failed to load");
                          }
                  }
                  
                  else {
                          trace('sorry.. you\'ll need a browser that supports the canvas tag,');
                          trace('like Safari or Firefox 1.5+ to see this demo.');
                  }
          }
          
          function initializeCanvas(c) {
                          C2D = c.getContext('2d');
                          C2D.lineWidth = 1;
                          C2D.globalAlpha = 1;
                          C2D.globalCompositeOperation = 'source-over';
                          W = c.width;
                          H = c.height;
                          trace('canvas initialized');
          }
          
          function initializeLevel() {
                  var mapCells_x = 16;
                  var mapCells_y = 16;
                  var M = '' +
                          '  
  
  
  
' +





                          '#  @@@@@       #' +
                          '#  @   @ % # % #' +
                          '#  @       #   #' +
                          '#  @  @@       #' +
                          '#    &         #' +
                          '#   &   P      #' +
                          '#  &      &&   #' +
                          '#              #' +
                          '#  ##  #@%#@%  #' +
                          '#  #        #  #' +
                          '#   
      #  #' +


                          '#  #        #  #' +
                          '#    
  
 #  #' +



                          '#              #' +
                          '  
  
  
  
';





                  
                  trace('submitting map...');
                  return RC.loadMap(M, mapCells_x, mapCells_y);
          }
          
          function update() {
                  if (input.quit) {
                          input.quit = false;
                          window.clearInterval(updateInterval);
                          trace('raycaster halted.');
                  }
                  else {
                          RC.update();
                  }
          }
  </script>
  
  <style type="text/css">
  canvas {
          border: 2px solid #000;
          position: absolute;
          left: 33%;
          margin-left: 10px;
  }
  </style>
  </head><body onload="main();" onkeydown="press(event);" onkeyup="release(event);">
  <div id="trace" class="window"><ul><li>raycaster v.0.0.1</li><li>canvas initialized</li><li>submitting map...</li><li>player spawned at [544 416]</li><li>map loaded successfully.</li><li>now casting...</li><li>  'a' - turn left</li><li>  'd' - turn right</li><li>  'w' - step forward</li><li>  's' - step backward</li><li>  'q' - stop casting</li></ul></div>
  <canvas id="canvas" width="320" height="240"></canvas>
  </body></html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(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.