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> |
Partager