Emanuele Feronato

var game;
var gameOptions = {
    triangleBase: 60
}
window.onload = function() {
    var gameConfig = {
       type: Phaser.AUTO,
       width: gameOptions.triangleBase * 9.5,
       height: gameOptions.triangleBase * 15.5,
       backgroundColor: 0x000000,
       scene: playGame,
       physics: {
           default: "matter",
           matter: {
               debug: true
           }
        }
    }
    game = new Phaser.Game(gameConfig);
    window.focus();
    resize();
    window.addEventListener("resize", resize, false);
}
class playGame extends Phaser.Scene{
    constructor(){
        super("PlayGame");
    }
    create(){
        var squareSize = gameOptions.triangleBase / Math.sqrt(2);
        var spikeDistance = gameOptions.triangleBase * 1.25;
        this.leftSpikes = [];
        this.rightSpikes = [];
        for(var i = 0; i < 11; i++){
            if(i < 7){
                this.matter.add.rectangle(gameOptions.triangleBase + i * spikeDistance, game.config.height - gameOptions.triangleBase / 2, squareSize, squareSize, {
                    isStatic: true,
                    angle: Math.PI / 4,
                    label: "spike"
                });
                this.matter.add.rectangle(gameOptions.triangleBase + i * spikeDistance, gameOptions.triangleBase / 2, squareSize, squareSize, {
                    isStatic: true,
                    angle: Math.PI / 4,
                    label: "spike"
                });
            }
            var spike = this.matter.add.rectangle(- gameOptions.triangleBase / 4, gameOptions.triangleBase * 1.5 + i * spikeDistance, squareSize, squareSize, {
                isStatic: true,
                angle: Math.PI / 4,
                label: "spike"
            });
            this.leftSpikes.push(spike);
            spike = this.matter.add.rectangle(game.config.width + gameOptions.triangleBase / 4, gameOptions.triangleBase * 1.5 + i * spikeDistance, squareSize, squareSize, {
                isStatic: true,
                angle: Math.PI / 4,
                label: "spike"
            });
            this.rightSpikes.push(spike);
        }
        this.matter.add.rectangle(gameOptions.triangleBase / 4, game.config.height / 2, gameOptions.triangleBase / 2, game.config.height, {
            isStatic: true,
            label: "leftwall"
        });
        this.matter.add.rectangle(game.config.width - gameOptions.triangleBase / 4, game.config.height / 2, gameOptions.triangleBase / 2, game.config.height, {
            isStatic: true,
            label: "rightwall"
        });
        this.matter.add.rectangle(game.config.width / 2, gameOptions.triangleBase / 4, game.config.width - gameOptions.triangleBase, gameOptions.triangleBase / 2, {
            isStatic: true
        });
        this.matter.add.rectangle(game.config.width / 2, game.config.height - gameOptions.triangleBase / 4, game.config.width - gameOptions.triangleBase, gameOptions.triangleBase / 2, {
            isStatic: true
        });
        this.bird = this.matter.add.circle(game.config.width / 2, game.config.height / 2, gameOptions.triangleBase / 2);
        Phaser.Physics.Matter.Matter.Body.setVelocity(this.bird, {
            x: 7,
            y: 0
        });
        this.input.on("pointerdown", this.jump, this);
        this.matter.world.on("collisionstart", function (e, b1, b2) {
            if(b1.label == "spike" || b2.label == "spike"){
                this.scene.start("PlayGame");
            }
            if(b1.label == "leftwall" || b2.label == "leftwall"){
                this.setSpikes(true);
                Phaser.Physics.Matter.Matter.Body.setVelocity(this.bird, {
                    x: 7,
                    y: 0
                });
            }
            if(b1.label == "rightwall" || b2.label == "rightwall"){
                this.setSpikes(false);
                Phaser.Physics.Matter.Matter.Body.setVelocity(this.bird, {
                    x: -7,
                    y: 0
                });
            }
        }, this);
    }
    setSpikes(isRight){
        for(var i = 0; i < 11; i++){
            if(isRight){
                Phaser.Physics.Matter.Matter.Body.setPosition(this.rightSpikes[i], {
                    x: game.config.width + gameOptions.triangleBase / 4,
                    y: this.rightSpikes[i].position.y
                });
            }
            else{
                Phaser.Physics.Matter.Matter.Body.setPosition(this.leftSpikes[i], {
                    x: - gameOptions.triangleBase / 4,
                    y: this.leftSpikes[i].position.y
                });
            }
        }
        var randomPositions = Phaser.Utils.Array.NumberArray(0, 10);
        var numberOfSpikes = Phaser.Math.Between(3, 6);
        for(i = 0; i < numberOfSpikes; i++){
            var randomSpike = Phaser.Utils.Array.RemoveRandomElement(randomPositions);
            if(isRight){
                Phaser.Physics.Matter.Matter.Body.setPosition(this.rightSpikes[randomSpike], {
                    x: game.config.width - gameOptions.triangleBase / 2,
                    y: this.rightSpikes[randomSpike].position.y
                });
            }
            else{
                Phaser.Physics.Matter.Matter.Body.setPosition(this.leftSpikes[randomSpike], {
                    x: gameOptions.triangleBase / 2,
                    y: this.leftSpikes[randomSpike].position.y
                });
            }

        }
    }
    jump(){
        Phaser.Physics.Matter.Matter.Body.setVelocity(this.bird, {
            x: this.bird.velocity.x,
            y: -10
        })
    }
    update(){
        Phaser.Physics.Matter.Matter.Body.setVelocity(this.bird, {
            x: (this.bird.velocity.x > 0) ? 7 : -7,
            y: this.bird.velocity.y
        })
    }
};
function resize(){
    var canvas = document.querySelector("canvas");
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    var windowRatio = windowWidth / windowHeight;
    var gameRatio = game.config.width / game.config.height;
    if(windowRatio < gameRatio){
        canvas.style.width = windowWidth + "px";
        canvas.style.height = (windowWidth / gameRatio) + "px";
    }
    else{
        canvas.style.width = (windowHeight * gameRatio) + "px";
        canvas.style.height = windowHeight + "px";
    }
}