Déplacer des éléments dans une page HTML?
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
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 dans word - Guide
- Imprimer tableau excel sur une page - Guide
- Déplacer barre des taches windows 11 - Guide
- Photoshop elements gratuit - Télécharger - Retouche d'image
3 réponses
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
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.
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
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 ?
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
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?
