Générer un plateau en javascript uniquement avec des Div
Bonjour,
Voila je rencontre un petit problème avec mon code. J'essai de reproduire une grille 10 x 10, uniquement avec des div, un espece de plateau de jeu. Je sais le faire en HTML5 mais jaimerais le faire en js uniquement. J'ai developpé des petites applications, des petits projets mais jamais je n'ai jamais tenté de faire un jeu. Je ne connais pas canvas. J'arrive à generer 10 div de haut en bas comment fait on pour generer un plateau complet ? Est ce qu'il faudrait definir une largeur et une hauteur ? Comment travailler sur les axes X et Y ?Merci d'avance pour vos réponses
Ce que je fais
contenu est une div pour accueillir le plateau.
var doc = document.getElementById('contenu');
var compte = 0;
for (var i = 0; i < 10; i++) {
var divElts = document.createElement('div');
divElts.style.width = '20px';
divElts.style.height = '20px';
divElts.style.backgroundColor = '#e59999';
divElts.style.border = 'solid 1px black';
divElts.setAttribute('id', compte++);
doc.appendChild(divElts);
}
9 réponses
ben il va effectivement que tu joue avec la canvas je pense.. si tu veux faire de l'animation fluide, ce sera le mieux.
pour ce qui est de boucler en X et en Y, voila ce que je te propose
var doc = document.getElementById('contenu');
const DIV_HEIGHT = '20px';
const DIV_WIDTH = '20px';
const BORDER_SIZE = 1;
for (var y = 0; y < 10; y++) {
for (var x = 0; x < 10; x++) {
var divElts = document.createElement('div');
divElts.style.position = 'absolute';
divElts.style.width = DIV_WIDTH;
divElts.style.height = DIV_HEIGHT;
divElts.style.top = (DIV_HEIGHT) + BORDER_SIZE * y; // 2 correspond a ta bordure (1px de chaque coté)
divElts.style.left = (DIV_WIDTH) + BORDER_SIZE * x;
divElts.style.backgroundColor = '#e59999';
divElts.style.border = 'solid '+BORDER_SIZE+'px black';
divElts.setAttribute('id', 'pos_'+x+'_'+y);
doc.appendChild(divElts);
}
}Comme je t'ai dit, c'est a intégrer dans une balise canvas. ca sera beaucoup mieux pour la suite.
qu´elle est cette manie de toujourd mettre jquery partous... reduire le code de ta page en charhent une grosse lib monolithique quels interets? le vanilla est plus performant que jquery... et tu n´as pas besoin de charger une lib inutillement.....
Bonjour Merci à tous de vos réponses. Alors oui je connais jQuery mais jaimerais m'en détacher un peu et apprendre à travailler un peu plus avec Javascript pur.
@Blackomodo C'est juste une question de préference j'ai beaucoup utilisé jQuery au début de mon apprentissage, je m'aperçois que jQ me limite en javascript pur et je commençais à avoir la manie de mettre jQuery partout. J'aimerais juste devenir meilleur en javascript pur. Voilà juste un point de vue assez perso finalement. Merci à toi
@keulu Je vais tester ta solution Je savais qu'il fallait jouer avec les axes x et y mais je ne savais pas comment m'y prendre. Mille mercis pour ton code je vais dans un premier temps l'étudier le comprendre etc et je le mettrais en oeuvre.
Edit : Si je le teste tel quel sans le mettre dans une balise canvas ça me donne un un seul carré ( la div), si je regarde dans élement outils dev de google je vois bien qu'une grille a été générée mais tous les élèments sont empilés. Je vais suivre ton conseil et mettre le code en place dans une balise canvas. J'ai enlevé la position absolute ça me donne une colonne remplie de div, exactement ce que j'avais fait aussi. Sauf que je suis sûr que ton code est bon il y a juste un décalage qui ne se fait pas ça me donne une colnne tout ça sur le meme axe haut en bas rien de gauche à droite.
@Blackomodo, merci je vais tester ton code. Non son code me fait seulement un carré une div toutes les autres sont empîleés au même endroit je vois ça avec les outils dev de google, pourtant je suis sûr que son code est bon mais quelque chose fait que les cases sont empilées les unes sur les autres. J'ai mis resolu avant de tester.
Ton code correspond bien je vais virer la br car je veux que tout soit collé ajouter des bordure pour bien voir des cases, je vais faire un mixe de vos deux codes j'aurais exactement ce que je souhaite. Un grand Merci car grace à ton code je comprends mieux le principe. Quoi qu'il en soit vous m'avez vraiment filé un bon coup de main. Un grand merci
je me suis planté :
divElts.style.top = (DIV_HEIGHT) + BORDER_SIZE * y; // 2 correspond a ta bordure (1px de chaque coté)
divElts.style.left = (DIV_WIDTH) + BORDER_SIZE * x;a remplacer par :
divElts.style.top = (DIV_HEIGHT + BORDER_SIZE) * y; // 2 correspond a ta bordure (1px de chaque coté)
divElts.style.left = (DIV_WIDTH + BORDER_SIZE) * x;@keulu Merci beaucoup. Effectivement c'est mieux, c'est surtout la position absolute qu'il allait pas je l'ai modifiée contre une position inline-block et là c'est parfait. Merci beaucoup à toi tu m'as bien aidé ;)
yep j'ai fait ca from scratch sans tester, le position absolute n'etait peut etre pas bon. bon le principale, c'est que tu ai compris la logique :)