Untitled

<!DOCTYPE html>

<html>
<head>
    <title>Minecraft Map</title>
    <style>
        canvas{
            border: 1px solid rgb(150,150,150);
        }
    </style>
    <script type="text/javascript">
        var cvs, ctx;
        var t = [];
        var mousePos = null;
        var player = null;

        var tla = [];
        var staticMeshes = [];

        var mapa = [];
        var TilesTlo = [];

        var TilesLantern = [];

        var W = 64 , H = 64;
        var COL =8 , ROW = 8;

        function getMousePos(evt){
          var rect = cvs.getBoundingClientRect();
          return{
            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
          };
        }
          function CreateMapa(){
          mapa.push([1,1,1,1, 1,1,1,1]);
          mapa.push([1,0,0,0, 0,0,0,1]);
          mapa.push([1,0,0,0, 0,0,0,1]);
          mapa.push([1,0,0,0, 0,0,0,0]);
          mapa.push([1,0,0,0, 0,0,0,0]);
          mapa.push([1,0,0,0, 0,0,0,1]);
          mapa.push([1,0,0,0, 0,0,0,1]);
          mapa.push([1,1,1,1, 1,1,1,1]);
          }

           function CreateMapaLanterns(){
          MapaLanterns.push([0,0,0,0, 0,0,0,0]);
          MapaLanterns.push([0,0,0,0, 0,0,0,0]);
          MapaLanterns.push([0,0,0,0, 0,0,1,0]);
          MapaLanterns.push([0,0,0,0, 0,0,0,0]);
          MapaLanterns.push([0,0,0,0, 0,0,0,0]);
          MapaLanterns.push([0,0,0,0, 0,0,1,0]);
          MapaLanterns.push([0,0,0,0, 0,0,0,0]);
          MapaLanterns.push([0,0,0,0, 0,0,0,0]);
          }

        function CreateTilesTlo(){
            for(var r = 0; r < ROW; r++){
                TilesTlo[r] = [];
                for(var c = 0; c < COL; c++){
                    if(mapa[r][c] === 1){
                        TilesTlo[r][c] = new Tile(c, r, W, H, tla[0]);
                    }else{
                        TilesTlo[r][c] = new Tile(c, r, W, H, null);
                    }
                }
            }
        }


        function Init(){
            tla.push(document.getElementById('img1'));
            staticMeshes.push(document.getElementById('lantern'));
            CreateMapa();
            CreateTilesTlo();

            cvs = document.getElementById("cvs");
            ctx = cvs.getContext("2d");

              t.push(new Pawn(100,100,W,H));
              t.push(new Pawn(200,200,W,H));
              t.push(new Pawn(300,300,W,H));
              t.push(new Pawn(400,400,W,H));

             player = new Pawn(0,0,W,H, tla[0]);

            }
            function BoundingRect (p_x, p_y, p_w, p_h,p_img){
             this.x = p_x;
             this.y = p_y;
             this.w = p_w;
             this.h = p_h;
             this.ToString = function (){
               return "{" + this.x + ";" + this.y + ";" + this.w + ";" + this.h + "}";
             };
            }

            function Pawn(p_x,p_y,p_w,p_h,p_img){
                this.x = p_x;
                this.y = p_y;
                this.w = p_w;
                this.h = p_h;
                this.img = p_img;
                this.boundingRect = new BoundingRect(
                    this.x - this.w / 2,
                    this.y - this.h / 2,
                    this.w, this.h
                );
                this.UpdateCoords = function (p_x, p_y){
                    this.x = p_x
                    this.y = p_y
                    this.boundingRect.x = this.x - this.w / 2;
                    this.boundingRect.y = this.y - this.h / 2;
                };
            }


            function Tile(p_x,p_y,p_w,p_h,p_img){
                this.x = p_x;
                this.y = p_y;
                this.w = p_w;
                this.h = p_h;
                this.img = p_img;
                this.boundingRect = new BoundingRect(
                    this.x - this.w / 2,
                    this.y - this.h / 2,
                    this.w, this.h
                );

            }

             function update(evt){
               mousePos = getMousePos(evt);
             }

            function Draw(){
             ctx.clearRect(0,0,cvs.width, cvs.height);

            document.getElementById("d1").innerHTML = t.length;

              for (var r = 0; r < TilesTlo.length; r++){
                for(var c = 0; c < TilesTlo[r].length; c++){
                  if(TilesTlo[r][c].img !== null){
                    ctx.drawImage(TilesTlo[r][c].img,
                                  TilesTlo[r][c].x * TilesTlo[r][c].w,
                                  TilesTlo[r][c].y * TilesTlo[r][c].h,
                                  TilesTlo[r][c].w,
                                  TilesTlo[r][c].h);
                  }
                }
              }

             player.UpdateCoords(mousePos.x,mousePos.y);

                 ctx.strokeStyle = "rgb(0,0,255)";
                ctx.strokeRect(
                    player.boundingRect.x,
                    player.boundingRect.y,
                    player.boundingRect.w,
                    player.boundingRect.h
                );
                ctx.drawImage(player.img,
                              player.boundingRect.x,
                              player.boundingRect.y,
                              player.boundingRect.w,
                              player.boundingRect.h)
            }
    </script>
</head>
<body onload="Init(); Draw();">
    <img id="img1" src="stonebrick.png" width="0" height="0"/>
    <img id="lantern" src="lantern.png" width="0" height=="0"/>
    <canvas id="cvs" width="512" height="512"
    onmousemove="update(event); Draw();">
        Browser does not support canvas...
    </canvas>
    <div id="d1"> </div>

</body>
</html>