Autor Zpráva
Fisak
Profil
Dobrý den. Rád bych se optal Vás jako zkušenějších programátorů co bych měl v kódu změnit/upravit aby se mi výrazně kód zrychlil a nebo byl bezpečnější atd. Pokud by měl někdo k tomu připomínky tak sem s nimy (a ještě lepší rada je s živou ukázkou co by jste jak upravili). Jedná se o dynamickou změnu backgroundu který je jako mapka 209 čtverců který se pospojují do jednoho obrázku a pak se dají do background-images: url("...");
index.php
<script>

    function updateDb(smer) {   
        var datastring = 'move-game='+ smer;
        $.ajax({
        type: "POST",
        url: "game/components/move-game.php",
        data: datastring,
        success: function() {
             $("#ReloadThis").load("game/components/call-textures.php");
        }
        });
        return false;
    } 
        
   $(document).keydown(function(e){
    if (e.keyCode == 38) { 
       return updateDb('top');
    }
    });    
    $(document).keydown(function(e){
    if (e.keyCode == 40) { 
       return updateDb('bottom');
    }
    });    
    $(document).keydown(function(e){
    if (e.keyCode == 37) { 
       return updateDb('left');
    }
    });    
    $(document).keydown(function(e){
    if (e.keyCode == 39) { 
       return updateDb('right');
    }             
    }); 
</script>

<form method="post"  id="arrows" onsubmit="return false">
    <input type="image" src="images/img/nahoru.gif" id="nahoru-sipka-games" name="nahoru" value="Nahoru" onclick="return updateDb('top')"/>
    <input type="image" src="images/img/dolu.gif" id="dolu-sipka-games" name="dolu" value="Dolu" onclick="return updateDb('bottom')"/> 
    <span id='postava-games'></span> <?php echo $_SESSION['move_on']; ?>
    <input type="image" src="images/img/levo.gif" id="levo-sipka-games" name="doleva" value="Doleva" onclick="return updateDb('left')"/>
    <input type="image" src="images/img/pravo.gif" id="pravo-sipka-games" name="doprava" value="Doprava" onclick="return updateDb('right')"/>
    
</form>   
<span id="ReloadThis"></span> 
<script>
$("#ReloadThis").load("game/components/call-textures.php");
</script>
call-textures.php
<?php

session_start();

?>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> 

<?php

//nacteni db
require_once ("./../../system/config.php");

require_once ("./../../system/class/class.db.php");


DB::connect(array(
    'driver'   => _DB_TYPE_,
    'host'     => _DB_SERVER_,
    'username' => _DB_USER_,
    'password' => _DB_PASSWD_,
    'database' => _DB_NAME_,
    'charset'  => _DB_CHARSET_,
));

//prefix
DB::getSubstitutes()->pref = _DB_PREFIX_; 

      function MoveMapImg($x = 0, $y = 0) {

        $uss_textures_sql = DB::query("SELECT * FROM [ch_users_characters] where [id] = %i", $_SESSION['uss_character_id'], "%lmt", "1")->fetchAll();
        foreach ($uss_textures_sql as $n => $row_textures) {

        $border_top = $row_textures->position_y - 5 + $y;
        $border_bottom = $row_textures->position_y + 5 + $y;
        $border_left = $row_textures->position_x - 9 + $x;
        $border_right = $row_textures->position_x + 9 + $x;
        
        

//výpis výškových souřadnic
$map_y_sql = DB::query("SELECT DISTINCT [position_y] FROM [ch_map] where [position_z] = %i", $row_textures->position_z, " and [position_y] <= %i", $border_bottom, " and [position_y] >= %i", $border_top, "ORDER BY position_y")->fetchAll();
foreach ($map_y_sql as $n => $row_map_y) {

//výpis šířkových souřadnic
$map_x_sql = DB::query("SELECT * FROM [ch_map] where [position_y] = %i", $row_map_y->position_y, " and [position_x] <= %i", $border_right, " and [position_x] >= %i", $border_left, "ORDER BY position_x")->fetchAll();
foreach ($map_x_sql as $n => $row_map_x) { 

$map_img_echo = DB::query("SELECT [url_img] FROM [ch_map_img] where [id] = %i", $row_map_x->img_id);


echo ";".$map_img_echo->fetchSingle('url_img'); 

}

}
        
        }

      }
      //$_SESSION['move_on'] = MoveMapImg();
?>

<script>  
//kdyz pujdu nahoru 
$('<img/>').attr('src', './../../game/components/background-game.php?p=n<?php echo $to_top; echo MoveMapImg(0, -1); ?>').load(function() {
   $('body').css('background-image', "url(./../../game/components/background-game.php?p=n<?php echo $position; echo MoveMapImg(); ?>)");
});
//kdyz pujdu dolu
$('<img/>').attr('src', './../../game/components/background-game.php?p=n<?php echo $to_bottom; echo MoveMapImg(0, +1); ?>').load(function() {
   $('body').css('background-image', "url(./../../game/components/background-game.php?p=n<?php echo $position; echo MoveMapImg(); ?>)");
});
//kdyz pujdu doleva
$('<img/>').attr('src', './../../game/components/background-game.php?p=n<?php echo $to_left; echo MoveMapImg(-1, 0); ?>').load(function() {
   $('body').css('background-image', "url(./../../game/components/background-game.php?p=n<?php echo $position; echo MoveMapImg(); ?>)");
});
//kdyz pujdu doprava
$('<img/>').attr('src', './../../game/components/background-game.php?p=n<?php echo $to_right; echo MoveMapImg(+1, 0); ?>').load(function() {
   $('body').css('background-image', "url(./../../game/components/background-game.php?p=n<?php echo $position; echo MoveMapImg(); ?>)");
});
</script>

<style>
body {
 background-repeat: no-repeat;
 background-position: center;
 background-attachment:fixed;
 background-color:#FFFFFF;
}
</style>
background-game.php
<?php
session_start();

$im = imagecreatetruecolor(2352, 1456);
//$im = imagecreatetruecolor(1500, 900);

$white = imagecolorallocate($im, 255, 255, 255);
imagefill($im, 0, 0, $white);
//End Canvas

$vel = 112;

$p = 0;

$pieces_obr = explode(";", $_GET['p']); 

//$pieces_obr = explode(";", $_SESSION['move_on']); 

$images = array();

for ($y = 1; $y <= 11; $y++) {        //výška

for ($x = 1; $x <= 19; $x++) {        //šířka

    $p++;
    
    $sirka = $vel * $x;
    
    $vyska = $vel * $y;

    $images = imageCreateFromjpeg("./../../images/textures/".$pieces_obr[$p].".jpg");
    
    //if(empty($images[$pieces_obr[$p]])) $images[$pieces_obr[$p]] =  imageCreateFromjpeg("./../../images/textures/".$pieces_obr[$p].".jpg");
    
    imageCopyMerge($im, $images, $sirka, $vyska, 0, 0, $vel, $vel, 100);
}

}   

////-----------------------------------------------///////////////////

Header ("Content-type: image/jpeg"); 

//This will create the image!
Imagejpeg ($im);

ImageDestroy($images);        
Předem děkuji za odpovědi
peta
Profil
Fisak: Udelej jeden obrazek a pouzij css position + clip. Ajaxem poslej jen seznam id. Javascriptem pak nastavis pozici v css.
1,4,7,45
x = 45/10 = 4 * sirka obrazku = 4 * 20 = 100
y = 45%10 = 5 * vyska obrazku = 5 * 80 = 400
div.style.backgroundPosition = "-"+x+" -"+y;
Tahat 209 obrazku ze serveru znamena 209 pozadavku + 1kB hlavicka ke kazdemu z nich, takze jen 209kB maji hlavicky.
Fisak
Profil
peta:
a z toho se pak dá udělat background? Nemáte prosím nějaký hotový příklad abych viděl jak se to dělá? Jinak děkuji za tip :-)
peta
Profil
http://www.volny.cz/peter.mlich/hry/pexeso/pexeso.htm
http://www.volny.cz/peter.mlich/hry/pexeso/pismena.gif
http://www.volny.cz/peter.mlich/hry/sokoban.htm
http://www.volny.cz/peter.mlich/hry/soko.gif
Podobne se dela menu na hover efekt, posouvanim pozadi. Divim se, ze ses s tim jeste nesetkal.

Příklady na pozadí
Test clip
Test overflow

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0