Déplacer rectangle d'un canvas HTML avec JS

Résolu/Fermé
dachiasse Messages postés 1709 Date d'inscription samedi 12 septembre 2020 Statut Membre Dernière intervention 13 mai 2021 - 5 févr. 2021 à 01:20
dachiasse Messages postés 1709 Date d'inscription samedi 12 septembre 2020 Statut Membre Dernière intervention 13 mai 2021 - 7 févr. 2021 à 04:28
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 
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 
clientX
qui 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:

2 réponses

Réponse 1 / 2
dachiasse Messages postés 1709 Date d'inscription samedi 12 septembre 2020 Statut Membre Dernière intervention 13 mai 2021 149
Modifié le 7 févr. 2021 à 04:29
Salut,

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 !
1
Réponse 2 / 2
dachiasse Messages postés 1709 Date d'inscription samedi 12 septembre 2020 Statut Membre Dernière intervention 13 mai 2021 149
5 févr. 2021 à 14:36
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()
0

Discussions similaires

arriere plan
minangi -
Raymond PENTIER -

Bonjour, voici la consigne : "Dans la présentation, sans modifier leur position dans la feuille : passez le rectangle noir en arrière-plan ; passez le rectangle bleu au premier plan ; passez le rectangle hachuré au premier plan. Quel mot apparaît ?" je ne sais vraiment pas comment faire pour mettre le rectangle en arriere plan !  pouvez vous m'aidez svp ?

1 réponse
que signifie les petits rectangles blancs à la fin de mes sms ?
krystina1207 -
Arman -

Bonjour, je possède un tel portable nokia asha 311 et je reçois des petits rectangles blancs par sms de la part de mes amis ; que siginifie ces petits rectangles blancs?
Merci de me donner une réponse précise.

6 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

Bonjour,

je cherche une fonction javascript qui permettrait d'arrondir un nombre à deux chiffres après la virgule (un peu comme number_format du php), car la fonction round() ne permet d'arrondir qu'à l'unité!

Merci
Ciao

JérémyConfiguration: Windows Vista
Firefox 2.0.0.14

12 réponses
la balise <br> ou <br />
faamugol -
rwaness -

Bonjour,

Quelle est la difference entre la balise
et
?

Pourquoi utiliser l'un et pas l'autre ?

Merci d'avance,

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

Bonjour,

Comme on lit un peu tout et son contraire sur internet, je voudrais savoir quelle est la balise que l'on doit utiliser pour un retour à la ligne en HTML5.

Merci. :)

Configuration: Windows 7 / Chrome 22.0.1229.79

11 réponses