Advertisement
Guest User

HTML5 canvas tile based map not showing up

a guest
Jul 21st, 2014
478
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // Declares global variables
  2. var canvas = document.createElement("canvas");
  3.     c = canvas.getContext("2d"),
  4.     make = {},
  5.     maps = {},
  6.     width = 800,
  7.     height = 600;
  8.  
  9. // Creates the requestAnimationFrame variable
  10. (function () {
  11.     var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  12.     window.requestAnimationFrame = requestAnimationFrame;
  13. }) ();
  14.  
  15. // Modifies the canvas' properties
  16. canvas.width = width,
  17. canvas.height = height;
  18.  
  19. // 2D arrays that make up maps
  20. maps = {
  21.     one: [
  22.     ["w","w","w","w","w","w","w","w"],
  23.     ["w","o","o","o","o","o","o","w"],
  24.     ["w","o","w","w","w","w","o","w"],
  25.     ["w","o","w","o","o","o","o","w"],
  26.     ["w","o","w","o","w","o","o","w"],
  27.     ["w","o","w","o","o","w","o","w"],
  28.     ["w","o","o","o","o","o","o","w"],
  29.     ["w","w","w","w","w","w","w","w"]
  30.     ],
  31.  
  32.     two: [
  33.     ["w","w","w","w","w","w","w","w"],
  34.     ["w","o","o","o","o","o","o","w"],
  35.     ["w","o","o","o","o","o","o","w"],
  36.     ["w","o","o","o","o","o","o","w"],
  37.     ["w","o","o","o","o","o","o","w"],
  38.     ["w","o","o","o","o","o","o","w"],
  39.     ["w","o","o","o","o","o","o","w"],
  40.     ["w","w","w","w","w","w","w","w"]
  41.     ]
  42. };
  43.  
  44. // Maps drawing functions
  45. make = {
  46.     map: function ( map2d ) {
  47.         var i,
  48.             j,
  49.             tile,
  50.             tilesX = 8,
  51.             tilesY = 8;
  52.  
  53.         for (i = 0; i < tilesX; i++) {
  54.             for(j = 0; j < tilesY; j++) {
  55.                 if (map2d[i][j] === "w") {
  56.                     this.tile(i * 64, j * 64);
  57.                 }
  58.             }
  59.         }
  60.     },
  61.  
  62.     tile: function (x, y, TD) {
  63.         switch (TD) {
  64.             case "w":
  65.                 c.rect(x, y, 64, 64);
  66.                 c.fillStyle = wallColor;
  67.                 c.fill();
  68.                 c.lineWidth = 8;
  69.                 c.strokeStyle = "black";
  70.                 c.stroke();
  71.                 break;
  72.  
  73.             case "o":
  74.                 c.rect(x, y, 64, 64);
  75.                 c.fillStyle = "white";
  76.                 c.fill();
  77.                 c.lineWidth = 8;
  78.                 c.strokeStyle = "white";
  79.                 c.stroke();
  80.                 break;
  81.         }
  82.     }
  83. }
  84.  
  85. // Updates constantly
  86. function update () {
  87.     c.clearRect(0, 0, width, height);
  88.     make.map(maps.two);
  89.     requestAnimationFrame(update);
  90. }
  91.  
  92. // Begins updating when window is ready
  93. window.addEventListener("load", function () {
  94.     update();
  95. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement