Grille / Quadrillage en PHP

**Geoffrey74** · 29/04/2013, 22h18

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é

**andry.aime** · 30/04/2013, 09h03

Bonjour,

Tu peux utiliser la librairie GD, voici un tutoriel.

A+.

**Benjamin Delespierre** · 30/04/2013, 10h39

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Geoffrey74** · 30/04/2013, 12h51

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 :-\

**Benjamin Delespierre** · 30/04/2013, 13h24

C'est l'inclusion de jQuery qui foire alors. corrige ça

**Geoffrey74** · 30/04/2013, 16h22

J'ai une erreur sur la 1ere partie du css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.grid .row {
        margin-left: -5 px;
    }

Erreur d'analyse de la valeur pour «*margin-left*». Déclaration abandonnée.

Capte pas :-\

**Benjamin Delespierre** · 30/04/2013, 16h37

pourquoi y'a un espace après le 5 ??

**Geoffrey74** · 30/04/2013, 16h49

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 ?

**Benjamin Delespierre** · 30/04/2013, 16h56

La même mais en plus compatible:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Geoffrey74** · 30/04/2013, 16h58

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

Merci beaucoup, je vais "étudier" ce petit bout de code pour bien comprendre, merci en tous cas

**Benjamin Delespierre** · 30/04/2013, 17h20

Bon normalement il est exclu de mettre des tags PHP dans du CSS, c'est hyper moche. Mais bon, on va pas chipoter...

**Geoffrey74** · 30/04/2013, 18h04

Je les ai virés, je trouve ça moche aussi

**Benjamin Delespierre** · 30/04/2013, 18h45

c'est pour faire quoi au juste ton truc ?

**Geoffrey74** · 30/04/2013, 20h02

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 )

Grille / Quadrillage en PHP

Langage PHP

Discussions similaires

Partager

Partager