Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>tings</title>
        <style>
            canvas{
                border: 1px solid black;
            }
        </style>
        <script type="text/javascript">
        var cvs, ctx;
        var t = [];
        var mousePos = null;
        var player = null;
        var tla = [];
        var mapa = [];
        var W = 64, H = 64;
        var COL = 8, ROW = 8;
        var staticMeshes = [];

        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]);

            //code
        }
        function CreateMapaLanterns(){
            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]);

            //code
        }

        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, tla[0]);
                }else{
                    tilesTlo[r][c] = new Tile(r, c, 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(-100, -100, W, H, tla[0]);
        }
        function BoundingRect(p_x, p_y, p_w, p_h){
            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="sig.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">0</div>
    </body>
</html>