NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
Josef Kuchař - Pepa489
Tvůrce
Avatar
Josef Kuchař - Pepa489:9.5.2015 15:42

Ahoj,
Na canvas jsem si vykreslil "mapu" pomocí tohoto kódu:

var real_x = 400;
var real_y = 200;
var context;

var MAP_X = 8;
var MAP_Y = 8;
var MAP_Z = 8;

var map = new Array(MAP_X);
for (var i = 0; i < MAP_X; i++)
{
    map[i] = new Array(MAP_Y);
}
for (var i = 0; i < MAP_X; i++)
{
    for (var j = 0; j < MAP_Y; j++)
    {
        map[i][j] = new Array(MAP_Z);
        }
}

for(var x = 0; x < map.length; x++)
{
        for(var y = 0; y < map[0].length; y++)
        {
                for(var z = 0; z < map[0][0].length; z++)
                {
                        map[x][y][z] = 1;
                }
        }
}

/*    x  y  z
 *map[0][0][0]
 */


$( document ).ready(function()
{
        var canvas = document.getElementById('canvas');
        context = canvas.getContext('2d');
});

function drawMap()
{
        for(var z = 0; z < map[0][0].length;z++)
        {
                for(var y = 0; y < map[0].length;y++)
                {
                        for(var x = 0; x < map.length;x++)
                        {
                                if(map[x][y][z] == 1)
                                {
                                        tmp_x = real_x;
                                        tmp_y = real_y;

                                        tmp_x -= (img.width / 2) * x
                                        tmp_y += (img.width / 4) * x

                                tmp_x += (img.width / 2) * y;
                                tmp_y += (img.height / 4) * y;

                                tmp_y -= (img.height / 2) * z;
                                        context.drawImage(img, tmp_x, tmp_y);
                                }
                        }
                }
        }
}

var img = new Image();
img.onload = function() {
        drawMap();
}

img.src = "img/cube.png";

A potřeboval bych po kliknutí odstranit blok na který bylo kliknutu, vím, že to je hodně složité, ale prosím o pomoc

Odpovědět
9.5.2015 15:42
2x piš, jednou debuguj
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Josef Kuchař - Pepa489
Michal Žůrek - misaz:9.5.2015 17:35

nevím jak se to řeší v jQuery, ale normálně nastavíš událost onclick, kde ti v parametrech přijde objekt ve kterým je pozici kliknutí uložena.

 
Nahoru Odpovědět
9.5.2015 17:35
Avatar
Josef Kuchař - Pepa489
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Josef Kuchař - Pepa489:9.5.2015 17:52

Mohl by si to prosím trochu rozvést?

Nahoru Odpovědět
9.5.2015 17:52
2x piš, jednou debuguj
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Josef Kuchař - Pepa489
Michal Žůrek - misaz:9.5.2015 19:28

nastavíš onclick na funkci co přijímá parametr (pojmenuješ si ho "e") a pak si zapneš debuger a podíváš se jak se jmenuje vlastnost v tom objektu e s hodnotami offseru X a offsetu Y. pokud se jedná o 3D mapu, tak si to budeš muset dopočítat.

 
Nahoru Odpovědět
9.5.2015 19:28
Avatar
Josef Kuchař - Pepa489
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Josef Kuchař - Pepa489:9.5.2015 21:47

No to vím, ale jak to dopočítat?

Nahoru Odpovědět
9.5.2015 21:47
2x piš, jednou debuguj
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Josef Kuchař - Pepa489
Michal Žůrek - misaz:9.5.2015 22:05

Úplně stejně jako to počítáš při vykreslování?

 
Nahoru Odpovědět
9.5.2015 22:05
Avatar
Josef Kuchař - Pepa489
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Josef Kuchař - Pepa489:10.5.2015 10:39

Dobrá myšlenka, jen jak ty výpočty převrátit, abych dostal souřadnice xyz bloku?
Btw. Už dostávám souřadnice pomocí event listeneru
Zatím ale stejně díky za pomoc, budu nad tím přemýšlet, kdyby si mi napsal jak to převrátit, byl bych ti moc vděčný... :)

Nahoru Odpovědět
10.5.2015 10:39
2x piš, jednou debuguj
Avatar
Josef Kuchař - Pepa489
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Josef Kuchař - Pepa489:10.5.2015 13:08

Vzdávám to, tím že se mapa vykresluje tak, že se obrázky překreslují, nejde určit na jaký blok bylo kliknuto...

Nahoru Odpovědět
10.5.2015 13:08
2x piš, jednou debuguj
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Josef Kuchař - Pepa489
Michal Žůrek - misaz:10.5.2015 13:27

určit to samozřejmě jde způsobem, že prostě označíš ten blok který je nahoře a teď už jen zjistit jak na to.

 
Nahoru Odpovědět
10.5.2015 13:27
Avatar
Josef Kuchař - Pepa489
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Josef Kuchař - Pepa489:10.5.2015 14:34

No právě zkouším to už od rána a stejně na to pořád nemůžu přijít

Nahoru Odpovědět
10.5.2015 14:34
2x piš, jednou debuguj
Avatar
Josef Kuchař - Pepa489
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Josef Kuchař - Pepa489:10.5.2015 16:06

Nakonec to udělám pomocí crafty.js: http://craftyjs.com/, http://craftyjs.com/…s/isometric/, ale i tak díky za pomoc :)

Nahoru Odpovědět
10.5.2015 16:06
2x piš, jednou debuguj
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 11 zpráv z 11.