o jogo de bola por diversão (pelo Sr.)

Abrir no Editor Publique Seu Código Precisa de um site?

Recomendado

23 October 2024

Tipo de letra animada VFS Digital Design

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

o jogo de bola por diversão (pelo Sr.)

Recomendado

Tipo de letra animada VFS Digital Design

máquina de garra

efeito de revelação

HTML

CSS

JS

Recomendado

Tipo de letra animada VFS Digital Design

máquina de garra

efeito de revelação

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS