game.js

//This file is responsible for everything that happens inside of the canvas tag

const sprites = new Image()
sprites.src = "./img/sprites.webp"

const gunfire = new Audio()
gunfire.src = "./sound/gunfire.mp3"

const countdown = new Audio()
countdown.src = "./sound/countdown.mp3"

const gameFont = new FontFace("game", "url(PixelOperator-Bold.ttf)");
document.fonts.add(gameFont);
gameFont.load()
let fontLoaded = false
document.fonts.onloadingdone = () => {
    fontLoaded = true
}

const canvas = document.querySelector('canvas')
const context = canvas.getContext("2d")
context.textAlign = "center"

let currentScreen
let mode
let remainingTimer
let currentLevel = 0
let timerUpdateInterval
let frameUpdateInterval
let playersUpdateInterval
let canvasBoudingsTimeout
let physicalKeyboard
let gamepadConnected = false
let touchPressed = false
let touchEventHasBeenTriggered = false
let cookieExpires = new Date()
cookieExpires.setFullYear(cookieExpires.getFullYear() + 1)
cookieExpires = cookieExpires.toUTCString()

let gameAssetsLoaded
let checkAssetsInterval = setInterval(() => {
    if (gunfire.readyState === 4 && countdown.readyState === 4 && sprites.complete === true && fontLoaded === true) {
        gameAssetsLoaded = true
        clearInterval(checkAssetsInterval)
    }
})

async function initializeGame() {
    if (gameAssetsLoaded) {

        let keyboard = {}
        try {
            keyboard = await navigator.keyboard.getLayoutMap()
        } catch {
            keyboard.size = 1
        }
        physicalKeyboard = keyboard.size == 0 ? false : true

        changeCurrentScreen(screens.menu)

        canvas.addEventListener('touchstart', function (event) {
            touchPressed = true
            userInput(event.targetTouches[event.targetTouches.length - 1].clientX, event.targetTouches[event.targetTouches.length - 1].clientY)
        });
        canvas.addEventListener('touchend', function () {
            touchPressed = false
            touchEventHasBeenTriggered = true
        });
        canvas.addEventListener('mousedown', function (event) {
            if (touchEventHasBeenTriggered) {
                touchEventHasBeenTriggered = false
                return
            }
            userInput(event.clientX, event.clientY)
        });
        window.addEventListener('keydown', function (event) {
            userInput(undefined, undefined, event.key)
        });
        // Listen for when a gamepad connects
        window.addEventListener("gamepadconnected", (event) => {
            console.log("Gamepad connected:", event.gamepad);
            gamepadConnected = true
            document.querySelectorAll(".controllerButton").forEach(el => el.style.display = "inline-block")
            currentScreen.update()

            // Start polling the gamepad state
            pollGamepad();
            async function pollGamepad() {
                const gamepads = navigator.getGamepads();
                if (!gamepads) return;

                const gp = gamepads[0]
                let actionDone = false;
                if (gp) {
                    const buttons = gp.buttons;
                    const a = buttons[0];
                    const b = buttons[1];
                    const lt = buttons[6];
                    const rt = buttons[7];
                    const back = buttons[8];
                    const start = buttons[9];

                    if (a.pressed && currentScreen.name != "game") {
                        userInput(undefined, undefined, "f")
                        actionDone = true
                    }
                    if (b.pressed && currentScreen.name != "game") {
                        userInput(undefined, undefined, "j")
                        actionDone = true
                    }
                    if (back.pressed) {
                        location.href = "#main"
                    }
                    if (start.pressed) {
                        userInput(undefined, undefined, "h")
                        actionDone = true
                    }
                    if (lt.pressed && lt.value > 0.5) {
                        userInput(undefined, undefined, "f")
                        actionDone = true
                    }
                    if (rt.pressed && rt.value > 0.5) {
                        userInput(undefined, undefined, "j")
                        actionDone = true
                    }
                }

                //prevent multiple calls
                if (actionDone) await new Promise(r => setTimeout(r, 300));

                // Keep polling
                requestAnimationFrame(pollGamepad);
            }
        });
        return
    }
    setTimeout(initializeGame)
}

async function userInput(X, Y, key = undefined) {
    let boundingClientRect = canvas.getBoundingClientRect()
    X = canvas.width / boundingClientRect.width * (X - boundingClientRect.x)
    Y = canvas.height / boundingClientRect.height * (Y - boundingClientRect.y)
    console.log(X, Y, key)
    let leftSideinput
    let rightSideinput
    if (X < 375 || (mode == "single" && key != undefined) || ((mode == "multi") && (key == "f" || key == "F"))) leftSideinput = true
    if (mode == "multi" && (X > 1575 || key == "j" || key == "J")) rightSideinput = true
    if (currentScreen.name == "game") {
        if (leftSideinput && !isPlayerAlreadyStuck(players.first) && remainingTimer <= 0 && players.first.status != "dead") {
            players.first.reactionTime = -remainingTimer
            players.action(players.first, players.second)
            try {
                navigator.getGamepads()[0].vibrationActuator.playEffect("dual-rumble", {
                    duration: 150,
                    strongMagnitude: 1.0,
                    weakMagnitude: 0.3
                });
            } catch { }
            changeCurrentScreen(screens.end)
            return
        }
        if (rightSideinput && !isPlayerAlreadyStuck(players.second) && remainingTimer <= 0 && players.second.status != "dead") {
            players.second.reactionTime = -remainingTimer
            players.action(players.second, players.first)
            try {
                navigator.getGamepads()[0].vibrationActuator.playEffect("dual-rumble", {
                    duration: 150,
                    strongMagnitude: 1.0,
                    weakMagnitude: 0.3
                });
            } catch { }
            changeCurrentScreen(screens.end)
            return
        }
        try {
            navigator.getGamepads()[0].vibrationActuator.playEffect("dual-rumble", {
                duration: 1500,
                strongMagnitude: 1.0,
                weakMagnitude: 1
            });
        } catch { }
        return
    }
    if (currentScreen.name == "end") {
        if (leftSideinput && !players.first.reactionTime && !players.first.stuck) {
            players.first.reactionTime = -remainingTimer
            currentScreen.update()
            return
        }
        if (rightSideinput && !players.second.reactionTime && !players.second.stuck) {
            players.second.reactionTime = -remainingTimer
            currentScreen.update()
            return
        }
        if (remainingTimer >= -500) return
        if ((X > 375 && X < 1575 && Y > 150 && Y < 600) || key != undefined) {
            if (players.first.status == "dead" && mode == "single") {
                try {
                    gtag('event', 'wasted')
                } catch { }
            }
            if (players.second.status == "dead" && currentLevel == 9) {
                try {
                    gtag('event', `lvl10completed`)
                } catch { }
            }
            if (mode == "multi") {
                if (players.first.status == "dead") {
                    try {
                        gtag('event', 'player2won')
                    } catch { }
                } else {
                    try {
                        gtag('event', 'player1won')
                    } catch { }
                }
            }
            if (players.first.status == "dead" || mode == "multi" || currentLevel == 9) {
                changeCurrentScreen(screens.menu)
                return
            }
            currentLevel++
            try {
                gtag('event', `lvl${currentLevel}completed`)
            } catch { }
            changeCurrentScreen(screens.game)
            return
        }
        if ((X > 375 && X < 1575 && Y > 615 && Y < 735) && currentLevel == 9 && players.first.status != "dead") {
            let name = window.prompt(lang.achievementPrompt)
            try {
                gtag('event', 'achievementGenerated')
            } catch { }
            if (name != null && name != "" && name.length < 40) {
                result = await encryptAchievement(name)
                document.cookie = `achievement=${result};expires=${cookieExpires};`
                location.href = "/achievement"
                return
            }
            window.alert(lang.invalid)
        }
        return
    }
    if (currentScreen.name == "menu") {
        currentLevel = 0
        if ((X > 375 && X < 975 && Y > 150 && Y < 600) || (key == "f" || key == "F")) {
            mode = "single"
            await waitForInteractionLeave()
            changeCurrentScreen(screens.game)
            return
        }
        if ((X > 975 && X < 1575 && Y > 150 && Y < 600) || (key == "j" || key == "J")) {
            mode = "multi"
            await waitForInteractionLeave()
            changeCurrentScreen(screens.game)
            return
        }
        if ((X > 0 && X < 300 && Y > 0 && Y < 240) || (key == "h" || key == "H")) {
            location.hash = ""
            location.hash = "#article"
            return
        }
        if (X > 1650 && X < 1950 && Y > 0 && Y < 240) {
            await waitForInteractionLeave()
            try {
                gtag('event', 'shareFromMenu')
            } catch { }
            let dataToShare = {
                title: document.title,
                text: lang.description,
                url: location.origin + "/?lang=" + lang.currentLang
            }
            if (navigator.canShare(dataToShare)) {
                navigator.share(dataToShare)
            } else {
                window.open(location.origin, '_blank')
            }
            return
        }
        if ((X > 375 && X < 1575 && Y > 615 && Y < 735) && getCookie("achievement") != '') {
            location.href = "/achievement"
        }
        return
    }
    changeCurrentScreen(screens.menu)
}

const players = {
    first: {
        status: "standing",
        sourceX: 0,
        sourceY: 0,
        positionX: 75,
        initialsourceY: 0,
        moving: false,
        stuck: false,
        unstuckTimeout: undefined,
        reactionTime: undefined
    },
    second: {
        status: "standing",
        sourceX: 0,
        sourceY: 300,
        positionX: 1575,
        initialsourceY: 300,
        moving: false,
        stuck: false,
        unstuckTimeout: undefined,
        reactionTime: undefined
    },
    draw(player) {
        context.drawImage(
            sprites,
            player.sourceX, player.sourceY, //Sprite start position
            300, 300, //Sprite size
            player.positionX, 225, //On frame position
            300, 300 //On frame size
        )
    },
    reset(player) {
        player.status = "standing"
        player.sourceX = 0
        player.sourceY = player.initialsourceY
        player.moving = false
        player.stuck = false
        player.reactionTime = undefined
    },
    doWithdraw(player) {
        if (player.status == "standing") {
            if (player.sourceX != 1500) {
                player.sourceX += 300
                player.moving = true
                return
            }
            player.status = "withdraw"
            player.moving = false
        }
    },
    undoWithdraw(player) {
        if (player.status == "withdraw") {
            if (player.sourceX != 0) {
                player.sourceX -= 300
                player.moving = true
                return
            }
            player.status = "standing"
            player.moving = false
        }
    },
    shoot(shooter) {
        if (shooter.status == "withdraw" || shooter.status == "standing") {
            shooter.status = "shooting"
            shooter.sourceX = 0
            shooter.sourceY += 600
            shooter.moving = true
            return
        } else if (shooter.status == "shooting" && shooter.moving) {
            shooter.sourceX += 300
            if (shooter.sourceX == 1200) {
                shooter.sourceX += 300
                shooter.sourceY -= 600
                shooter.status = "withdraw"
                shooter.moving = false
            }
        }
    },
    die(dead) {
        if (dead.status == "withdraw" || dead.status == "standing") {
            dead.status = "dead"
            dead.sourceX = 0
            dead.sourceY += 1200
            dead.moving = true
            return
        }
        if (dead.status == "dead" && dead.moving) {
            dead.sourceX += 300
            if (dead.sourceX == 1200) dead.moving = false
        }
    },
    action(shooter, dead) {//Calls the shoot and die functions together so they do not conflict each other.
        players.shoot(shooter)
        players.die(dead)
    }
}

const levels = [
    { min: 270, max: 500 },//1
    { min: 225, max: 270 },//2
    { min: 185, max: 225 },//3
    { min: 150, max: 185 },//4
    { min: 120, max: 150 },//5
    { min: 95, max: 120 },//6
    { min: 75, max: 95 },//7
    { min: 60, max: 75 },//8
    { min: 50, max: 60 },//9
    { min: 40, max: 45 }//10
]

const screens = {
    game: {
        name: "game",
        update() {
            drawables.EveryFrameObjects()
            drawables.Timer()
            context.font = "72px game"
            context.fillStyle = "#5e4700"
            if (mode == "single") {
                context.fillText(lang.lvl + (currentLevel + 1), 975, 645)
            }
            if (players.first.stuck) {
                drawables.StuckMsg()
                context.fillText(lang.stuck, 225, 225)
            } else {
                context.fillStyle = "#000000"
                context.fillText((mode == "single" ? lang.you : lang.player + " 1"), 225, 225)
            }
            if (players.second.stuck) {
                drawables.StuckMsg()
                context.fillText(lang.stuck, 1725, 225)
            } else {
                context.fillStyle = "#000000"
                context.fillText((mode == "single" ? lang.enemy : lang.player + " 2"), 1725, 225)
            }
            if (mode == "single" && !players.first.stuck && remainingTimer <= 0 && parseInt(remainingTimer / 150) % 2 == 0) {
                context.drawImage(sprites, 1500, 600, 300, 300, 120, 360, 240, 240)
            }
        },
        onchange() {
            clearInterval(timerUpdateInterval)
            clearInterval(frameUpdateInterval)
            clearInterval(playersUpdateInterval)
            players.reset(players.first)
            players.reset(players.second)
            countdown.currentTime = 0
            countdown.play()
            let timerEnd = Date.now() + 3000
            remainingTimer = 3000
            currentScreen.update()
            setTimeout(() => {
                remainingTimer = 2000
                currentScreen.update()
            }, 1000)
            setTimeout(() => {
                remainingTimer = 1000
                currentScreen.update()
            }, 2000)
            setTimeout(() => {
                timerUpdateInterval = setInterval(() => {
                    remainingTimer = timerEnd - Date.now()
                })
                frameUpdateInterval = setInterval(() => {
                    currentScreen.update()
                }, 16)
                playersUpdateInterval = setInterval(() => {
                    if (remainingTimer < 100) {
                        if (!players.first.stuck) players.doWithdraw(players.first)
                        if (!players.second.stuck) players.doWithdraw(players.second)
                    }
                }, 30)
            }, 2850)
            if (mode == "single" && (currentLevel != 0 || getCookie("tutorial") != "")) {
                let enemyTrigger = randomIntFromInterval(levels[currentLevel].min, levels[currentLevel].max)
                setTimeout(() => {
                    players.second.reactionTime = -remainingTimer
                    if (players.second.status != "dead") {
                        players.action(players.second, players.first)
                        try {
                            navigator.getGamepads()[0].vibrationActuator.playEffect("dual-rumble", {
                                duration: 1500,
                                strongMagnitude: 1.0,
                                weakMagnitude: 1
                            });
                        } catch { }
                        changeCurrentScreen(screens.end)
                    }
                }, 3000 + enemyTrigger)
            }
            return
        }
    },
    end: {
        name: "end",
        update() {
            document.cookie = `tutorial=done;expires=${cookieExpires};`
            drawables.EveryFrameObjects()
            let stuckReaction = ((players.first.stuck && players.first.reactionTime == undefined) || (players.second.stuck && players.second.reactionTime == undefined))
            if (players.first.moving == false && players.second.moving == false) {
                clearInterval(frameUpdateInterval)
                clearInterval(playersUpdateInterval)
                clearInterval(timerUpdateInterval)
                if (stuckReaction) drawables.StuckMsg()
            }
            if (stuckReaction && parseInt(remainingTimer / 50) % 2 != 0) drawables.StuckMsg()
            context.fillStyle = "#fff"
            context.fillRect(375, 150, 1200, 450)
            context.fillStyle = "#5e4700"
            context.fillRect(390, 165, 1170, 420)
            context.fillStyle = "#fff"
            context.font = "75px game"
            if (mode == "single") {
                if (currentLevel != 9 || players.first.status == "dead") {
                    context.fillText((players.first.status == "dead" ? lang.wasted : lang.lvl + (currentLevel + 1) + lang.completed), 975, 285)
                    context.fillText(lang.taphere, 975, 375)
                } else {
                    context.font = "90px game"
                    context.fillText(lang.gameCompleted1, 975, 255)
                    context.fillText(lang.gameCompleted2, 975, 345)
                    context.fillText(lang.gameCompleted3, 975, 420)
                    let colorsSwitch = parseInt(remainingTimer / 50) % 2 == 0 ? true : false
                    context.fillStyle = (colorsSwitch ? "#fff" : "#5e4700")
                    context.fillRect(375, 615, 1200, 120)
                    context.fillStyle = (colorsSwitch ? "#5e4700" : "#fff")
                    context.fillRect(390, 630, 1170, 90)
                    context.fillStyle = (colorsSwitch ? "#fff" : "#5e4700")
                    context.fillText(lang.shareAchievement, 975, 699)
                }
                context.font = "48px game"
                context.fillStyle = "#fff"
                if (players.first.stuck && players.first.reactionTime == undefined) {
                    context.fillText(lang.you + lang.wasStuck, 975, 480)
                } else if (players.first.reactionTime >= 0) {
                    context.fillText(lang.yourReaction + players.first.reactionTime + "ms", 975, 480)
                }
                if (players.second.reactionTime >= 0) {
                    context.fillText(lang.enemyReaction + players.second.reactionTime + "ms", 975, 540)
                }
            } else {
                context.fillText((players.first.status == "dead" ? lang.won2 : lang.won1), 975, 285)
                context.fillText(lang.taphere, 975, 375)
                context.font = "48px game"
                if (players.first.stuck && players.first.reactionTime == undefined) {
                    context.fillText(lang.player + " 1" + lang.wasStuck, 975, 480)
                } else if (players.first.reactionTime >= 0) {
                    if (players.first.status == "dead" && players.first.reactionTime == players.second.reactionTime) {
                        players.first.reactionTime += randomIntFromInterval(0, 5);
                    }
                    context.fillText(lang.reaction1 + players.first.reactionTime + "ms", 975, 480)
                }
                if (players.second.stuck && players.second.reactionTime == undefined) {
                    context.fillText(lang.player + " 2 " + lang.wasStuck, 975, 540)
                } else if (players.second.reactionTime >= 0) {
                    if (players.second.status == "dead" && players.first.reactionTime == players.second.reactionTime) {
                        players.second.reactionTime += randomIntFromInterval(0, 5);
                    }
                    context.fillText(lang.reaction2 + players.second.reactionTime + "ms", 975, 540)
                }
            }
        },
        onchange() {
            clearInterval(playersUpdateInterval)
            playersUpdateInterval = setInterval(() => {
                if (players.first.status == "shooting") {
                    players.action(players.first, players.second)
                } else if (players.second.status == "shooting") {
                    players.action(players.second, players.first)
                }
                if (players.first.status == "withdraw") {
                    players.undoWithdraw(players.first)
                }
                if (players.second.status == "withdraw") {
                    players.undoWithdraw(players.second)
                }
            }, 80)
            if (players.first.stuck && players.first.reactionTime == undefined) clearTimeout(players.first.unstuckTimeout)
            if (players.second.stuck && players.second.reactionTime == undefined) clearTimeout(players.second.unstuckTimeout)
            gunfire.currentTime = 0
            gunfire.play()
            return
        }
    },
    menu: {
        name: "menu",
        update() {
            drawables.EveryFrameObjects()
            context.fillStyle = "#000000"
            context.drawImage(sprites, 1500, 1200, 300, 300, 105, 45, 135, 135)
            context.font = "150px game"
            context.fillText("?", 255, 159)
            context.drawImage(sprites, 1500, 900, 300, 300, 1695, 45, 165, 165)
            context.fillStyle = "#fff"
            context.fillRect(375, 150, 1200, 450)
            context.fillStyle = "#5e4700"
            context.fillRect(390, 165, 570, 420)
            context.fillRect(990, 165, 570, 420)
            context.fillStyle = "#fff"
            context.font = "111px game"
            context.fillText("1", 675, 360)
            context.fillText("2", 1275, 360)
            context.fillText(lang.player, 675, 450)
            context.fillText(lang.players, 1275, 450)
            if (physicalKeyboard) {
                context.font = "48px  game"
                context.fillText(lang.press + "  ", 675, 510)
                context.fillText(lang.press + "  ", 1275, 510)
                context.fillStyle = "#000000"
                context.fillText(lang.press + "  ", 195, 195)
                context.drawImage(sprites, 1550, 1830, 100, 100, 770, 470, 50, 50)
                context.drawImage(sprites, 1660, 1830, 100, 100, 1370, 470, 50, 50)
                context.drawImage(sprites, 1550, 1940, 100, 100, 290, 150, 50, 50)
            }
            if (gamepadConnected) {
                context.fillStyle = "#fff"
                context.font = "48px  game"
                context.fillText(lang.press + "   ", 675, 561)
                context.fillText(lang.press + "   ", 1275, 561)
                context.drawImage(sprites, 1550, 1500, 100, 100, 770, 525, 50, 50)
                context.drawImage(sprites, 1660, 1500, 100, 100, 1370, 525, 50, 50)
                context.fillStyle = "#000000"
                context.fillText(lang.press + "  ", 195, 246)
                context.drawImage(sprites, 1660, 1610, 100, 100, 290, 210, 50, 50)
            }
            if (getCookie("achievement") != '') {
                context.font = "90px game"
                context.fillStyle = "#fff"
                context.fillRect(375, 615, 1200, 120)
                context.fillStyle = "#5e4700"
                context.fillRect(390, 630, 1170, 90)
                context.fillStyle = "#fff"
                context.fillText(lang.shareAchievement, 975, 699)
            }
        },
        onchange() {
            //both players need to be reseted
            //otherwise animations can break
            players.reset(players.first)
            players.reset(players.second)
            //intervals need to be cleared
            //otherwise it can generate unneeded CPU usage
            clearInterval(frameUpdateInterval)
            clearInterval(playersUpdateInterval)
            clearInterval(timerUpdateInterval)
            countdown.pause()
            gunfire.pause()
            currentScreen.update()
        }
    }
}

const drawables = {
    EveryFrameObjects() { //Backgorund and both characters.
        context.clearRect(0, 0, 1950, 750)
        context.fillStyle = "#deb887"
        context.fillRect(0, 0, 1950, 750)
        context.drawImage(sprites, 0, 1800, 1365, 687, 300, 30, 1365, 687)
        players.draw(players.first)
        players.draw(players.second)
    },
    Timer() {
        if (remainingTimer <= -1000) return
        context.beginPath()
        context.arc(975, 375, 150, 0, Math.PI * 2)
        context.closePath()
        if (remainingTimer <= 0) {
            context.fillStyle = "#f00"
            context.fill()
            context.fillStyle = "#fff"
            context.font = "90px game"
            context.fillText(lang.shoot, 975, 405)
            return
        }
        context.fillStyle = "#000"
        context.fill()
        context.fillStyle = "#fff"
        context.font = "420px game"
        if (remainingTimer <= 1000) {
            context.fillText("1", 975, 489)
            return
        }
        if (remainingTimer <= 2000) {
            context.fillText("2", 975, 489)
            return
        }
        if (remainingTimer <= 3000) {
            context.fillText("3", 975, 489)
            return
        }
    },
    StuckMsg() {
        context.fillStyle = "#fff"
        context.font = "70px game"
        context.fillText(lang.stuckMsg, 975, 75)
    }
}

async function changeCurrentScreen(newScreen) {
    if (newScreen == currentScreen) return
    currentScreen = newScreen
    await newScreen.onchange()
    newScreen.update()
}

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

function isPlayerAlreadyStuck(player) {
    if (player.stuck) {
        clearTimeout(player.unstuckTimeout)
        player.unstuckTimeout = setTimeout(unstuckPlayer, 1500, player)
        return true
    }
    player.stuck = true
    setTimeout(() => {
        currentScreen.update()
    }, 50);
    player.unstuckTimeout = setTimeout(unstuckPlayer, 1500, player)
    return false
}

function unstuckPlayer(player) {
    player.stuck = false
    if (currentScreen.name == "game") currentScreen.update()
}

function getCookie(cname) {
    let name = cname + "=";
    let ca = document.cookie.split(';');
    for (c of ca) {
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function waitForInteractionLeave() {
    return new Promise(checkPress = (r) => {
        if (touchPressed) {
            setTimeout(() => {
                checkPress(r)
            })
        } else {
            r()
        }
    })
}