120 lines
2.4 KiB
JavaScript
120 lines
2.4 KiB
JavaScript
let canvas = document.getElementById('scene');
|
|
let ctx = canvas.getContext("2d");
|
|
|
|
function resizeCanvas() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
resizeCanvas();
|
|
window.addEventListener('resize', resizeCanvas);
|
|
|
|
//les petits croco !
|
|
const imagesSrc = [
|
|
"/user/pages/01.home/croco_bleu.png",
|
|
"/user/pages/01.home/croco_jaune.png",
|
|
"/user/pages/01.home/croco_orange.png",
|
|
"/user/pages/01.home/croco_vert.png",
|
|
"/user/pages/01.home/croco_rouge.png"
|
|
];
|
|
|
|
class Boule {
|
|
constructor() {
|
|
this.size = 10 + Math.random() * 30;
|
|
|
|
this.pos = {
|
|
x: Math.random() * canvas.width,
|
|
y: -this.size * 6
|
|
};
|
|
|
|
this.vx = -0.5 + Math.random();
|
|
this.vy = 1 + Math.random() * 3;
|
|
this.gravity = 0.03;
|
|
|
|
|
|
this.angle = Math.random() * Math.PI * 2;
|
|
this.rotationSpeed = -0.01 + Math.random() * 0.02; //rotationimages
|
|
|
|
this.img = new Image();
|
|
this.img.src =
|
|
imagesSrc[Math.floor(Math.random() * imagesSrc.length)];
|
|
}
|
|
|
|
draw() {
|
|
const width = 6 * this.size;
|
|
const height = 3 * this.size; //taille des imags
|
|
|
|
ctx.save();
|
|
ctx.translate(
|
|
this.pos.x + width / 2,
|
|
this.pos.y + height / 2
|
|
);
|
|
ctx.rotate(this.angle);
|
|
|
|
ctx.drawImage(
|
|
this.img,
|
|
-width / 2,
|
|
-height / 2,
|
|
width,
|
|
height
|
|
);
|
|
|
|
ctx.restore();
|
|
}
|
|
|
|
move() {
|
|
this.vy += this.gravity; //effet pluie
|
|
this.pos.x += this.vx;
|
|
this.pos.y += this.vy;
|
|
|
|
this.angle += this.rotationSpeed;
|
|
|
|
|
|
if (this.pos.x <= 0 || this.pos.x >= canvas.width - this.size * 6) {
|
|
this.vx *= -1;
|
|
this.rotationSpeed *= -1; //rebond sur les 2cotés
|
|
}
|
|
|
|
this.draw();
|
|
}
|
|
}
|
|
|
|
let boules = [];
|
|
|
|
function createBoule() {
|
|
boules.push(new Boule());
|
|
}
|
|
|
|
setInterval(createBoule, 50);
|
|
|
|
function anime() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
for (let i = 0; i < boules.length; i++) {
|
|
let a = boules[i];
|
|
|
|
for (let j = i + 1; j < boules.length; j++) {
|
|
let b = boules[j];
|
|
let dx = b.pos.x - a.pos.x;
|
|
let dy = b.pos.y - a.pos.y;
|
|
let dist = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
if (dist < a.size + b.size) {
|
|
let nx = dx / dist;
|
|
let ny = dy / dist;
|
|
let p = 0.5;
|
|
|
|
a.vx -= nx * p;
|
|
a.vy -= ny * p;
|
|
b.vx += nx * p;
|
|
b.vy += ny * p;
|
|
}
|
|
}
|
|
|
|
a.move();
|
|
}
|
|
|
|
requestAnimationFrame(anime);
|
|
}
|
|
|
|
anime();
|