Déplacer des éléments dans une page HTML?
Fermé
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.
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.
A voir également:
- Déplacer des éléments dans une page HTML?
- Déplacer une colonne excel - Guide
- Supprimer une page word - Guide
- Déplacer barre des taches windows 11 - Guide
- Imprimer tableau excel sur une page - Guide
- Editeur html - Télécharger - HTML
3 réponses
Atropa
Messages postés
1940
Date d'inscription
mercredi 25 juin 2008
Statut
Membre
Dernière intervention
11 mai 2014
274
15 nov. 2012 à 12:01
15 nov. 2012 à 12:01
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
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
Utilisateur anonyme
16 nov. 2012 à 01:34
16 nov. 2012 à 01:34
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.
Atropa
Messages postés
1940
Date d'inscription
mercredi 25 juin 2008
Statut
Membre
Dernière intervention
11 mai 2014
274
16 nov. 2012 à 01:52
16 nov. 2012 à 01:52
le site du zero pour apprendre les bases
ensuite
https://www.developpez.com/
https://www.w3schools.com/
https://developer.mozilla.org/fr/
https://www.php.net/
https://dev.mysql.com/doc/
http://httpd.apache.org/docs/2.2/fr/
attention pour apache il faut voir suivant la version que tu utilises
quand tu as de bonnes bases les documentations officielles sont plus pratique
ensuite
https://www.developpez.com/
https://www.w3schools.com/
https://developer.mozilla.org/fr/
https://www.php.net/
https://dev.mysql.com/doc/
http://httpd.apache.org/docs/2.2/fr/
attention pour apache il faut voir suivant la version que tu utilises
quand tu as de bonnes bases les documentations officielles sont plus pratique
Atropa
Messages postés
1940
Date d'inscription
mercredi 25 juin 2008
Statut
Membre
Dernière intervention
11 mai 2014
274
16 nov. 2012 à 01:59
16 nov. 2012 à 01:59
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 ?
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 ?
Atropa
Messages postés
1940
Date d'inscription
mercredi 25 juin 2008
Statut
Membre
Dernière intervention
11 mai 2014
274
16 nov. 2012 à 04:00
16 nov. 2012 à 04:00
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
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
Utilisateur anonyme
18 nov. 2012 à 07:01
18 nov. 2012 à 07:01
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?
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?