Anonymní profil peter – Programujte.com

 Zbytek css, marginy, border-lext, font-size a pod si najdi, jak se pise na jakpsatweb.cz, treba nebo oficialnich strankach prohlizecu, pripadne w3c (pouzijes treba google pro vyhledavani)

<style>
.result .radek1 {color:#ff0000;}
.result .radek2 {color:#00ff00;}
.result .radek3 {color:#0000ff;}
</style>

<div class=result>
<div class=radek1>xxx</div>
<div class=radek2>yyy</div>
<div class=radek3>zzz</div>
</div>

<div class=result>
<div class=radek1>aaa</div>
<div class=radek2>bbb</div>
<div class=radek3>ccc</div>
</div>

Jo, slo mi o ty tabulky dole, nemusite cist ten text.

Jinak souhlas, ze je dobre pouzit stare technologie. Html5 je nove a zatim ne zcela odladene. Spoustu veci treba jede v jednom prohlizeci, ale v druhem uz ne. Kdezto ty zakladni veci z html4 jedou vetsinou ve vsech.

MA - promin, ale podpora svg v prohlizecich je prinejmensim sporna. Prevazna uzivatelu xp ma defaul instalaci IE 5-6, ti lepsi 7 a nekteri 8. Xp IE9 nepodporuje. IE9 potrebujes na svg..

http://voormedia.com/blog/2012/10/creating-svg-vector-graphics-for-maximum-browser-compatibility
http://en.wikipedia.org/…rer_versions

Nevim, neni mi to jasne. Jsem pro obrazek :)
V tom FF resim pohyb kamenu po plose tak, ze mam vygenerovane pole se seznamem sousednich policek. Resp, to je mozna starsi kod, v tom novejsim to generuji podle obrazku. Ve tvem pripade by pak prilepeni statu znamenalo policko po policku zjistit, zda ma sousedy na hraci plose stejne jako v tom statu. kdyz ne, tak se tam nevleze.
Jestli to teda chapu spravne, ze mas neco jako hru na lode, ze rozmistujes lode po hraci plose.

http://mlich.zam.slu.cz/js-ff/ff4script.js
http://mlich.zam.slu.cz/js-ff/ff4b.htm
(soucasne je tam treba takove vylepseni, ze si ulozi vsechny nejkratsi cesty a ne jen prvni nalezenou a pak nahodne vybere)

jeste jedna vec, mozna. Proc tam provadis deleni? Nebude rychlejsi delit az tam, kde to pouzijes?

(*f1)[a][b]=1.0/(a-b); // delta: max / min
(*f2)[a][b]=(a-b)/a; // Saturation: delta / max

a kdyz uz tam delas deleni, nebylo by rychlejsi nasobeni a 1/a hodit pred ten cyklus na druhem radku?
z = 1/a;
zz = 1.0; // mozna i tu jednicku, ale tu asi neni treba
(*f1)[a][b]=zz / (a-b); // delta: max / min
(*f2)[a][b]=(a-b) * z; // Saturation: delta / max

V php treba pro cisla pouzivam zapisu 0xFF, kdyz chci 1 byte cislo a chci si byt jisty, ze mi tam nehodi integer. Nevim, jak se to dela v c++.

for (a=1; a<256; a++)
for (a=0; a<256; ++a) // nekdo psal, ze je dobre pouzivat ++a misto (mozna v jinem forku) a++ a mimochodem, cisla jsou 0-255 ne 1-255 (viz ondrej390 #17, ale to jsi psal, ze tam nepotrebujes)

(*f1)[a] = malloc((sizeof (float)) * a );
(*f2)[a] = malloc((sizeof (float)) * a ); // proc 2x po sobe delas stejnou operaci? proc to nezkopirujes z te prvni?

A proc tam mas vsude tolik prevodu, kdyz treba nejsou potreba. Staci mozna na zacatku.
 

(*f1)[a][b]=1.0/(a-b); // delta: max / min
(*f2)[a][b]=(a-b)/a; // Saturation: delta / max // printf("min:%d, max:%d\n",b,a);
c++;

x = a-b; // mozna to bude rychlejsi takto
(*f1)[a][b] = 1.0/x;
(*f2)[a][b] = x/a;
++c;

for (b=0; b<0+a-1; b++) // b = min
Jo, tohoto se lidi dopousti uplne nejvic, protoze je to tak v chytrych knizkach. Ale casove je to brzda.
y = 0+a-1;
for (b=0; b<y; ++b)
b<0+a-1 - to je podminka, takze v kazdem cyklu se musi provest scitani, protoze "a" je promenna a muze se zmenit uvnitr toho cyklu. Nevim, jestli to ma c++ nejak podchycene a sleduje to pri kompilaci, ale myslim, ze ne.

"Samozřejmě to mohu udělat obrázkama, ale zaujala mě možnost kreslení v css"
Ne. Zpet k obrazkum. Jestli je chces mit v css, tak css dnes uz snad vsude podporuje base64 zapis obrazku.
S svg jeste stale muze byt problem s podporou v prohlizecich. Vyhodou je, ze je to vektorova grafika, lze ji zoomovat bez ztrat. Nicmene, uz jsem tuto moznost zvazoval pro jeden web, kde vzhled menim jen zmenou barev pro ruzna odeleni a na to jsou funkce svg uplne suprove.

 Treba ti neco z toho bude fungovat. Najdi si googlem, jak se kresli v svg sipecky.

--- soubor.htm, svg v css i s kodem ---
<style>
img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

img.grayscale2 {
filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale2'><feColorMatrix type='matrix' values='0.299 0.587 0.114 0 0 0.299 0.587 0.114 0 0 0.299 0.587 0.114 0 0 0 0 0 1 0'/></filter></svg>#grayscale2"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

</style>
<img src="butt-spinavemodra.png" class="grayscale"><br>
<img src="butt-spinavemodra.png" class="grayscale2"><br>
<img src="butt-spinavemodra.png">

--- zapis v svg ---
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <filter id="desaturate1">
    <feColorMatrix
      type="matrix"
      values="0.3333 0.3333 0.3333 0 0
              0.3333 0.3333 0.3333 0 0
              0.3333 0.3333 0.3333 0 0
              0      0      0      1 0"/>
  </filter>
  <filter id="desaturate2">
    <feColorMatrix
      type="matrix"
      values="0.299 0.587 0.114 0 0
              0.299 0.587 0.114 0 0
              0.299 0.587 0.114 0 0
              0     0     0     1 0"/>
    </filter>
</svg>

--- dalsi jiny zapis ---
<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <style>
	svg {
		height: 0;
		}
	p {
		background-image: url("butt-spinavemodra.png");
		margin: 10px auto;
		filter: url(#grayscale);
		display: block;
		width: 250px;
		height: 100px;
		}
      </style>
      <title>SVG Filters - Grayscale Effect</title>
    </head>

    <body>
      <p>
        Test box
      </p>

      <p>
        Test box
      </p>

      <svg height="0" xmlns="http://www.w3.org/2000/svg">
        <filter id="grayscale">
          <feColorMatrix values="0.3333 0.3333 0.3333 0 0
                                 0.3333 0.3333 0.3333 0 0
                                 0.3333 0.3333 0.3333 0 0
                                 0      0      0      1 0" />
        </filter>
      </svg>
    </body>
</html>

obrazek v css - to je normalni prevod dat obrazku ze soustavy 0-255 do soustavy 0-63 za pouziti pismennych znaku AZaz09+/ a = http://cs.wikipedia.org/wiki/Base64
http://css-tricks.com/data-uris/ ;

base64 v html
<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />

base64 v css
li {
  background:   url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
    no-repeat
    left center;
  padding: 5px 0 5px 25px;
}

prevod v php do base64
<?php
  echo base64_encode(file_get_contents("../images/folder16.gif"))
?>

V nejhorsim pripade si muzes udelat editor mapy, kde si do pozadi das obrazek sveta a v popredi na nej kreslis sestiuhelnicky. Nemusis slozite vzit mapu statu a gelat program na vyplnovani sestiuhelniky, ktery muze selhat na nejake malickosti, kdyz a 5 min to mas prekreslene rucne editorem map, ktery pak snadno muze pouzit i hrac, treba.

Jak vypada vstup, jak vypada vystup, a co se s tim ma provest?
Neumis zmensit obrazek na urcite rozmery?
Neumis v obrazku detekovat uzavrenou oblast a prevest ji na setiuhelniky?

http://mujweb.cz/peter.mlich/hry/ff/ff.htm
planek resim tak, ze setiuhelniky jsou pozadi, pres to ma gif s vyrezanym stredem. Ve treti vrstve je html ctvercova tabulka s divy pro kameny (ctverci). A v posledni ctvrte, je jsou divy pro klikani. Cili, hrac klika na pruhledny ctverec, pod nim je dalsi pruhledny, kde je obrazek (tim docilim toho, ze obrazek muze byt vetsi nemo mensi nez oblast, kam se da kliknout).