El juego de pelota por diversión (por el Sr.)

1442 mr.rezvani.369

Abrir en el editor Video Publica tu código

El juego de pelota por diversión (por el Sr.)

Recomendado

28 September 2025

Animación de carga CSS con imagen de fondo

10 December 2025

Ejemplo de juego de física Ragdoll de Matter.js

30 June 2025

Un código de Metr

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

Recomendado

Animación de carga CSS con imagen de fondo

Ejemplo de juego de física Ragdoll de Matter.js

Un código de Metr

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS