le jeu de balle pour le plaisir (par M.)

Ouvrir dans l'éditeur Publiez votre code

Recommandé

31 January 2025

// call the canvas 
let canvas = document.querySelector("canvas")
// the screen
canvas.width = window.innerWidth ; 
canvas.height = window.innerHeight ; 
// create the 2d screen 
let c = canvas.getContext("2d");

class ball{
    // that is the variable
    constructor(x , y){
        this.baseR = 10
        this.r = this.baseR
        this.r  = (Math.random()) * 20 ;
        this.x  = x || randomSetInrFromInterval(this.r , window.innerWidth - this.r);
        this.y  = y || randomSetInrFromInterval(this.r , window.innerHeight - this.r);
        this.vx = (Math.random() - 0.5) * 5 ;
        this.vy = (Math.random() - 0.5) * 5 ;
        this.color = `rgb(${(Math.random() * 255)} , ${(Math.random() * 255)} , ${(Math.random() * 255)})`
        this.draw()
    }
    // the roll for create the circle 
    draw(){
        c.beginPath();
        c.arc(this.x,this.y,this.r,0,Math.PI * 2);
        c.fillStyle = this.color
        c.fill()
    }
    // the roll for ball can not out the screen 
    update(){
        if(this.x+this.r > window.innerWidth || this.x-this.r < 0){
            this.vx = -this.vx
        }
        if(this.y+this.r > window.innerHeight || this.y-this.r < 0){
            this.vy = -this.vy
        }
        this.x += this.vx
        this.y += this.vy
        this.draw()
    }
}

// the loop for create any ball 
let balls = [] ;
for(let i = 0 ; i<100 ; i++){
    balls.push(new ball())
}
// the scroll ball , create a ball
function animate(){
    c.clearRect(0,0,window.innerWidth , window.innerHeight);
    balls.forEach(ball =>{
        ball.update()
    })
    requestAnimationFrame(animate)
}
 // that is the function for create the ball when i click on the screen
window.addEventListener("click" , (e)=>{
    balls.push(new ball(e.clientX , e.clientY))
})

window. addEventListener("mousemove" ,(e)=>{
    balls.forEach(ball=>{
        let distance = Math.sqrt(Math.pow(e.clientX - ball.x,2) + Math.pow(e.clientY - ball.y,2))
        if(distance < 100 && ball.r < ball.baseR * 4){
            ball.r += 1
        }else if(ball.r > ball.baseR){
            ball.r -= 1
        }
    })
})

window.addEventListener("resize" , ()=>{
    canvas.width = window.innerWidth ; 
    canvas.height = window.innerHeight ; 
})
animate()

// the ball have random place in a screen 
function randomSetInrFromInterval(min , max){
    return Math.floor(Math.random() * (max - min + 1) + min )
}

le jeu de balle pour le plaisir (par M.)

Recommandé

Films de cartes CSS pures 3D

Site Web du blog de Daniel

Un code par alejandrokundrah

HTML

CSS

JS

Recommandé

Films de cartes CSS pures 3D

Site Web du blog de Daniel

Un code par alejandrokundrah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS