[canvas] Déplacement d'éléments sur un terrain

**SierraGolf3** · 07/08/2023, 22h51

Bonjour les gens du forum

Je suis débutant en canvas et je m'amuse à créer une map avec des joueurs évoluant dessus.

Je me suis inspiré d'un code qui débute l'animation directement avec une succession de position. C'est joli mais pas tout à fait ce que j'aimerai.

Voici mon CodePen

Déjà j'aimerai que l'animation de chaque joueur parte sur l'appui d'un bouton. Et à chaque appuis, que le joueur aille à une autre position défini par x et y.
Je n'ai rien trouvé de concluant sur le net et ce code est celui qui se rapproche le plus du rendu final.

Si quelqu'un peux m'aiguiller un peu ce serai top !

Merci à tous

**Archimède** · 09/08/2023, 22h48

Ce sont des maths...
Après, voici une solution pour aller d'un point pt1 à un point pt2 en ligne droite.
Il est tard et je n'ai pas le temps de terminer l'exemple mais tu as une approche...Utilise évidemment requestAnimationFrame...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>trajectoire</title>
 <style>
    html,body {
        margin: 0;
        padding: 0;
    }
    div{
        display: grid;
        place-items: center;
        height: 100vh;
    }
    canvas{
        border:1px solid black;
    }
</style>
</head>
<body>
<div>
    <canvas id="myCanvas">
        <p>votre navigateur ne supporte pas Canvas. Mettez-vous à jour</p>
    </canvas>
</div>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    canvas.width =.8*window.innerHeight;
    canvas.height =.8*window.innerHeight;
    let taille=canvas.width;
 
    class Point{
        constructor(x,y){
            this.x=x;
            this.y=y;
        }
    }
 
    
    let pt1=new Point(taille/4,taille/4),   //position initiale du sprite
        pt2=new Point(3*taille/4,3*taille/4); // position finale
 
    //sprite
    ctx.beginPath();
    ctx.fillStyle = '#F00';
    ctx.arc(pt1.x, pt1.y, 20, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();
 
 
    //dessin des points
    function croix(p){
        ctx.moveTo(p.x-10,p.y);
        ctx.lineTo(p.x+10,p.y);
        ctx.moveTo(p.x,p.y-10);
        ctx.lineTo(p.x,p.y+10);
        ctx.stroke();
    }
    croix(pt1);
    croix(pt2);
 
    const vx=30;//vitesse suivant x en pixels/s
    const dt=20; 
    let t=0;
 
   
 
    function trajectoire(pti,ptf,t){
        let pente=(ptf.y-pti.y)/(ptf.x-pti.x),
            x=vx*t+pti.x,
            y=pente*x;
        return new Point(x,y);
    }
 
    setInterval(()=>{
       t+=dt*.001;
       let ps=trajectoire(pt1,pt2,t);
       ctx.beginPath();
       //je te laisse poursuivre...  ps.x et ps.y sont les coordonnées de ton sprite en déplacement - A toi de l'arrêter en position
       // pt2 avec une condition.
    }, dt);
   
</script>
</body>
</html>

[canvas] Déplacement d'éléments sur un terrain

JavaScript

Vue hybride

Discussions similaires

Partager

Partager