const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); let failCounter = 0; let score = 0; const image1 = new Image(); image1.src = "screech1.png"; const image2 = new Image(); image2.src = "screech2.png"; const image3 = new Image(); image3.src = "screech3.png"; let text = ""; let alreaddyFailed = false; let loops = 0; let alreadyReset = false; let obstacles = []; const x = canvas.width / 2; let circleX = canvas.width / 4; let circleY = canvas.height - 50; let circleVelocity = 0; let squarex = canvas.width - 1; let squarey = canvas.height - 50; let squarevelocity = 0; let gameRun = true; let obstacle; let obstacleX = canvas.width; let obstacleY; let obstacleInUse = false; let obstacleheight, obstaclewidth; var canJump = 2; let isJumping = false; let failChecker = false; const building1 = new Image(); building1.src = "UNW_Icons-11.png"; const building2 = new Image(); building2.src = "UNW_Icons-12.png"; const building3 = new Image(); building3.src = "UNW_Icons-13.png"; const building4 = new Image(); building4.src = "UNW_Icons-14.png"; let building; let buildingX, buildingY, buildingheight, buildingwidth; var bgX = 0; var bgImg = new Image(); bgImg.src = "clouds.png"; bgImg.onload = function () { setInterval(draw, 10); }; let imageTypeIndex = 0; const imageTypes = [image1, image2]; let image = imageTypes[imageTypeIndex]; function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); // draw the background image ctx.drawImage(bgImg, bgX, 0, canvas.width, canvas.height); ctx.drawImage(bgImg, bgX + canvas.width, 0, canvas.width, canvas.height); drawBuilding(); //console.log("Drawing..."); drawObstacles(); // update the x-coordinate of the background image if (gameRun == true) { bgX = (bgX - 1) % canvas.width; } // Draw the image onto the canvas if (isJumping == true) { image = image3; } if (loops % 50 == 0) { imageTypeIndex = (imageTypeIndex + 1) % imageTypes.length; image = imageTypes[imageTypeIndex]; } ctx.drawImage(image, circleX - 20, circleY - 20, 60, 90); if (gameRun == true) { circleY += circleVelocity; circleVelocity += 0.4; } if (circleY > canvas.height - 75) { circleY = canvas.height - 75; canJump = 2; isJumping = false; } // Check for collisions with obstacles const imageBounds = { left: circleX - 20, right: circleX + 20, top: circleY - 20, bottom: circleY + 20, }; if ( obstacleInUse && imageBounds.left < obstacleX + obstaclewidth && imageBounds.right > obstacleX && imageBounds.top < obstacleY + obstacleheight && imageBounds.bottom > obstacleY && gameRun == true ) { console.log("Collision!"); gameRun = false; //checkSameObstacleHit(obstacle.image); //checkSameObstacleHit(obstacleIndex); // Call the function to check if it's the same obstacle as the last failure } if (gameRun) { loops += 1; console.log("Adding 1 to the loop counter..."); } if (loops == 100 && gameRun == true) { // console.log("Creating Obstacle..."); createRandomObstacle(); loops = 0; } // THIS IS THE DEATH FUNCTION MAYBE I CAN FIND IT NOW // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // Morgan is still working on this ctx.font = "30px serif"; ctx.fillText("Score: " + score, 20, 40); if (gameRun == false) { //console.log(obstacle.image) // console.log("upper") //text="You failed miserably..."; // ctx.font = "50px serif"; failCounter += 1; alreaddyFailed = true; alreadyReset = false; score=0; ctx.fillText(text, 60, (canvas.height / 2)); restartController(); // Call the function outside draw } } // draw function end // restart functions function restartController(){ let restartButton = document.getElementById('restart-btn'); const restartButtonContainer = document.querySelector('.restart-button'); const canvasElement = document.getElementById("canvas"); canvasElement.classList.add("game-over"); // event listener for restart button restartButton.addEventListener('click', restartGame); restartButton.addEventListener("click", function() { canvasElement.classList.remove("game-over"); }); restartButtonContainer.style.display = 'block'; // show restart button console.log("show restart"); setGameOverBackground(); } function setGameOverBackground() { // background const rectangleElement = document.getElementById("rectangle"); rectangleElement.style.display = "block"; // message const failMessage = document.getElementById("failMessage"); failMessage.style.display = "block"; /* if (failChecker == true){ const failMessage = document.getElementById("failMessageDouble"); failMessage.style.display = "block"; }else{ const failMessage = document.getElementById("failMessage"); failMessage.style.display = "block"; } */ //const textElement = document.createElement("div"); //textElement.textContent = "Hello"; //textElement.classList.add("game-over-text"); //textElement.style.zIndex = "2"; //const bodyElement = document.querySelector("body"); //bodyElement.appendChild(textElement); //text = "You failed miserably..."; const canvasElement = document.getElementById("canvas"); canvasElement.classList.add("game-over"); } function restartGame() { const restartButtonContainer = document.querySelector('.restart-button'); const rectangleElement = document.getElementById("rectangle"); const failMessage = document.getElementById("failMessage"); obstacles = []; // console.log("Resetting Obstacles..."); drawObstacles(); gameRun = true; loops = 0; restartButtonContainer.style.display = 'none'; // Hide the restart button rectangleElement.style.display = "none"; failMessage.style.display = "none"; console.log("hide restart"); } //function showRestartButton() { // const restartButtonContainer = document.querySelector('.restart-button'); // restartButtonContainer.style.display = 'block'; //} // end of restart functions let lastFailedObstacleIndex = -1; // Initialize with an invalid index function checkSameObstacleHit(obstacleIndex) { console.log("In check") //let failChecker = false; if (lastFailedObstacleIndex === obstacleIndex) { console.log("The same obstacle was hit as the last failure."); failChecker = true; // Perform your desired actions here } else { console.log("A different obstacle was hit than the last failure."); failChecker = false; // Perform your desired actions here } lastFailedObstacleIndex = obstacleIndex; // Update the last failed obstacle index } let buildingTypeIndex = 0; buildingX = canvas.width; function drawBuilding() { const buildingTypes = [building1, building2, building3, building4]; const building = buildingTypes[buildingTypeIndex]; const buildingHeight = 200; const buildingWidth = 250; if (gameRun == true) { buildingX -= 2; } if (buildingX < -buildingWidth) { buildingX = canvas.width; buildingTypeIndex = (buildingTypeIndex + 1) % buildingTypes.length; } const buildingY = canvas.height - buildingHeight - 60; ctx.drawImage(building, buildingX, buildingY, buildingWidth, buildingHeight); } function createObstacle(image, x, y, width, height) { return { image, x, y, width, height, }; } function drawObstacles() { obstacles.forEach((obstacle, index) => { ctx.drawImage(obstacle.image, obstacle.x, obstacle.y, obstacle.width, obstacle.height); // Check for collision with character if ( circleX - 20 < obstacle.x + obstacle.width && circleX + 20 > obstacle.x && circleY - 20 < obstacle.y + obstacle.height && circleY + 20 > obstacle.y && gameRun ) { if (obstacle.image.src == "http://localhost:5500/Coin.png") { obstacles.splice(index, 1); score += 1; } else { console.log("Collision!"); // console.log(obstacle.image); gameRun = false; // obstacleIndex = obstacles.indexOf(obstacle); // Set the obstacleIndex using indexOf() // let obstacleFailCheck = obstacle.Image; //console.log(); //checkSameObstacleHit(obstacle.image); //baseURI } } if (gameRun) { obstacle.x -= 5; } // Remove obstacle if it goes off screen if (obstacle.x < -obstacle.width) { obstacles.splice(index, 1); } }); } // Code to create and add an obstacle to the obstacles array const obstacle1 = new Image(); obstacle1.src = "bus.png"; const obstacle2 = new Image(); obstacle2.src = "IMG_2528.png"; const obstacle3 = new Image(); obstacle3.src = "rock.png"; const coin = new Image(); coin.src= "Coin.png"; function createRandomObstacle() { const randomNum = Math.floor(Math.random() * 4) + 1; let obstacleImage; let obstacleHeight; let obstacleWidth; let heightVariable = 40; let coinMin = 50; let coinMax = 325; let coinRand; switch (randomNum) { case 1: obstacleImage = obstacle1; obstacleHeight = 100; obstacleWidth = 215; break; case 2: obstacleImage = obstacle2; obstacleHeight = 150; obstacleWidth = 50; break; case 3: obstacleImage = obstacle3; obstacleHeight = 80; obstacleWidth = 105; break; case 4: obstacleImage = coin; obstacleHeight = 60; obstacleWidth = 60; // create random height coinRand = Math.floor(Math.random() * (coinMax - coinMin)); heightVariable = coinRand + coinMin; break; default: obstacleImage = obstacle1; obstacleHeight = 100; obstacleWidth = 120; break; } const obstacleX = canvas.width; const obstacleY = canvas.height - obstacleHeight - heightVariable; const obstacle = createObstacle(obstacleImage, obstacleX, obstacleY, obstacleWidth, obstacleHeight); obstacles.push(obstacle); } let obstacleIndex; document.addEventListener("keydown", (event) => { if (((event.code === "Space" && !isJumping) || (canJump > 0 && event.code === "Space")) && gameRun == true) { circleVelocity = -11; isJumping = true; canJump -= 1; } });