Add files via upload

Author: SumantxD

Indes.js

@@ -0,0 +1,210 @@
+const canvas = document.querySelector('canvas');
+const c = canvas.getContext('2d')
+
+canvas.width = innerWidth
+canvas.height = innerHeight
+
+
+class Player{
+    constructor(x, y ,radius ,color){
+        this.x = x
+        this.y = y
+
+        this.radius = radius
+        this.color = color
+    }
+    draw(){
+        c.beginPath()
+        c.arc(this.x ,this.y, this.radius, 0, Math.PI *2, false)
+        c.fillStyle = this.color
+        c.fill()
+    }
+}
+
+class Projectile{
+    constructor(x, y, radius, color, velocity){
+        this.x = x
+        this.y = y
+        this.radius = radius
+        this.color = color
+        this.velocity = velocity
+    }
+    draw(){
+        c.beginPath()
+        c.arc(this.x ,this.y, this.radius, 0, Math.PI *2, false)
+        c.fillStyle = this.color
+        c.fill()
+    }
+    update(){
+        this.draw()
+        this.x += this.velocity.x
+        this.y += this.velocity.y
+    }  
+}
+
+class Enemy{
+    constructor(x, y, radius, color, velocity){
+        this.x = x
+        this.y = y
+        this.radius = radius
+        this.color = color
+        this.velocity = velocity
+    }
+    draw(){
+        c.beginPath()
+        c.arc(this.x ,this.y, this.radius, 0, Math.PI *2, false)
+        c.fillStyle = this.color
+        c.fill()
+    }
+    update(){
+        this.draw()
+        this.x += this.velocity.x
+        this.y += this.velocity.y
+    }  
+}
+
+class Particle{
+    constructor(x, y, radius, color, velocity){
+        this.x = x
+        this.y = y
+        this.radius = radius
+        this.color = color
+        this.velocity = velocity
+        this.alpha =1
+    }
+    draw(){
+        c.save()
+        c.globalAlpha = thid.alpha
+        c.beginPath()
+        c.arc(this.x ,this.y, this.radius, 0, Math.PI *2, false)
+        c.fillStyle = this.color
+        c.fill()
+        c.restore()
+    }
+    update(){
+        this.draw()
+        this.x += this.velocity.x
+        this.y += this.velocity.y
+        this.alpha -= 0.01
+    }  
+}
+const x = canvas.width/2
+const y = canvas.height/2
+
+const player = new Player(x ,y, 30, 'blue')
+
+
+// const projectile = new Projectile(canvas.width/2, canvas.height/2, 5, 'red', {x:1 ,y:1})
+// const projectile2 = new Projectile(canvas.width/2, canvas.height/2, 5, 'green', {x:-1 ,y:-1})
+
+const projectiles = []
+const enemies = []
+const particles = []
+
+function spawnEnemies(){
+    setInterval(() =>{
+        const radius = Math.random() * (30-4) + 4
+
+        let x
+        let y
+
+        if(Math.random() < 0.5){
+             x = Math.random() < 0.5 ? 0 - radius : canvas.width + radius
+             y = Math.random() * canvas.height
+            //  y = Math.random() < 0.5 ? 0 - radius : canvas.height + radius
+        }else{
+             x = Math.random() * canvas.width
+             y = Math.random() < 0.5 ? 0 - radius : canvas.height + radius
+        }
+
+        
+        
+        const color = `hsl(${Math.random() * 360}, 50%, 50%)`
+        
+        const angle = Math.atan2(canvas.height/2 - y , canvas.width/2 -x)
+        const velocity = {
+            x:Math.cos(angle) * 4,
+            y:Math.sin(angle) * 4
+        }
+        enemies.push(new Enemy(x, y, radius, color, velocity))
+    }, 1000)
+}
+
+console.log(player)
+
+let animationId
+function Animate(){
+    animationId = requestAnimationFrame(Animate)
+    c.fillStyle = 'rgba(0, 0, 0, 0.1)'
+    c.fillRect(0, 0, canvas.width ,canvas.height)
+    player.draw()
+    particles.forEach((particle, index) =>{
+        if (particle.alpha <=0){
+            particles.splice(index, 1)
+        }else{
+            particle.update()
+        }
+        
+    })
+    projectiles.forEach((Projectile, index) => {
+        Projectile.update()
+
+        //remove from edges of screen 
+        // if(projectile.x + projectile.radius < 0 || projectile.x - projectile.radius > canvas.width || projectile.y + projectile.radius < 0 || projectile.y - projectile.radius > canvas.height){
+        //     setTimeout(() =>{
+        //         projectiles.splice(index, 1)
+        //     }, 0)
+           
+        // }
+    })
+
+    enemies.forEach((enemy, index) =>{
+        enemy.update()
+        const dist = Math.hypot(player.x - enemy.x, player.y - enemy.y)
+        //end game
+        if(dist - enemy.radius - player.radius < 1){
+            cancelAnimationFrame(animationId)
+        }
+        projectiles.forEach((projectile ,projectileIndex) => {
+            const dist = Math.hypot(projectile.x - enemy.x, projectile.y - enemy.y)
+
+            //when projectiles touch enemy
+            if(dist - enemy.radius - projectile.radius < 1){
+                
+                //create explosions
+                for(let i=0; i<enemy.radius * 2; i++){
+                    particles.push(new Particle(projectile.x, projectile.y, Math.random() * 2 ,enemy.color, {x:2 , y:2}))
+                }
+
+                if(enemy.radius -10 > 10){
+                    enemy.radius -= 10
+                    setTimeout(() =>{
+                        // enemies.splice(index ,1)
+                        projectiles.splice(projectileIndex, 1)
+                    }, 0)
+                }else{
+                    setTimeout(() =>{
+                        enemies.splice(index ,1)
+                        projectiles.splice(projectileIndex, 1)
+                    }, 0)
+                }
+                
+                
+            }
+        })
+    })
+    // projectile.draw()
+    // projectile.update()
+}
+
+addEventListener('click', (event) =>{
+    const angle = Math.atan2(event.clientY - canvas.height/2, event.clientX - canvas.width/2)
+    const velocity = {
+        x:Math.cos(angle) *4,
+        y:Math.sin(angle) *4
+    }
+    projectiles.push(new Projectile(canvas.width/2, canvas.height/2, 5 ,'red', velocity))
+    
+})
+Animate()
+spawnEnemies()