planeGameSketch.js

let socket;
let plane1, plane2;

function setup() {
    createCanvas(400, 400);

    // Connect to server
    socket = io.connect('http://localhost:3000');

    // Listen for plane position updates
    socket.on('planePosition', updatePlanePosition);

    // Create two planes with different controls
    plane1 = new Plane(100, 300, 3, 100, 10, 5, "Plane1", 87, 83, 65, 68); // W, S, A, D
    plane2 = new Plane(700, 300, 3, 100, 10, 5, "Plane2", UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW); // Arrow keys
}

function draw() {
    background(50);

    // Update and display both planes
    plane1.update();
    plane1.display();

    plane2.update();
    plane2.display();
}

function updatePlanePosition(data) {
    // Update plane positions based on incoming data
    if (data.name === "Plane1") {
        plane1.pos.x = data.x;
        plane1.pos.y = data.y;
        plane1.angle = data.angle;
    } else if (data.name === "Plane2") {
        plane2.pos.x = data.x;
        plane2.pos.y = data.y;
        plane2.angle = data.angle;
    }
}


class Plane {
    constructor(x, y, speed, health, gunDamage, fireRate, name, upKey, downKey, leftKey, rightKey) {
        this.pos = createVector(x, y);
        this.vel = createVector(0, 0); // Start with no movement
        this.speed = speed || 3;
        this.angle = 0;
        this.targetAngle = this.angle;
        this.turningSpeed = 0.05;
        this.rotating = false;

        this.upKey = upKey;
        this.downKey = downKey;
        this.leftKey = leftKey;
        this.rightKey = rightKey;
        this.name = name; // Unique identifier

        this.lastPosition = { x: this.pos.x, y: this.pos.y, angle: this.angle };
    }

    update() {
        let movement = createVector(0, 0);

        // Check for key presses
        if (keyIsDown(this.upKey)) movement.y -= 1;
        if (keyIsDown(this.downKey)) movement.y += 1;
        if (keyIsDown(this.leftKey)) movement.x -= 1;
        if (keyIsDown(this.rightKey)) movement.x += 1;

        // Handle movement and angle updates
        if (movement.mag() > 0) {
            movement.normalize();
            this.targetAngle = atan2(movement.y, movement.x);
            this.rotating = true;
        } else {
            this.rotating = false;
            this.vel.mult(0); // Stop movement when no keys are pressed
        }

        if (this.rotating) {
            let angleDifference = this.targetAngle - this.angle;
            angleDifference = atan2(sin(angleDifference), cos(angleDifference));
            this.angle += angleDifference * this.turningSpeed;

            // Update velocity to match the current angle
            this.vel = p5.Vector.fromAngle(this.angle).setMag(this.speed);
        }

        this.pos.add(this.vel); // Move the plane
        this.pos.x = constrain(this.pos.x, 0, width);
        this.pos.y = constrain(this.pos.y, 0, height);

        // Emit position if changed
        if (this.pos.x !== this.lastPosition.x || this.pos.y !== this.lastPosition.y || this.angle !== this.lastPosition.angle) {
            let data = {
                name: this.name,
                x: this.pos.x,
                y: this.pos.y,
                angle: this.angle,
            };
            socket.emit('planePosition', data);
            this.lastPosition = { x: this.pos.x, y: this.pos.y, angle: this.angle };
        }
    }

    display() {
        push();
        translate(this.pos.x, this.pos.y);
        rotate(this.angle);
        rectMode(CENTER);
        fill(0, 100, 255);
        rect(0, 0, 60, 20); // Draw the plane as a rectangle
        pop();
    }
}