+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Les réalisations de la communauté (https://jeuweb.org/forumdisplay.php?fid=39)
+--- Forum : Jeux jouables (https://jeuweb.org/forumdisplay.php?fid=52)
+--- Sujet : [MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans! (/showthread.php?tid=6385)
RE: [MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans! - Xenos - 12-03-2015
Pas sûr d'avoir tout suivit, mais des formes géométriques avec des bordures, cela me semble être du SVG (en <embed/> si besoin)
RE: [MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans! - starmindfr - 12-03-2015
pas evident le png vu que le bord incliné gauche est different du droit il faut jongler avec un centre a repeter en fonction de la taille d'ecran ?
pour le svg je me méfie des problemes de compatibilité, je tenterais demain voir si je trouve un bout de code qui passe bien sous IE
En tout cas merci @lucard le html passe bien.
RE: [MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans! - Xenos - 12-03-2015
Niveau compatibilité, SVG se défend quand même vachement bien... Il n'y a que IE8 et moins qui ne le considèrent pas.
IE8, c'est 2.60% de part de marché. Pour un élément de décoration, ca me semble franchement négligeable.
RE: [MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans! - starmindfr - 12-03-2015
oui je testerai sinon petit bug etrange l'image de fond - carte est un jpg avec un usemap, et des que l'image est chargée les 3/4 des backgrounds disparaissent dont le fameux bandeau j'ai verifier les z-index et enlever les couleurs transparentes rien n'y fait, c'est comme si la superposition avec le jpeg désactivait les ::before / after
edit : cela semble lier au "position" si je met en absolute tout re apparait mais evidemment tout est en vrac apres
RE: [MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans! - starmindfr - 13-03-2015
Bonjour
En svg j'ai donc trouvé ce genre de code :
Code PHP :
<?php
<svg width="0" height="0">
<clipPath id="clipShape">
<polygon points="960 2,960 53,624 54,594 85,362 86,325 53,3 51,2 3">
</polygon>
</clipPath>
</svg>
Le probleme c'est de le rendre "dynamique" pour que le pavé s'adapte a la taille de l'ecran
J'ai pas exemple ca en JS qui permet de generer la liste des points et les adapter avec quelques lignes en plus mais il y a plus simple peut etre ?
Code PHP :
<?php
function create() {
var svg = createSVG('canvas');
var poly = drawPoly("960 2,960 53,624 54,594 85,362 86,325 53,3 51,2 3", "#cc3333", "#660000");
svg.appendChild(poly);
}
function createSVG(container) {
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
svg.setAttribute('version', '1.1');
svg.setAttribute('id', 'id'); //id for reffering your svg
var canvas = document.getElementById(container); //id of your container element
width = canvas.getBoundingClientRect().width;
height = canvas.getBoundingClientRect().height;
svg.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
svg.setAttribute('preserveAspectRatio', 'none');
canvas.appendChild(svg);
return svg;
}
function drawPoly(points, fill, stroke) {
var poly = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
poly.setAttribute("points", points);
poly.setAttribute("stroke", stroke);
poly.setAttribute('fill', fill);
//svg.appendChild(poly); //where svg is referring to your sag element
return poly;
}
RE: [MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans! - Xenos - 13-03-2015
SVG est à la fois une image, qui peut donc s'adapter à la taille que tu souhaites, et aussi un élément de DOM (s'il a été incrusté dans le code HTML).
Je suis pas sûr d'avoir compris le but du jeu, mais voici quelques cas:
• Etirer l'image SVG sur la largeur de l'écran → {CSS background-image + background-size + width} || {tag <img/> dont le @src pointe sur le fichier image SVG + CSS width} || {tag SVG au @width=100% + SVG preserve-aspect ratio none}
• Répéter l'image sur la largeur de l'écran → {CSS background + background-repeat + width}
• Répéter l'image sur la largeur de l'écran, un nombre entier de fois (ne pas couper en deux un triangle par ex) → { CSS border-image}
• Répéter le triangle dans l'image SVG → SVG patterns
RE: [MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans! - starmindfr - 13-03-2015
Bonjour merci
donc j'ai fait un svg ici et j'ai intégré le code dans le jeu ca marche bien sur firefox : http://mechaswar.com/test75.html
mais pas moyen sous IE 10 je n'ai pas très bien compris le embed.
A noter que c'est directement la mise en forme du cadre qui ne marche pas, sans aller chercher le code de resize.
RE: [MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans! - @lucard - 13-03-2015
RE: [MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans! - starmindfr - 13-03-2015
Intéressant @lucard mais ca ne passe pas chez moi en IE
PS : j'ai deja l'ensemble pas mal fonctionnel aussi sous firefox, j'ai basculer ton profil jeu sur l'affichage de test (il faut rouvrir la fenetre)
Sinon sous IE j'ai réussit a afficher un début (la forme est la mais pratiquement hors de la fenêtre en haut a droite) en truquant et le code n'est plus compatible Firefox ...
Ca revient a mettre en plus une forme "rectangulaire" dans le svg assez grande genre 1000*1000 et lui appliquer les points définis juste au dessus, sans passer par le css :
Code PHP :
<?php
<svg width="0" height="0"
viewPort="0 0 0 0" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="myClip">
<polygon id='poly' points="960 0,960 50,620 50,600 80,360 80,340 50,0 50,0 0" >
</polygon>
</clipPath>
</defs>
<rect x="0" y="0" width="1000" height="1000"
clip-path="url(#myClip)"/>
</svg>
mais la firefox bye bye ...
RE: [MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans! - starmindfr - 13-03-2015
edit : ha bha forcement les bordures fluos c'est pas gagné sur une forme polygonale en 2 parties :p