102 lines
2.0 KiB
JavaScript
102 lines
2.0 KiB
JavaScript
|
|
let canvas = document.getElementById('scene');
|
|
console.log(canvas);
|
|
canvas.height = canvas.clientHeight;
|
|
canvas.width = canvas.clientWidth;
|
|
|
|
let ctx = canvas.getContext("2d");
|
|
|
|
|
|
// function mafunction(){
|
|
// }
|
|
|
|
// let mafunction = function(){}
|
|
|
|
// let mafonction = () => {}
|
|
|
|
// la taille de nos carres
|
|
let cote = 5;
|
|
|
|
|
|
|
|
let changerCote = () => {
|
|
cote = 10 + Math.random() * 20;
|
|
console.log("changerCote, cote", cote);
|
|
}
|
|
|
|
let onMouseMove = (event) => {
|
|
console.log(event);
|
|
if(event.keyCode == 32){
|
|
changerCote();
|
|
}
|
|
}
|
|
|
|
window.addEventListener("keydown", onMouseMove);
|
|
|
|
|
|
|
|
// Je crée ma liste (tableau) de point
|
|
let mespoints = [];
|
|
// j'utilise une boucle pour créer N points
|
|
for (let j = 0; j < 100; j++) {
|
|
// dans chaque boucle je crée un point,
|
|
// un objet {} avec 4 propriétés
|
|
// x position en x de depart
|
|
// y position en y de depart
|
|
// vx vitesse de deplacement en x
|
|
// vy vitesse de deplacement en y
|
|
let p = {
|
|
x: Math.random()*canvas.width,
|
|
y: Math.random()*canvas.height,
|
|
vx: -5 + Math.random()*10,
|
|
vy: -5 + Math.random()*10
|
|
};
|
|
// je rejoute le point dans ma liste (tableau)
|
|
mespoints.push(p)
|
|
}
|
|
|
|
// la fonction qui dessine
|
|
function dessiner(){
|
|
for (let i = 0; i < mespoints.length; i++) {
|
|
|
|
let monpoint = mespoints[i];
|
|
|
|
// teste bord canvas x
|
|
if (monpoint.x < 0 || monpoint.x > canvas.width) {
|
|
monpoint.vx *= -1;
|
|
}
|
|
// on bouge en x
|
|
monpoint.x = monpoint.x + monpoint.vx;
|
|
|
|
// teste bord canvas y
|
|
if (monpoint.y < 0 || monpoint.y > canvas.width) {
|
|
monpoint.vy *= -1;
|
|
}
|
|
// on bouge en y
|
|
monpoint.y = monpoint.y + monpoint.vy;
|
|
|
|
|
|
// on dessine dan le canvas
|
|
ctx.fillRect(
|
|
monpoint.x-cote/2,
|
|
monpoint.y-cote/2,
|
|
cote,
|
|
cote
|
|
)
|
|
}
|
|
}
|
|
|
|
// on anime (dessine et bouge)
|
|
function monAnimationKawaii(){
|
|
ctx.clearRect(0,0, canvas.width, canvas.height)
|
|
dessiner();
|
|
|
|
window.requestAnimationFrame(monAnimationKawaii);
|
|
}
|
|
|
|
|
|
window.requestAnimationFrame(monAnimationKawaii);
|
|
|
|
|
|
|