Skip to content
Snippets Groups Projects
Select Git revision
  • 51b1271579807aff8115fb3779775caf767134cd
  • main default
2 results

stringfun.c

Blame
  • game.js 9.77 KiB
    let file = "game";
    let gameId;
    let currUser = {};
    
    let walkLeft = new Image();
    let walkRight = new Image();
    let deadLeft = new Image();
    let deadRight = new Image();
    let meteorImg = new Image();
    // let bg = new Image();
    // bg.src = "/dino_bg.png";
    
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    
    let meteors = [];
    let meteorCreation = false;
    
    let startBtn = document.getElementById("startBtn");
    let readyBtn = document.getElementById("readyBtn");
    let navSignout = document.getElementById('navigateSignout');
    let resBtn = document.getElementById("resBtn");
    let leaveBtn = document.getElementById("leaveBtn");
    
    document.addEventListener("keydown", keydownHandler, false);
    document.addEventListener("keyup", keyupHandler, false)
    startBtn.addEventListener("click", () => {
        socket.emit("startGame");
    });
    startBtn.disabled = true;
    readyBtn.addEventListener("click", () => {
    
        let payload = {
            username: currUser.username
        };
        socket.emit("readyGame", payload);
        readyBtn.disabled = true;
    });
    navSignout.addEventListener('click', navigateSignout);
    resBtn.addEventListener("click", () => {
        window.location = `/game.html/${currUser.gameId}`;
    });
    leaveBtn.addEventListener("click", () => {
        window.location = "/rooms.html";
    });
    
    let playerUp = false;
    let playerLeft = false;
    let playerRight = false;
    let playerJump = false;
    let maxSpeed = 5;
    let payload = {};
    
    function game() {
        function storeGameId(url) {
            let gameUrl = url;
            let urlParts = gameUrl.split("/");
            gameId = urlParts[urlParts.length - 1];
            currUser.gameId = gameId;
        }
        storeGameId(window.location.href);
        console.log("gameid:", gameId);
    
        //firebase
        firebase.auth().onAuthStateChanged(firebaseUser => {
            if (firebaseUser) {
                currUser.uid = firebaseUser.uid;
                firebase.database().ref("users/" + currUser.uid).once('value').then(snapshot => {
                    currUser.username = (snapshot.val().username || 'Anonymous');
                    console.log("player:", currUser.username);
                    socket.emit("player", currUser);
                });
            }
            else {
                navigateSignout();
            }
        });
    }
    
    //Draw to ctx
    meteorImg.src = "/meteor.png";
    walkLeft.src = "/idle_left.png";
    walkRight.src = "/idle_right.png";
    deadRight.src = "/dead_idle_left.png";
    deadLeft.src = "/dead_idle_right.png";
    
    
    ctx.font = "30px Arial";
    
    socket.on("newPosition", data => {
        ctx.clearRect(0, 0, 1500, 750);
    	// ctx.drawImage(bg, 0, 0, 1000, 500, 0, 0, 1500, 750)
        for (let i = 0; i < data.length; i++) {
            if (data[i].direction === "left" && data[i].alive){
                ctx.drawImage(walkLeft, 27, 7, 50, 48, data[i].x, data[i].y, 50, 48)
            }  
            else if (data[i].direction === "right" && data[i].alive){
                ctx.drawImage(walkRight, 27, 7, 50, 50, data[i].x, data[i].y, 50, 50)
            }
            else if (data[i].direction === "left"){
                ctx.drawImage(deadLeft, 20, 0, 75, 70, data[i].x, data[i].y-5, 75, 70)
    			let status = document.getElementById(`status${i}`)
                status.textContent = "Dead"
            }
            else if (data[i].direction === "right"){
                ctx.drawImage(deadRight, 0, 0, 75, 70, data[i].x, data[i].y-5, 75, 70)
    			let status = document.getElementById(`status${i}`)
                status.textContent = "Dead"
            }
        }
        updateMeteors();
        for (let i in meteors) {
            meteor = meteors[i]
            ctx.beginPath();
            ctx.arc(meteor.x, meteor.y, 20, 0, 2 * Math.PI);
            ctx.stroke();
            ctx.drawImage(meteorImg, 5, 5, 32, 32, meteor.x-31, meteor.y-50, 100, 100)
        }
    });
    
    //meteors
    canvas.addEventListener("click", (event) => {
        if (meteorCreation === true) {
            meteorCreation = false;
            let timeout = setTimeout(() => {
                meteorCreation = true;
            }, 1000); //1second for testing
    
            // let payload = {x: event.clientX};
            let rect = canvas.getBoundingClientRect();
            let payload = {x: event.clientX - rect.left}
            socket.emit("createMeteor", payload); 
        }
    })
    
    function updateMeteors(){
        for (let i in meteors) {
            meteor = meteors[i];
            meteor.y += 10;
    
            if (meteor.y > 720) {
                let payload = {
                    id: meteor.id
                };
                socket.emit("deleteMeteor", payload);
                meteors.shift();
            }
        }
    }
    
    socket.on("drawMeteor", (data) => {
        meteors.push({
            id: data.id,
            x: data.x,
            y: 0
        });
        console.log(meteors);
    })
    socket.on("startMeteor", () => {
        meteorCreation = true;
        startBtn.disabled = true;
    });
    
    // sends new positions to server after player is created
    socket.on("playerCreated", (data) => {
        storePosition(data);
        let interval = setInterval(() => {
            updatePlayerPos();
            socket.emit("updatePlayerPos", payload);
        }, 1000/60); //40fps
    })
    
    socket.on("updateScoreboard", data => {
        let scoreboard = document.getElementById("scoreboard");
        console.log(scoreboard.firstChild)
        while (scoreboard.childNodes.length > 1) {
            scoreboard.removeChild(scoreboard.childNodes[1]);
        }
        for(let i = 0; i < data.length; i++) {
            let user = document.createElement("tr");
            let name = document.createElement("td");
            let name_text = document.createTextNode(data[i].username);
            let status = document.createElement("td");
            status.setAttribute("id", `status${i}`)
            let readied = document.createElement("td");
            
            let living = dead();
            function dead() {
                if (data[i].alive === true) {
                    return "Alive"
                }
                else {
                    return "Dead"
                }
            };
            let r = readyState()
            function readyState(){
                if (data[i].ready){
                    console.log("im ready");
                    return "Ready"
                }
                else {
                    console.log("not ready yet");
                    return "Not Ready"
                }
            }
            
            let status_text = document.createTextNode(living);
            let readied_text = document.createTextNode(r);
            name.append(name_text);
            status.append(status_text);
            readied.append(readied_text);
            user.append(name);
            user.append(status);
            user.append(readied);
    
            scoreboard.append(user);
            console.log("updating board");
        } 
    })
    
    socket.on("storePosition", data => {
        storePosition(data);
    });
    
    socket.on("updateHost", () => {
        startBtn.style.display = "block";
    })
    
    socket.on("allReady", () => {
        console.log("all players ready");
        startBtn.disabled = false;
    })
    
    socket.on("gameOver", (data) => {
        console.log("Winner:", data);
        document.getElementById("winnerTxt").textContent = (data + " survived and evolved!");
        document.getElementById("gameOverModal").style.display = "flex";
    });
    
    socket.on("winnerOfGame", (data) => {
        let oldScore;
        let dbRef = firebase.database().ref("users/" + data);
        dbRef.once('value').then(snapshot => {
            oldScore = snapshot.val().score;
            dbRef.update({"score": oldScore+1});
        });
        // firebase.database().ref("users/" + data).update({"score": oldScore+1})
        // firebase.database().ref("users/" + currUser.uid).once('value').then(snapshot => {
        //     console.log("player:", currUser.username);
        //     oldScore = snapshot.val().score;
        // });
    });
    
    socket.on("kickPlayer", () => {
        navigateSignout();
    });
    socket.on("leavePlayer", () => {
        leaveRoom();
    });
    
    
    //Player mechanics
    function keydownHandler(event) {
        if(event.keyCode === 87 || event.keyCode === 32) {
            playerUp = true;
        }
        if(event.keyCode === 65) {
            playerLeft = true;
        }
        if(event.keyCode === 68) {
            playerRight = true;
        }
    }
    function keyupHandler(event) {
        if(event.keyCode === 87 || event.keyCode === 32) {
            playerUp = false;
        }
        if(event.keyCode === 65) {
            playerLeft = false;
        }
        if(event.keyCode === 68) {
            playerRight = false;
        }
    }
    
    function storePosition(data) {
        payload.x = data.x;
        payload.y = data.y;
        payload.direction = data.direction;
        payload.alive = data.alive;
    }
    
    function updatePlayerPos() {
        if (payload.alive){
            payload.alive = killDino(payload.x,payload.y);
        }
        if (playerUp && payload.y >= 700 && payload.alive) { //if dino is on the ground and user presses jump
            //payload.alive = killDino(payload.x,payload.y);
            playerJump = true;
        }
        if (payload.y<700){ //if dino reaches max height, fall
            payload.y += maxSpeed;
        }
        if(playerJump && payload.y>650 && payload.alive) { //if dino is jumping and below height limit, dino goes up
            payload.y -= 10;
            //payload.alive = killDino(payload.x,payload.y);
        }
        if(payload.y<650){ //if dino reached max height limit, dino is no longer jumping
            playerJump = false;
        }
        if(playerLeft && payload.alive) {
            payload.direction = "left";
            //payload.alive = killDino(payload.x,payload.y);
            if (payload.x>0){
                payload.x -= maxSpeed;
            }
        }
        if(playerRight && payload.alive) {
            payload.direction = "right";
            //payload.alive = killDino(payload.x,payload.y);
            if (payload.x<1450){
                payload.x += maxSpeed;
            }
        }
    }
    
    function killDino(x,y){
        for (let i in meteors) {
            meteor = meteors[i];
            if (meteor.x >= x-18 && meteor.x <= x+66 && meteor.y >= 700){
                console.log("HIT");
                socket.emit("playerDied", currUser.username);
                return false;
            }
        }
        return true;
    }
    
    function navigateSignout(){
        firebase.auth().signOut().then(function() {
        // Sign-out successful.
        window.location = "/index.html";
        }).catch(function(error) {
        // An error happened.
        });
    }
    
    function leaveRoom() {
        window.location = "/rooms.html";
    }
    
    // }