Grille / Quadrillage en PHP

Version imprimable

29/04/2013, 23h18
Geoffrey74

Grille / Quadrillage en PHP

Bonsoir à tous,

j'essaie de me lancé dans une mission impossible, et je bloque déjà au début ^^

J'aimerai pouvoir créer un quadrillage en php. La taille n'a pas d'importance pour le moment.

J'ai regarder un peu les outils php mais je n'ai pas trouver ce que je cherchais.
Dans mes souvenir j'en ai déjà utiliser lorsque j'étais étudiant pour des stats météos, mais impossible de remettre la main dessus.

A savoir qu'après, j'aimerai pouvoir, au survole du quadrillage, coloré certaines cases (avec du js par exemple), donc si possible que se soit compatible.

Je demande juste une idée de base, bien entendu je cherche de mon coté :)
30/04/2013, 10h03
andry.aime

Bonjour,

Tu peux utiliser la librairie GD, voici un tutoriel.

A+.

Si tu veux pouvoir animer ta grille avec du JS, tu peux la faire avec du CSS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<?php
 
// Configuration de la grille
 
$grid_width  = 10; // largeur de la grille
$grid_height = 10; // hauteur de la grille
$cell_width  = 25; // largeur d'une cellule
$cell_height = 25; // hauteur d'une cellule
$gutter      = 5;  // espacement des cellules
 
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grid</title>
    <style type="text/css" media="screen">
    .grid .row {
        margin-left: -<?=$gutter?>px;
    }
 
    .grid .row:after {
        content: " ";
        visibility: hidden;
        display: block;
        height: 0;
        clear: both;
    }
 
    .grid .cell {
        display: block;
        float: left;
        margin-left: <?=$gutter?>px;
        margin-bottom: <?=$gutter?>px;
        width: <?=$cell_width?>px;
        height: <?=$cell_height?>px;
        border: 1px solid #ddd;
        border-top: none;
        border-left: none;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function () {
        $('.cell').hover(
            function () {
                $(this).css('background', '#eee');
            },
            function () {
                $(this).css('background', 'white');
            }
        );
    });
    </script>
</head>
<body>
    <div class="grid">
    <? for ($w=0; $w<$grid_width; $w++): ?>
        <div class="row">
        <? for ($h=0; $h<$grid_height; $h++): ?>
            <span class="cell"></span>
        <? endfor ?>
        </div>
    <? endfor ?>
    </div>
</body>
</html>

C'est tellement simple que c'est même pas drôle :mouarf:

30/04/2013, 13h51
Geoffrey74

Pas simple pour tous le monde, même avec ce que tu me donne j'ai une erreur ^^

$ is not defined

Pourtant la librairie est bien chargée :-\
30/04/2013, 14h24
Benjamin Delespierre

C'est l'inclusion de jQuery qui foire alors. corrige ça ;)
30/04/2013, 17h22
Geoffrey74
J'ai une erreur sur la 1ere partie du css :
Code:

1 2 3 .grid .row { margin-left: -5 px; }
Erreur d'analyse de la valeur pour «*margin-left*». Déclaration abandonnée.

Capte pas :-\
30/04/2013, 17h37
Benjamin Delespierre

pourquoi y'a un espace après le 5 ??
30/04/2013, 17h49
Geoffrey74

Parce que je suis un boulet :-$

EDIT: Donc là j'ai un petit carré qui s'affiche, comment je fais pour en avoir X horizontale et x verticale ?

La même mais en plus compatible:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<?php
 
// Configuration de la grille
 
$grid_width  = 11; // largeur de la grille
$grid_height = 11; // hauteur de la grille
$cell_width  = 50; // largeur d'une cellule
$cell_height = 50; // hauteur d'une cellule
$gutter      = 5;  // espacement des cellules
 
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grid</title>
    <style type="text/css" media="screen">
    body {
        background-color: #efefef;
    }
 
    .grid .row {
        margin-left: -<?php echo $gutter?>px;
    }
 
    .grid .row:after {
        content: " ";
        visibility: hidden;
        display: block;
        height: 0;
        clear: both;
    }
 
    .grid .cell {
        display: block;
        float: left;
        margin-left: <?php echo $gutter?>px;
        margin-bottom: <?php echo $gutter?>px;
        width: <?php echo $cell_width?>px;
        height: <?php echo $cell_height?>px;
        border: 1px solid #ccc;
        border-top: none;
        border-left: none;
        cursor: pointer;
        background: white;
        -webkit-transition: background 200ms linear;
        -moz-transition: background 200ms linear;
        -ms-transition: background 200ms linear;
        -o-transition: background 200ms linear;
        transition: background 200ms linear;
    }
 
    .grid .cell:hover {
        background-color: DarkOrange;
    }
    </style>
    </head>
<body>
    <div class="grid">
    <?php for ($w=0; $w<$grid_width; $w++): ?>
        <div class="row">
        <?php for ($h=0; $h<$grid_height; $h++): ?>
            <span class="cell"></span>
        <?php endfor ?>
        </div>
    <?php endfor ?>
    </div>
</body>
</html>

30/04/2013, 17h58
Geoffrey74

C'est du grand art ( à mon niveau ! )

Merci beaucoup, je vais "étudier" ce petit bout de code pour bien comprendre, merci en tous cas ;)
30/04/2013, 18h20
Benjamin Delespierre

Bon normalement il est exclu de mettre des tags PHP dans du CSS, c'est hyper moche. Mais bon, on va pas chipoter...
30/04/2013, 19h04
Geoffrey74

Je les ai virés, je trouve ça moche aussi :D
30/04/2013, 19h45
Benjamin Delespierre

c'est pour faire quoi au juste ton truc ?
30/04/2013, 21h02
Geoffrey74

En fait j'ai un jeu de style d'ogame, et je voudrais proposé la possibilité de placer ses bâtiments un peu comme à la manière de SimCity, donc un bâtiment prendra par exemple 4cases (2x2), et au survol du quadrillage sa s'affiche vert si c libre ou rouge si c pas libre.

Donc je pars de loin, mais j'arriverai à mes fins quoi qu'il arrive ^^
(Je maitrise beaucoup plus PHP et JS que le css )