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

1,782 mr.rezvani.369

Abrir en el editor Publica tu código

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

Recomendado

25 January 2026

Insertar juego Flash con Ruffle Player

9 December 2024

Un código de slowlogic992

19 December 2025

Insertar juego de Unity: Ragdoll Soccer

HTML

CSS

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