paperplane-yuvraj8/index.js

PaperPlane is an interactive JavaScript game that simulates the flight of a paper airplane through various obstacles.

let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let plane = {x: canvas.width / 2, y: canvas.height / 2, width: 20, height: 10};
let gravity = 0.25;
let lift = -5;
let velocity = 0;
let obstacles = [];
let score = 0;
let gameRunning = true;

function drawPlane() {
    ctx.fillStyle = 'blue';
    ctx.fillRect(plane.x, plane.y, plane.width, plane.height);
}

function updatePlane() {
    velocity += gravity;
    plane.y += velocity;
    if (plane.y >= canvas.height - plane.height || plane.y <= 0) {
        gameRunning = false;
    }
}

function drawObstacles() {
    for (let i = 0; i < obstacles.length; i++) {
        ctx.fillStyle = 'red';
        ctx.fillRect(obstacles[i].x, obstacles[i].y, obstacles[i].width, obstacles[i].height);
    }
}

function updateObstacles() {
    if (Math.random() < 0.01) {
        obstacles.push({
            x: canvas.width,
            y: 0,
            width: Math.random() * 30 + 10,
            height: Math.random() * canvas.height / 2,
        });
    }
    for (let i = obstacles.length - 1; i >= 0; i--) {
        obstacles[i].x -= 2;
        if (obstacles[i].x + obstacles[i].width < 0) {
            obstacles.splice(i, 1);
            score++;
        }
    }
}

function checkCollision() {
    for (let i = 0; i < obstacles.length; i++) {
        if (plane.x < obstacles[i].x + obstacles[i].width &&
            plane.x + plane.width > obstacles[i].x &&
            plane.y < obstacles[i].y + obstacles[i].height &&
            plane.y + plane.height > obstacles[i].y) {
            gameRunning = false;
        }
    }
}

function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if (gameRunning) {
        drawPlane();
        updatePlane();
        drawObstacles();
        updateObstacles();
        checkCollision();
        requestAnimationFrame(gameLoop);
    } else {
        ctx.fillStyle = 'black';
        ctx.fillText("Game Over! Score: " + score, canvas.width / 2 - 50, canvas.height / 2);
    }
}

document.addEventListener('keydown', function(event) {
    if (event.code === 'Space') {
        velocity += lift;
    }
});

function  getRandom(min,max){
return    Math.floor(Math.random() *(max+1-min)+min);
}

class Point{
     constructor(){
        this.r=6
        this.x=getRandom(0,cvs.width-this.r/2)
        this.y=getRandom(0,cvs.height-this.r/2)
        this.xSpeed=getRandom(-50,50)
        this.ySpeed=getRandom(-50,50)
        this.lastDrawTime=null
     }
     draw(){
        if(this.lastDrawTime){
            const duration=(Date.now()-this.lastDrawTime)/1000
            const xDis=this.xSpeed*duration
            const yDis=this.ySpeed*duration
            let x=this.x+xDis,y=this.y+yDis
            if(x>cvs.width-this.r/2){
                x=cvs.width-this.r/2
                this.xSpeed=-this.xSpeed
            }
            else if(x<0){
                x=0
                this.xSpeed=-this.xSpeed
            }
         
            if(y>cvs.height-this.r/2){
                y=cvs.height-this.r/2
                this.ySpeed=-this.ySpeed
            }
            else if(y<0){
                y=0
                this.ySpeed=-this.ySpeed
            }
         
            this.x=x;
            this.y=y;
        }
        ctx.beginPath()
        ctx.arc(this.x,this.y,6,0,2*Math.PI)
        ctx.fillStyle='rgba(200,200,200)'
        ctx.fill()
        this.lastDrawTime=Date.now()
     }
}
class Graph{

      constructor(pointNumber=30,maxdis=200){
         this.points=    new Array(pointNumber).fill(0).map(()=>new Point())
         this.maxdis=maxdis
      }
      drawGraph(){
          const animate = () => {
              this.drawGraph();
          };
          requestAnimationFrame(animate);
        ctx.clearRect(0,0,cvs.width,cvs.height)
        for(let i=0;i<this.points.length;i++){
            const p1=this.points[i]
            p1.draw()
            for(let j=i+1;j<this.points.length;j++){
                const p2=this.points[j]
                const d=Math.sqrt((p1.x-p2.x)**2+(p1.y-p2.y)**2)
                if(d>this.maxdis){
                    continue;
                }
    
                 ctx.beginPath();
                 ctx.moveTo(p1.x,p1.y)
                 ctx.lineTo(p2.x,p2.y)
                 ctx.closePath();
                 ctx.strokeStyle=`rgba(200,200,200,${1-d/this.maxdis})`
                 ctx.stroke()
            }
        }
      }
}
const g1=new Graph();
g1.drawGraph()