Déplacer des éléments dans une page HTML?

Anselmedu25 -  
 Anselmedu25 -
Bonjour!

Alors voilà je voudrais savoir si il est possible de bouger par exemple une image sur un document HTML mais avec du JavaScript (le positionner). Comment bouger un élément lorsqu'un bouton est cliquer en HTML? Merci.

PS: c'est pour essayer les conception d'un jeu.

3 réponses

  1. Atropa Messages postés 2051 Statut Membre 274
     
    bonjour,

    si tu veux concevoir un jeu en javascript, il faut que tu apprennes le langage.
    une fois que tu le maitrisera tu pourras t'aider de jquery, ou tout faire à la main mais dans tout les cas il te faudra maitriser le javascript et surement d'autre langages comme le html css php et mysql (ça dépend du type de jeu)

    le déplacement d'image c'est basique après ca dépend de ce que tu veux faire de ton image. la faire se déplacer d'un endroit a un autre en suivant une courbe ou en ligne droite etc
    0
  2. Anselmedu25
     
    En fait, je maitrise HTML, JS (les bases), CSS. Mais ya-t-il de bon tutos pour apprendre les langages que tu m'as cité? Merci.
    0
    1. Anselmedu25
       
      Pour jquery, msql et tout faut-il des logiciels ou on écrit cela dans un fichier txt en HTML qu'on lance avec le navigateur et basta?
      0
    2. Atropa Messages postés 2051 Statut Membre 274
       
      mysql c'est pour les bases de données donc c'est coté serveur et tu passe par php pour envoyer les requtes

      jquery c'est du javascript donc coté client

      mais a priori tu n'araus besoin de php et mysql que si tu veux enregistrer des score ou faire un jeu multi joueur

      tu veux faire quoi comme genre de jeu ?
      0
    3. Anselmedu25
       
      Non, non juste un petit jeu genre casse-brique, ect.. Pas de stockage de score, ect... Enfin cass-brique c'est déjà un bien grand jeu. Pour l'instant juste un vaisseau qu'on déplace avec le pad...

      En fait, je ne compte pas le mettre en ligne.
      0
    4. Atropa Messages postés 2051 Statut Membre 274
       
      ton projet est donc réaliste !

      il faut savoir que ce sera surement plus fluide en flash qu'en javascript.

      (tu n'aurais pas du créer 2 sujet pour le même problème)

      les jeux sur les site comme tu montres sont souvent en flash, c'est possible de faire des jeux en java mais le plugin web est plus lourd et moins répandu
      0
  3. Anselmedu25
     
    Bonjour!

    Alors voila j'ai un nouveau problème:

    Je voudrais déplacer le carré jaune de gauche à droite avec les flèches, mais cela ne marche pas... Voici mon code:

    <html>
    <head>
    <title>Jeu</title>
    <script type="text/JavaScript">

    //Déclaration des variables du jeu:

    var joueurW=50;
    var joueurH=30;
    var joueurX=170;
    var joueurY=550;
    var screenH=600;
    var screenW=400;
    var screenX=0;
    var screenY=0;
    var missileW=10;
    var missileH=30;
    var missileX=joueurY
    var missileY=joueurY+20
    var missileDX=2;
    var missileDY=2;
    var canvas;
    var ctx;

    //On récupère le canvas

    function jeuCanvas()
    {
    canvas=document.getElementById("monCanvas");
    ctx=canvas.getContext("2d");
    loopjeu=setInterval(dessiner, 16,66);
    window.addEventListener("key", touches, true);
    }
    function dessiner()
    {
    ctx.fillStyle="black";
    ctx.beginPath();
    ctx.fillRect(0, 0, screenW, screenH);
    ctx.fill;
    ctx.fillStyle="yellow";
    ctx.beginPath();
    ctx.fillRect(joueurX, joueurY, joueurW, joueurH);
    ctx.fill;
    }

    function touches(evt) {
    switch (evt.keyCode) {

    case 37:
    joueurX = joueurX - 10;

    case 39:
    joueurX = joueurX + 10;

    }
    }
    </script>
    <style type="text/CSS">
    </style>
    <body>
    <body onLoad="jeuCanvas();">
    <div align="center">
    <canvas id="monCanvas" width="400" height="600">
    Pas compatible!
    </canvas>
    </div>

    </body>
    </html>

    Merci, pourrais tu me dire pourquoi mon code ne marche-t-il pas?
    0