Déplacer rectangle d'un canvas HTML avec JS
Résolu
dachiasse
Messages postés
1709
Date d'inscription
Statut
Membre
Dernière intervention
-
dachiasse Messages postés 1709 Date d'inscription Statut Membre Dernière intervention -
dachiasse Messages postés 1709 Date d'inscription Statut Membre Dernière intervention -
Salut,
Je cherche à faire un mouvement depuis le curseur de la souris. Je souhaite récupérer la coordonnée des abscisses pour effectuer le déplacement d'un rectangle rouge, comme la barre du joueur d'un casse-briques.
Si je commente la fonction
Je ne connais pas bien JS, j'avoue ne pas avoir cherché où sont affichés les erreurs qui pourraient m'aider j'en suis conscient.
Je poste le code qui est un brouillon :
D'après mes recherches, l'événement "mousemove" a un argument pour accéder à l'attribut
Je cherche à faire un mouvement depuis le curseur de la souris. Je souhaite récupérer la coordonnée des abscisses pour effectuer le déplacement d'un rectangle rouge, comme la barre du joueur d'un casse-briques.
Si je commente la fonction
moveMouse(e)j'obtiens bien un rectangle gris qui prend tout le canvas qui prend tout le body de la page. Mais, si je décommente
moveMouse(e), j'ai une page blanche.
Je ne connais pas bien JS, j'avoue ne pas avoir cherché où sont affichés les erreurs qui pourraient m'aider j'en suis conscient.
Je poste le code qui est un brouillon :
<!-- Dans ce fichier brouillon, il y aura HTML, CSS et JS --> <!doctype html> <html lang="fr-fr"> <head> <style> * { margin:0; padding:0 } html, body { width:100%; height:100%; } canvas { display: block; } </style> <meta charset="utf-8"> <title>Animation souris barre horizontale !</title> </head> <body> <canvas id="canvas"></canvas> <script> (function(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var start_pixel = 0; var bar_width = 150; var bar_height = 30; var bar_center = bar_width / 2; var bar_x_position = 0; window.addEventListener("resize", resizeCanvas, false); window.addEventListener("mousemove", function(){moveMouse(window.event)}, false); function resizeCanvas(){ window_width = window.innerWidth; window_height = window.innerHeight; bar_y_position = window_height - bar_height; canvas.width = window_width; canvas.height = window_height; drawStuff(); } resizeCanvas(); function moveMouse(e) { var x = e.clientX; drawStuff(); } function drawStuff(){ context.fillStyle = "grey"; context.fillRect(start_pixel, start_pixel, window_width, window_height); context.fillStyle = "red"; if (x - bar_center < 0) { x = bar_center; } if (x + bar_center > window_width) { x = window_width - bar_center; } x = x - bar_center; context.fillRect(x, bar_y_position, bar_width, bar_height); } })(); </script> </body> </html>
D'après mes recherches, l'événement "mousemove" a un argument pour accéder à l'attribut
clientXqui indique l'abscisse du curseur de la souris. Sauf que je ne sais pas bien comment ajouter un paramètre à la fonction de callback d'
addEventListener().
A voir également:
- Déplacer rectangle d'un canvas HTML avec JS
- Déplacer colonne excel - Guide
- Editeur html - Télécharger - HTML
- Canvas gratuit - Télécharger - Divers Photo & Graphisme
- Déplacer barre des taches windows 11 - Guide
- Round js ✓ - Forum Javascript
2 réponses
Salut,
J'en ai bavé. J'ai réussi :
Prochaine étape, créer GTA VII !
J'en ai bavé. J'ai réussi :
<!-- Dans ce fichier brouillon, il y aura HTML, CSS et JS --> <!doctype html> <html lang="fr-fr"> <head> <style> * { margin:0; padding:0 } html, body { width:100%; height:100%; } canvas { display: block; } </style> <meta charset="utf-8"> <title>Animation souris barre horizontale !</title> </head> <body> <canvas id="canvas"></canvas> <script> (function(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var bar_width = 150; var bar_height = 30; var bottom_space_bottom_canvas = 30; window.addEventListener("resize", resizeCanvas, false); canvas.addEventListener("mousemove", moveMouse, false); function resizeCanvas(){ canvas.width = window.innerWidth; canvas.height = window.innerHeight; drawStuff(window.innerWidth/2-bar_width/2, canvas.height-bottom_space_bottom_canvas-bar_height); } resizeCanvas(); function moveMouse(e) { var x = e.clientX; if (x < bar_width / 2) x = bar_width / 2; if (x > canvas.width - bar_width / 2) x = canvas.width - bar_width / 2; drawStuff(x-bar_width / 2, canvas.height-bottom_space_bottom_canvas-bar_height); } function drawStuff(left, top) { context.fillStyle = "grey"; context.fillRect(0,0, canvas.width, canvas.height); context.fillStyle = "red"; context.fillRect(left, top, bar_width, bar_height); } })(); </script> </body> </html>
Prochaine étape, créer GTA VII !
Ce n'est pas le même langage. Mais, voici ce que je veux faire. Ici en python 3 avec pygame :
import pygame as pg pg.init() running = True display_size = (640,480) display = pg.display.set_mode(display_size) rectangle_bar = pg.Rect(245,420,150,30) x = 0 fps = 50 clock = pg.time.Clock() while running: for event in pg.event.get(): if event.type == pg.QUIT: running = False if event.type == pg.MOUSEMOTION: x = event.pos[0] display.fill("grey") if x < 75: x = 75 if x > 565: x = 565 # center rectangle_bar.centerx = x pg.draw.rect(display, "red", rectangle_bar) pg.display.update() clock.tick(fps) pg.quit()