hmm... help.. ISO

Khamoaset · Mesajde **Khamoaset** » Mar Oct 29, 2013 2:31 pm

Salutare, tuturor!

Am incercat sa fac harta isometrica... insa aici ma depaseste pozitionarea ... cum pot umple si cele goluri sa iasa perfect fara goluri tile.. ??

#js

Cod: Selectaţi tot

$(document).ready(function(){
    
    var x,y,x_pos,y_pos,map_draw,offset;
    var size_map = 10;
    var offset = -((size_map / 2)*0);
    
    for(x=0; x<size_map; x++){
        for(y=0; y<size_map; y++){
            x_pos = (x * 106);
            y_pos = (y * 54) - offset;
            
            map_draw += "<div class='tile_sample' style='position:absolute; left:"+x_pos+"px; top:"+y_pos+"px;'></div>";
        }
    }
    
    $("#map").append( map_draw );
    
});

#html

Cod: Selectaţi tot

<div id="map"></div>

#css

Cod: Selectaţi tot

.tile_sample {
    width: 106px;
    height: 54px;
    background: url('http://uploadimage.ro/img.php?image=8269_desert1e_ocaa.png') no-repeat;
}

... astept un ajutor..
Cu stima, Khamoaset!

tanatos · Mesajde **tanatos** » Vin Noi 01, 2013 8:46 am

Cod: Selectaţi tot

$(document).ready(function(){   
        var map_draw = '';
        var size_map = 10;
        
        for(var x = 0; x < size_map; x++) {
            for(var y = 0; y < size_map; y++) {
                var x_pos = y_pos = 0;
                
                x_pos = ((x * 106) - ((x+1) * 53));
                y_pos = ((y * 54) - ((y+1) * 27));
                
                map_draw += "<div class='tile_sample' style='position:absolute; left:"+x_pos+"px; top:"+y_pos+"px;'></div>";
            }
        }
        
        $("#map").append( map_draw );
    });

Si css-ul :

Cod: Selectaţi tot

#map {
        position: relative;
        width: 503px;
        height: 250px;
        overflow: hidden;
}
.tile_sample {
        position:absolute;
        left: 0;
        top: 0;
        display: block;
        width: 106px;
        height: 54px;
        background: url('http://uploadimage.ro/img.php?image=8269_desert1e_ocaa.png') no-repeat;
}

Khamoaset · Mesajde **Khamoaset** » Vin Noi 01, 2013 8:06 pm

Salut, tanatos.... sunt inguste tile-urile...

tanatos · Mesajde **tanatos** » Sâm Noi 02, 2013 6:47 am

Cod: Selectaţi tot

<!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="content-type" content="text/html" />

   <title>Map</title>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){   
        var map_draw = '';
        var size_map = 10;
        var width = $("#map").width();
        
        for(var i = 0; i < size_map; i++) {
            for(var j = 0; j < size_map; j++) {
                var x_pos = y_pos = x = y = 0;
                
                x = j * 53;
                y = i * 54;
                
                x_pos = ((width / 2) - 50) + (x - y);
                y_pos = ((x + y) / 2) + 2;
                
                console.log(x_pos+"x"+y_pos);
                map_draw += "<div class='tile_sample' style='position:absolute; left:"+x_pos+"px; top:"+y_pos+"px;'></div>";
            }
        }
        
        $("#map").append( map_draw );
    });
    </script>
    
    <style>
    #map {
        background-color: #cccccc;
        position: relative;
        width: 1080px;
        height: 540px;
        overflow: hidden;
    }
    .tile_sample {
        position:absolute;
        left: 0;
        top: 0;
        display: block;
        width: 106px;
        height: 54px;
        background: url('http://uploadimage.ro/img.php?image=8269_desert1e_ocaa.png') no-repeat;
    }
    </style>
</head>

<body>

<div id="map"></div>

</body>
</html>

Khamoaset · Mesajde **Khamoaset** » Sâm Noi 02, 2013 11:27 am

Sal, tanatos.... dar asta e ok in forma diamond... dar forma stagger cum fac ca asta din imagine.. ??? Imagine

Cu stima, Khamoaset!

tanatos · Mesajde **tanatos** » Dum Noi 03, 2013 6:33 am

Hmm , ma intreb oare de ce nu ai specificat de la inceput ce vrei...

Cod: Selectaţi tot

$(document).ready(function(){   
        var map_draw = '';
        var size_map_x = 9;
        var size_map_y = 19;
        var width = $("#map").width();
        
        for(var i = 1; i <= size_map_y; i++) {
            for(var j = 1; j <= size_map_x; j++) {
                var x_pos = y_pos = x = y = 0;
                
                if(i % 2 == 0) {
                    x_pos = ((i-1) * 53);
                    y_pos = ((j-1) * 54) + 27;
                    
                    console.log("FIRST");
                } else {
                    x_pos = ((i-1) * 53);
                    y_pos = ((j-1) * 54);    
                }
                
                console.log(x_pos+"x"+y_pos);
                map_draw += "<div class='tile_sample' style='position:absolute; left:"+x_pos+"px; top:"+y_pos+"px;'></div>";
            }
        }
        
        $("#map").append( map_draw );
    });

Khamoaset · Mesajde **Khamoaset** » Dum Noi 03, 2013 3:50 pm

Sal, tanatos... dar de ce o data scade si o data creste numarul atunci cand dai refresh... am incercat sa pun size_map_x = 30 si size_map_y = 30... imi arata numa 11 pe randurile X... iar pe Y pana la 29 (asta e ok)... dar pe cele X = I ... nu stiu de ce scade.. cum remediez calculul sa ramana fara a scade sau a creste... ?

tanatos · Mesajde **tanatos** » Lun Noi 04, 2013 7:41 am

Cod: Selectaţi tot

#map {
        background-color: #cccccc;
        position: relative;
        width: 1080px;
        height: 540px;
        overflow: hidden;
    }

overflow: hidden ?!?

Khamoaset · Mesajde **Khamoaset** » Lun Noi 04, 2013 9:00 am

Sal, tanatos... chiar daca am scos 'overflow: hidden;' .. tot asa face scaderea si adunarea pe axa X... uite http://jsbin.com/OfOlOra/7/edit

tanatos · Mesajde **tanatos** » Lun Noi 04, 2013 12:13 pm

1. aveai erori in codul de pe js bin, uite-l reparat :

Cod: Selectaţi tot

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <meta charset="utf-8" />
    <title>JS Bin</title>
    
    <script>
    $(document).ready(function() {
        var map_draw = '';
        var size_map_x = 19;
        var size_map_y = 19;
        var width = $("#map").width();
        
        var calc_w = Math.floor( size_map_y * 106 )+'px';
        var calc_h = Math.floor( size_map_x * 54 )+'px';
        
        $("#map").css({
          'width': calc_w,
          'height': calc_h
        });
        
        function MultiDimensionalArray(iRows,iCols) {
         var i,j,a;
         a = new Array(iRows);
         for (i=0; i < iRows; i++) {
            a[i] = new Array(iCols);
            for (j=0; j < iCols; j++) {
               a[i][j] = "";
            }
         }
         return(a);
      } 

      var mapArray = MultiDimensionalArray(size_map_x,size_map_y);
      for (var x=1; x  < size_map_x; x++) {
         for (var y=1; y < size_map_y; y++) {
            mapArray[x][y] = "tile_sample";
         }
      }
        
        mapArray[1][1] = "tile_terrain";
        mapArray[4][4] = "tile_mountain";
        mapArray[9][5] = "tile_terrain";
        
        for(var i = 1; i <= size_map_y; i++) {
            for(var j = 1; j <= size_map_x; j++) {
                var x_pos = 0;
                var y_pos = 0;
                var sile = i+':'+j;
                
                if(i % 2 === 0) {
                    x_pos = ((i-1) * 53);
                    y_pos = ((j-1) * 54) + 27;
                    
                    console.log("FIRST");
                } else {
                    x_pos = ((i-1) * 53);
                    y_pos = ((j-1) * 54);    
                }
                
                var tile = (mapArray.hasOwnProperty(i) && mapArray[i].hasOwnProperty(j)) ? mapArray[i][j] : 'tile_sample';
                
                console.log(x_pos+"x"+y_pos);
                map_draw += "<div class='"+tile+"' style='position:absolute; left:"+x_pos+"px; top:"+y_pos+"px;'>"+sile+"</div>";
            }
        }
        
        $("#map").append( map_draw );
    });
    </script>
    
    <style>
    #map {
        background-color: #cccccc;
        position: relative;
    }
    .tile_sample, .tile_mountain, .tile_terrain {
        text-align: center;
        vertical-align: middle;
    }
    .tile_sample {
        position:absolute;
        left: 0;
        top: 0;
        display: block;
        width: 106px;
        height: 54px;
        background: url('http://uploadimage.ro/img.php?image=8269_desert1e_ocaa.png') no-repeat;
    }

    .tile_mountain {
        position:absolute;
        left: 0;
        top: 0;
        display: block;
        width: 106px;
        height: 54px;
        background: url('http://uploadimage.ro/img.php?image=0667_desert2_o5di.png') no-repeat;
    }

    .tile_terrain {
        position:absolute;
        left: 0;
        top: 0;
        display: block;
        width: 106px;
        height: 54px;
        background: url('http://uploadimage.ro/img.php?image=5548_2_b9v5.png') no-repeat;
    }
    </style>
</head>
<body>
     <div id="map" class="map"></div>
</body>
</html>

2. Vezi imaginea atasata sa vezi ca functioneaza correct (1:1, 2:1 .... 19:1) , deci le pune pe toate si merge pana la 19:19. Nu stiu ce nu intelegi...

Khamoaset · Mesajde **Khamoaset** » Lun Noi 04, 2013 4:52 pm

Salut... hmm... tot asa scade... dar ia dai la jsbin mereu pe 'Run with JS' ... sa vezi ca scade si creste... ia incearca sa pui map_size_x si map_size_y cu 30 sa vezi ca arata numa pana la 11 tile... nu pana la cat e setat cele 2 axe.. a 30..

hmm... help.. ISO

hmm... help.. ISO

Re: hmm... help.. ISO

Re: hmm... help.. ISO

Re: hmm... help.. ISO

Re: hmm... help.. ISO

Re: hmm... help.. ISO

Re: hmm... help.. ISO

Re: hmm... help.. ISO

Re: hmm... help.. ISO

Re: hmm... help.. ISO

Re: hmm... help.. ISO

Cine este conectat