मनोरंजन के लिए गेंद का खेल (श्री द्वारा)

1448 mr.rezvani.369

संपादक में खोलें Video अपना कोड प्रकाशित करें

मनोरंजन के लिए गेंद का खेल (श्री द्वारा)

अनुशंसित

17 April 2025

मेटे हान का एक कोड

20 August 2024

फ़्लिपिंग कार्ड का मूल्य निर्धारण

16 December 2025

ड्रॉपडाउन और स्टाइलिंग के साथ एचटीएमएल नेविगेशन बार

HTML

CSS

JS

// 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 )
}

अनुशंसित

मेटे हान का एक कोड

फ़्लिपिंग कार्ड का मूल्य निर्धारण

ड्रॉपडाउन और स्टाइलिंग के साथ एचटीएमएल नेविगेशन बार

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS