Untitled

<!DOCTYPE html>

<html>
<head>
    <title>heheszki</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 W = 64 , H = 64;
        var COL = 8, ROW = 8;
        var mapa =[];
        var tilesTlo =[];
        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,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,1]);
            mapa.push([1,1,1,1, 1,1,1,1]);
          }

          function CreateMapaLanters() {
            mapaLanterns.push([1,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,0,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,0,0]);
            mapaLanterns.push([0,0,0,0, 0,0,1,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(r, c, W, H, obrazki[0]);

            }else{
                tilesTlo[r][c] = new Tile(r, c, W, H, null);
            }
           }
          }
          }

        function Init(){
            tla.push(document.getElementById('img1'));
            staticMeshes(document.getElementById('lanters'));
            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, obrazki[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 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 !== nu0ll){
                   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)
            }
            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
                );

            }
    </script>
</head>

<body onload="Init(); Draw();">
    <img id="lantern" src="lantern.png" width="0" height="0"/>
    <img id="img1" src="xd.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>