site-perso-poly/projects/script.js

function getSinus(angle) {
    return Math.sin(angle);
}

function getCosinus(angle) {
    return Math.cos(angle);
}

class Player {
    constructor(x, y, width, height, color, speed, upKey, downKey) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.color = color;
        this.speed = speed;
        this.upKey = upKey;
        this.downKey = downKey;
        this.points = 0;
    }

    draw(ctx) {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }

    moveUp() {
        this.y -= this.speed;
    }
    moveDown() {
        this.y += this.speed;
    }
    move(event) {
        if (event.key == this.upKey) {
            this.moveUp();
        }
        if (event.key == this.downKey) {
            this.moveDown();
        }
    }
}

class Ball {
    constructor(x, y, radius, color, speed) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
        this.horizontal_speed = speed;
        this.vertical_speed = speed;
        this.angle = Math.random() * 2 * Math.PI;
    }

    reset() {
        this.angle = Math.random() * 2 * Math.PI;
        this.x = 450;
        this.y = 250;
        this.horizontal_speed = 5;
        this.vertical_speed = 5;
    }

    draw(ctx) {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
        ctx.fillStyle = this.color;
        ctx.fill();
    }

    move() {
        this.x += this.horizontal_speed * getCosinus(this.angle);
        this.y += this.vertical_speed * getSinus(this.angle);
    }
}

class Game {
    constructor(background_color, circle_color) {
        this.background_color = background_color;
        this.circle_color = circle_color;
        this.canvas = document.createElement("canvas");
        this.canvas.width = 900;
        this.canvas.height = 500;
        this.canvas.style.border = "5px solid #44475a";
        this.canvas.style.borderRadius = "10px";
        this.canvas.style.margin = "auto";
        this.canvas.style.display = "block";
        this.canvas.style.width = "70%";
        document.body.appendChild(this.canvas);
        this.ctx = this.canvas.getContext("2d");
        this.ball = new Ball(450, 250, 20, this.circle_color, 5);
        this.Player1 = new Player(10, 0, 20, 100, "white", 15, "z", "s");
        this.Player2 = new Player(
            870,
            0,
            20,
            100,
            "white",
            15,
            "ArrowUp",
            "ArrowDown"
        );
    }

    colorBackground() {
        this.ctx.fillStyle = this.background_color;
        this.ctx.fillRect(0, 0, 900, 500);
        this.ctx.fillStyle = "white";
        this.ctx.font = "30px Arial";
        this.ctx.fillText(this.Player1.points, 100, 50);
        this.ctx.fillText(this.Player2.points, 800, 50);
    }

    draw() {
        this.ball.draw(this.ctx);
        this.Player1.draw(this.ctx);
        this.Player2.draw(this.ctx);
    }

    colision() {
        // Player collisions
        if (
            this.ball.x + this.ball.radius >= this.Player2.x &&
            this.ball.y >= this.Player2.y &&
            this.ball.y <= this.Player2.y + this.Player2.height
        ) {
            this.ball.horizontal_speed *= -1;
        }

        if (
            this.ball.x - this.ball.radius <=
                this.Player1.x + this.Player1.width &&
            this.ball.y >= this.Player1.y &&
            this.ball.y <= this.Player1.y + this.Player1.height
        ) {
            this.ball.horizontal_speed *= -1;
        }
        // Wall collisions
        if (
            this.ball.x + this.ball.radius >= 900 ||
            this.ball.x - this.ball.radius <= 0
        ) {
            if (this.ball.x + this.ball.radius >= 900) {
                this.Player1.points += 1;
            } else {
                this.Player2.points += 1;
            }
            this.ball.reset();
        }
        if (
            this.ball.y + this.ball.radius >= 500 ||
            this.ball.y - this.ball.radius <= 0
        ) {
            this.ball.vertical_speed *= -1;
        }
    }

    step() {
        this.colorBackground();
        this.draw();
        this.ball.move();
        this.colision();
        this.Player1.y = this.ball.y - this.Player1.height / 2;
        this.Player2.y = this.ball.y - this.Player2.height / 2;
    }
}

const game = new Game("#282a36", "#6272a4");

document.addEventListener("keypress", function (event) {
    game.Player1.move(event);
});
document.addEventListener("keydown", function (event) {
    game.Player2.move(event);
});

setInterval(() => game.step(), 1);