Select Git revision
stringfun.c
-
Charles Barnwell authoredCharles Barnwell authored
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";
}
// }