Home Play Monster Clicker! About the Game Code Peer Evaluation Rubric

Welcome to our GUI assignment for this unit! In this assignment, we will be making a clicker game with a twist! Instead of clicking a cookie, you are clicking an attack button which can strike enemies and defeat them! Defeating enemies can cause you to gain the in-game currency, Schmeckles! After gaining enough Schmeckles, you can go into the battle shop to buy upgrades to make your attack button stronger! As you defeat each wave of enemies, the new wave will come back a bit stronger so make sure you upgrade your sword in the shop consistently or the enemies may get a bit too strong and you will be clicking for a long time! Overall your main objective is to defeat as many monsters as you can, so good luck clicking those monsters! For in-depth instructions on how to play, check out the "About the Game" page using the dropdown menu in the top left of the website.

How to Play

Controls
-
Left Mouse Button: Use the Left Mouse Button on the attack button to strike the enemy!
-
Store Button: Access the store!
-
Purple Star Button - Toggle the ability of the Mage!
-
The above bought is only available once you've botten the mage.

Monster Clicker GAME
Home Play Monster Clicker! About the Game Code Peer Evaluation Rubric

How to Play / Instructions

Your main objective is to defeat as many enemies as you can, and push yourself to reach the highest wave number that you can (a wave number signifies the number of monsters you have defeated including the one you are currently fighting). In order to defeat the monsters, you must press the "ATTACK" button to attack the enemy. Or, you can press the "SHOP" button to shop. In the shop you will be greeted by the Shopkeeper, who you can buy items from by clicking the item's image of which you'd like to buy. In the shop, you will see an "X" button in the corner of the item selection scene. When you click this button, it will bring you out of the shop, and back to the monster clicking! In the shop, each sword's damage goes up in order of it's rarity (making the common sword the weakest and legendary the most powerful). Swords make your attack clicks stronger. The mage however, aids you in battle, and automatically deals 5 damage to the currently fought monster every second. However, once you have boughten the mage, you must activate it by clicking a new button which will appear in the corner of your screen once you have bought the mage. These items can be especially useful when fighting a boss. A boss will appear fifth wave. After you beat a boss, you will be able to open a chest, which will grant you extra Schmeckles (Schmeckles is the currency which allows you to buy items at the shop)! To open the chest press the attack button. Congratulations! If you've read this whole paragraph, then you are now an expert Monster Clicker! Enjoy playing Monster Clicker, and be sure to compete for the highest wave number with your friends (just be sure not to break the game)!


Screenshots

Screenshot 1

The above screenshot depicts the start menu that the player is greeted with upon starting the game. Below the Start Game button is a disclaimer telling the user the optimal resolution that they should play the game in.

Screenshot 2

This screenshot shows the screen that the player will be spending the most time on. The object in the middle is the enemy that the player fights. On the right side are the two main buttons, the Attack Button and the Shop Button. Above, there are three labels. On the far left is the Schemeckles counter. In the middle is the wave counter and on the far right is the HP of the enemy.

Screenshot 3

This is the main shop area. In the middle, you are greeted by the friendly Shopkeeper. On the left is the Shop Menu, the main area where you can purchase one of five items.

Screenshot 4

Every 5 waves, you are greeted with a Boss Fight. Make sure that you purchase powerups from the shop to make your battles easier!!!

Screenshot 5

Congratulations! You beat the Boss! Now, hit the Attack Button to open your chest full of Schmeckles!


New Code We Made Use Of

Special Code Screenshot

The 'setTimeout()' function was the snippet of code that we chose to add to our game. This code houses a function that executes after a specified amount of time (measured in milliseconds aka 1/1000 seconds). This is used various times in our code in order to depict the enemy being hit, the shopkeeper indicating their excitement and finally, having the mage's special ability take effect. Within the 'setTimeout()', normal code can be written using Javascript or jQuery. For example, if the programmer writes an alert to go off after 1000 ms (equal to 1s), the code will execute only after that specified amount of time has passed. Not before, not after. This allows us to create the illusion of certain objects in our code being animated.


The Testing Table for Our Code



About the Creators

David Jeremy Sohail

Our names are David Cacorovski, Jeremy Thummel (the guy who made a lot of the cool pixel art) and Sohail Meghani. We were assigned with creating a game using a combination of our skills in Javascript (JS) and jQuery. The above images and text in this page showcase screenshots that depict how the game works as well as any other mechanics that the game employs. Furthermore, you can also take a look at a special snippet of code that we had not learned in class that is very helpful to making our game run smoothly and properly for the player.

Roles

David - Programmer
Jeremy - Programmer
Sohail - Programmer



Peer Evaluation



Monster Clicker GAME
Home Play Monster Clicker! About the Game Code Peer Evaluation Rubric

Click Here to Play!
Attack Button Shop Button Mage Button
/* David Cacorovski, Jeremy Thummel, Sohail Meghani 29/10/2020 Unit 2 Gui-Based Assignment This is the JS Code for our Assignment */ //**** Sohail Meghani 29/10/2020 11:11 AM Added dropdown JS code //Code taken from https://www.w3schools.com/howto/howto_js_dropdown.asp /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown menu if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } /* David Cacorovski, Jeremy Thummel, Sohail Meghani 29/10/2020 Unit 2 Gui-Based Assignment This is the Javascript Code for our Assignment */ /* ** David Cacorovski 29/10/2020 11:17AM Added some variables and doc ready. ** */ /* ** Jeremy Thummel 29/10/2020 10:15AM Added enemy / player health variables. ** */ /* ** Jeremy Thummel 5/11/2020** Added shop variables*/ // Sohail Meghani 9/11/2020 11:50PM Fixed some errors and grammar let money = 0; let total; let commonChest; let eliteBattleChest; let wave = 1; let enemyNumber = 0; let enemyHealth = 0; let playerHealth = 100; let loopNumber = 0; let moneyLoop = 0; let keyPressed; let shopOpen = false; // WEAPON UPGRADE VARIABLES let trueCS = true; let trueUS = true; let trueRS = true; let trueLS = true; let trueM = true; let upgradeCountCS = 0; let moneyCS = 4; let commonSword; let upgradeCountUS = 0; let moneyUS = 0; let uncommonSword; let upgradeCountRS = 0; let moneyRS = 0; let rareSword; let upgradeCountLS = 0; let moneyLS = 0; let legendarySword; let upgradeCountM = 0; let moneyM = 0; let mage; let mageBought = false; //NUMBERS VARIABLES let enemyGetHit; let moneyRandom; //MONEY CONSTANTS const MONEYZ = 10; const MONEYZ2 = 25; const MONEYZ3 = 50; const MONEYZ4 = 100; const MONEYZ5 = 75; // MUSIC var backgroundMusic = new Audio("../audio/battleMusic.wav"); var shopMusic = new Audio("../audio/shopMusic.wav"); var shopBuy = new Audio("../audio/shopBuy.mp3"); var error = new Audio("../audio/error.mp3"); //ITEMS let chest = 0; // START OF GAME CODE: $(document).ready(function() { // Jeremy Thummel 3/11/2020 10:05 AM Added #btnAttack animation // Jeremy Thummel 3/11/2020 11:03 AM Added random enemy fade-ins $('#image-final').css('filter', 'blur(8px)'); $('#image-final').css('-webkit-filter', 'blur(8px)'); $("#btnShop").css('opacity', '0'); $("#btnMage").css('opacity', '0'); $("#btnAttack").css('opacity', '0'); $("#enemy1").css('opacity', '0'); $("#enemy2").css('opacity', '0'); $("#enemy3").css('opacity', '0'); $("#enemyBoss").css('opacity', '0'); $("#chest").css('opacity', '0'); $("#wave").css('opacity', '0'); $("#money").css('opacity', '0'); $("#monsterHealth").css('opacity', '0'); $("#btnShopBackground").css('opacity', '0'); $("#btnExit").hide(); $("#lblShopStage").hide(); $("#common").hide(); $("#uncommon").hide(); $("#rare").hide(); $("#legendary").hide(); $("#mage").hide(); $("#txtCommon").hide(); $("#txtUncommon").hide(); $("#txtRare").hide(); $("#txtLegendary").hide(); $("#txtMage").hide(); $("#shopKeeper1").hide(); $("#shopKeeper2").hide(); $("#txtCommon").text("Common Sword $10"); $("#txtUncommon").text("Uncommon Sword $25"); $("#txtRare").text("Rare Sword $50"); $("#txtLegendary").text("Legendary Sword $100"); $("#txtMage").text("Mage $75"); // David Cacorovski 02/11/2020 10:05 AM Added click function for #gameStart $('#gameStart').click(function(event) { /* Act on the event */ backgroundMusic.play(); backgroundMusic.addEventListener('ended', function() { backgroundMusic.currentTime = 0; backgroundMusic.play(); }, false); enemyNumber=(Math.round(Math.random()*2)+1); $("#lblResolution").hide(); $('#enemy1').hide(); $('#enemy2').hide(); $('#enemy3').hide(); $('#enemyBoss').hide(); $('#chest').hide(); $('#gameStart').hide(); $('#image-final').css('animation-name', 'fadeOut'); $('#image-final').css('animation-duration', '2s'); $('#image-final').css('filter', 'blur(0px)'); $('#image-final').css('-webkit-filter', 'blur(0px)'); $("#btnShop").css('animation', 'fadeIn ease 4s'); $("#btnShop").css('opacity', '1'); $("#btnAttack").css('animation', 'fadeIn ease 4s'); $("#btnAttack").css('opacity', '1'); $("#wave").css('animation', 'fadeIn ease 4s'); $("#wave").css('opacity', '1'); $("#wave").text("Wave: " + wave); $("#money").css('animation', 'fadeIn ease 4s'); $("#money").css('opacity', '1'); $("#money").text("Schmeckles: " + money); // Jeremy Thummel 02/11/2020 10:57 AM Added random enemy code //First Enemy Code if(enemyNumber==1){ $('#enemy1').show(); $("#enemy1").css('animation', 'fadeIn ease 4s'); $("#enemy1").css('opacity', '1'); } //Second Enemy Code else if(enemyNumber==2){ $('#enemy2').show(); $("#enemy2").css('animation', 'fadeIn ease 4s'); $("#enemy2").css('opacity', '1'); } //Third Enemy Code else if(enemyNumber==3){ $('#enemy3').show(); $("#enemy3").css('animation', 'fadeIn ease 4s'); $("#enemy3").css('opacity', '1'); } //*******Jeremy Thummel 07/11/2020 3:03 PM Added Boss Code ********* //Boss Enemy Code else if(enemyNumber==4){ $('#enemyBoss').show(); $("#enemyBoss").css('animation', 'fadeIn ease 4s'); $("#enemyBoss").css('opacity', '1'); } //*******Jeremy Thummel 07/11/2020 3:30 PM Added Chest Code ********* //Chest Code else if(enemyNumber==5){ enemyHealth = 1; $('#chest').show(); $("#chest").css('animation', 'fadeIn ease 4s'); $("#chest").css('opacity', '1'); } $("#monsterHealth").css('animation', 'fadeIn ease 4s'); $("#monsterHealth").css('opacity', '1'); $("#monsterHealth").text("Monster HP: " + enemyHealth); if(enemyNumber==1 && wave >=51){ enemyHealth = (Math.round(Math.random()*150)+300); $("#monsterHealth").text("Monster HP: " + enemyHealth); }else if(enemyNumber==1 && wave <=50 && wave >=16){ enemyHealth = (Math.round(Math.random()*100)+200); $("#monsterHealth").text("Monster HP: " + enemyHealth); }else if(enemyNumber==1 && wave <= 15 && wave >= 6){ enemyHealth = (Math.round(Math.random()*75)+125); $("#monsterHealth").text("Monster HP: " + enemyHealth); }else if(enemyNumber==1 && wave <= 5 && wave >= 0){ enemyHealth = (Math.round(Math.random()*49)+75); $("#monsterHealth").text("Monster HP: " + enemyHealth); } if(enemyNumber==2 && wave >=51){ enemyHealth = (Math.round(Math.random()*250)+350); $("#monsterHealth").text("Monster HP: " + enemyHealth); }else if(enemyNumber==2 && wave <=50 && wave >=16){ enemyHealth = (Math.round(Math.random()*150)+250); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==2 && wave <= 15 && wave >= 6){ enemyHealth = (Math.round(Math.random()*100)+150); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==2 && wave <= 5 && wave >= 0){ enemyHealth = (Math.round(Math.random()*50)+100) $("#monsterHealth").text("Monster HP: " + enemyHealth); } if(enemyNumber==3 && wave >=51){ enemyHealth = (Math.round(Math.random()*150)+200); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==3 && wave<= 50 && wave >=16){ enemyHealth = (Math.round(Math.random()*75)+100); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==3 && wave<= 15 && wave >=6){ enemyHealth = (Math.round(Math.random()*50)+75); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==3 && wave<= 5 && wave >= 0){ enemyHealth = (Math.round(Math.random()*25)+50); $("#monsterHealth").text("Monster HP: " + enemyHealth); } if(enemyNumber==4 && wave >= 51){ enemyHealth = (Math.round(Math.random()*1000)+1500); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==4 && wave<= 50 && wave >=26){ enemyHealth = (Math.round(Math.random()*500)+800); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==4 && wave<= 25 && wave >=11){ enemyHealth = (Math.round(Math.random()*300)+500); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==4 && wave <=10 && wave >=0){ enemyHealth = (Math.round(Math.random()*200)+300); $("#monsterHealth").text("Monster HP: " + enemyHealth); } if(enemyNumber==5){ enemyHealth = 1; } //*******Jeremy Thummel 03/11/2020 11:47 AM Added enemy hit code********* $('#btnAttack').click(function() { /* Act on the event */ // Jeremy Thummel 03/11/2020 7:57 PM added effect that makes enemies look like they get hit // Jeremy Thummel 03/11/2020 11:07 AM added animation frames to make it look like the enemies bounce back into place // code for setTimeout is from https://stackoverflow.com/questions/1836105/how-to-wait-5-seconds-with-jquery, by Alex Bagnolini $('#enemy1').css('width','37%'); $('#enemy1').css('left','32%'); $('#enemy2').css('width','37%'); $('#enemy2').css('left','32%'); $('#enemy3').css('width','37%'); $('#enemy3').css('left','32%'); $('#enemyBoss').css('width','37%'); $('#enemyBoss').css('left','32%'); setTimeout( function(){ $('#enemy1').css('width','38%'); $('#enemy1').css('left','31.5%'); }, 50); setTimeout( function(){ $('#enemy2').css('width','38%'); $('#enemy2').css('left','31.5%'); }, 50); setTimeout( function(){ $('#enemy3').css('width','38%'); $('#enemy3').css('left','31.5%'); }, 50); setTimeout( function(){ $('#enemyBoss').css('width','38%'); $('#enemyBoss').css('left','31.5%'); }, 50); setTimeout( function(){ $('#enemy1').css('width','35.5%'); $('#enemy1').css('left','32.75%'); }, 100); setTimeout( function(){ $('#enemy2').css('width','35.5%'); $('#enemy2').css('left','32.75%'); }, 100); setTimeout( function(){ $('#enemy3').css('width','35.5%'); $('#enemy3').css('left','32.75%'); }, 100); setTimeout( function(){ $('#enemyBoss').css('width','35.5%'); $('#enemyBoss').css('left','32.75%'); }, 100); setTimeout( function(){ $('#enemy1').css('width','35%'); $('#enemy1').css('left','33%'); }, 150); setTimeout( function(){ $('#enemy2').css('width','35%'); $('#enemy2').css('left','33%'); }, 150); setTimeout( function(){ $('#enemy3').css('width','35%'); $('#enemy3').css('left','33%'); }, 150); setTimeout( function(){ $('#enemyBoss').css('width','35%'); $('#enemyBoss').css('left','33%'); }, 150); //Sohail Meghani 04/11/2020 10:10 AM Added enemy health if(enemyHealth > 6) { if(trueLS == false) { if(enemyHealth > 56) { enemyHealth -= 50; } } else if(trueRS == false) { if(enemyHealth > 31) { enemyHealth -= 25; } } else if(trueUS == false) { if(enemyHealth > 16) { enemyHealth -= 10; } } else if(trueCS == false) { if(enemyHealth > 11) { enemyHealth -= 5; } } enemyGetHit = Math.round(Math.random()*2)+3; enemyHealth = enemyHealth-enemyGetHit; $("#monsterHealth").text("Monster HP: " + enemyHealth); } else { $("#monsterHealth").text("Monster Defeated!"); //First Enemy Code if(enemyNumber==1) { $("#enemy1").css('animation', 'fadeOut2 ease 1s'); $("#enemy1").css('opacity', '0'); } //Second Enemy Code else if(enemyNumber==2) { $("#enemy2").css('animation', 'fadeOut2 ease 1s'); $("#enemy2").css('opacity', '0'); } //Third Enemy Code else if(enemyNumber==3) { $("#enemy3").css('animation', 'fadeOut2 ease 1s'); $("#enemy3").css('opacity', '0'); } //*******Jeremy Thummel 07/11/2020 3:03 PM Added Boss Code ********* //Boss Enemy Code else if(enemyNumber==4) { $("#enemyBoss").css('animation', 'fadeOut2 ease 1s'); $("#enemyBoss").css('opacity', '0'); } //*******Jeremy Thummel 07/11/2020 3:32 PM Added Chest Code ********* //Chest Code else if(enemyNumber==5) { $("#chest").css('animation', 'fadeOut2 ease 1s'); $("#chest").css('opacity', '0'); } if(moneyLoop==0) { moneyRandom = (Math.round(Math.random()*4)+1); money = money + moneyRandom; } moneyLoop=1; wave++; loopNumber = wave; enemyNumber=(Math.round(Math.random()*2)+1); //*******Jeremy Thummel 07/11/2020 3:12 PM Added Boss Check Loop ********* while(loopNumber>=0) { loopNumber=loopNumber-5; } if(loopNumber==-5) { enemyNumber=4; } if(chest==1) { enemyNumber=5; wave-=1; chest=0; } //First Enemy Code if(enemyNumber==1) { $('#enemy1').show(); $("#enemy1").css('animation', 'fadeIn ease 0.25s'); $("#enemy1").css('opacity', '1'); $("#monsterHealth").text("Monster HP: " + enemyHealth); $("#wave").text("Wave: " + wave); $("#money").text("Schmeckles: " + money); } //Second Enemy Code else if(enemyNumber==2) { $('#enemy2').show(); $("#enemy2").css('animation', 'fadeIn ease 0.25s'); $("#enemy2").css('opacity', '1'); $("#monsterHealth").text("Monster HP: " + enemyHealth); $("#wave").text("Wave: " + wave); $("#money").text("Schmeckles: " + money); } //Third Enemy Code else if(enemyNumber==3) { $('#enemy3').show(); $("#enemy3").css('animation', 'fadeIn ease 0.25s'); $("#enemy3").css('opacity', '1'); $("#monsterHealth").text("Monster HP: " + enemyHealth); $("#wave").text("Wave: " + wave); $("#money").text("Schmeckles: " + money); } //Boss Enemy Code else if(enemyNumber==4) { chest = 1; $('#enemyBoss').show(); $("#enemyBoss").css('animation', 'fadeIn ease 0.25s'); $("#enemyBoss").css('opacity', '1'); $("#monsterHealth").text("Boss HP: " + enemyHealth); $("#wave").text("Wave: " + wave); $("#money").text("Schmeckles: " + money); } //Chest Code else if(enemyNumber==5) { enemyHealth = 1; $('#chest').show(); $("#chest").css('animation', 'fadeIn ease 0.25s'); $("#chest").css('opacity', '1'); $("#monsterHealth").text("Chest Opening"); $("#wave").text("Wave: " + wave); $("#money").text("Schmeckles: " + money); } //******* Sohail Meghani 10/11/2020 5:56PM Added incremental health with waves ************************ if(enemyNumber==1 && wave >=51){ enemyHealth = (Math.round(Math.random()*150)+300); $("#monsterHealth").text("Monster HP: " + enemyHealth); }else if(enemyNumber==1 && wave <=50 && wave >=16){ enemyHealth = (Math.round(Math.random()*100)+200); $("#monsterHealth").text("Monster HP: " + enemyHealth); }else if(enemyNumber==1 && wave <= 15 && wave >= 6){ enemyHealth = (Math.round(Math.random()*75)+125); $("#monsterHealth").text("Monster HP: " + enemyHealth); }else if(enemyNumber==1 && wave <= 5 && wave >= 0){ enemyHealth = (Math.round(Math.random()*49)+75); $("#monsterHealth").text("Monster HP: " + enemyHealth); } if(enemyNumber==2 && wave >=51){ enemyHealth = (Math.round(Math.random()*250)+350); $("#monsterHealth").text("Monster HP: " + enemyHealth); }else if(enemyNumber==2 && wave <=50 && wave >=16){ enemyHealth = (Math.round(Math.random()*150)+250); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==2 && wave <= 15 && wave >= 6){ enemyHealth = (Math.round(Math.random()*100)+150); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==2 && wave <= 5 && wave >= 0){ enemyHealth = (Math.round(Math.random()*50)+100) $("#monsterHealth").text("Monster HP: " + enemyHealth); } if(enemyNumber==3 && wave >=51){ enemyHealth = (Math.round(Math.random()*150)+200); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==3 && wave<= 50 && wave >=16){ enemyHealth = (Math.round(Math.random()*75)+100); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==3 && wave<= 15 && wave >=6){ enemyHealth = (Math.round(Math.random()*50)+75); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==3 && wave<= 5 && wave >= 0){ enemyHealth = (Math.round(Math.random()*25)+50); $("#monsterHealth").text("Monster HP: " + enemyHealth); } if(enemyNumber==4 && wave >= 51){ enemyHealth = (Math.round(Math.random()*1000)+1500); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==4 && wave<= 50 && wave >=26){ enemyHealth = (Math.round(Math.random()*500)+800); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==4 && wave<= 25 && wave >=11){ enemyHealth = (Math.round(Math.random()*300)+500); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==4 && wave <=10 && wave >=0){ enemyHealth = (Math.round(Math.random()*200)+300); $("#monsterHealth").text("Monster HP: " + enemyHealth); } if(enemyNumber==5){ enemyHealth = 1; } //*******Jeremy Thummel 07/11/2020 3:32 PM Added Money Checking Code (so player recieves more money for beating the boss) ********* if(enemyNumber == 3 || enemyNumber == 2 || enemyNumber == 1 || enemyNumber == 4) { moneyRandom = (Math.round(Math.random()*3)+2); } else if(enemyNumber==5) { moneyRandom = (Math.round(Math.random()*10)+10); } money = money + moneyRandom; $("#money").text("Schmeckles: " + money); } });//end of btnAttack click // David Cacorovski 4/11/2020 10:36 PM Added Shop button click $('#btnShop').click(function(event) { /* Act on the event */ shopOpen = true; $("#btnAttack").hide(); $("#btnShop").hide(); $("#image-final").css('background-image', 'url(../images/shopBackground2.png)'); backgroundMusic.pause(); shopMusic.play(); shopMusic.addEventListener('ended', function() { shopMusic.currentTime = 0; shopMusic.play(); }, false); //above code is thanks to xavier.seignard: https://stackoverflow.com/questions/13610638/loop-audio-with-javascript $("#btnShopBackground").css('opacity', '1'); $("#btnExit").show(); $("#common").show(); $("#uncommon").show(); $("#rare").show(); $("#legendary").show(); $("#mage").show(); $("#txtCommon").show(); $("#txtUncommon").show(); $("#txtRare").show(); $("#txtLegendary").show(); $("#txtMage").show(); // Sohail Meghani 10/11/2020 12:40 AM Hide enemies on shop click $("#enemy1").hide(); $("#enemy2").hide(); $("#enemy3").hide(); $("#enemyBoss").hide(); $("#chest").hide(); $("#monsterHealth").hide(); $("#wave").hide(); $("#lblShopStage").text("Purchasing Items"); $("#lblShopStage").show(); $("#lblShopStage").css('animation', 'fadeIn ease 0.25s'); $("#shopKeeper1").show(); $("#shopKeeper1").css('opacity', '1'); //CommonClick $('#common').click(function(event) { /* Act on the event */ if(trueCS == true) { total = money; if(money >= 10){ $("#txtCommon").text("Bought"); shopBuy.play(); $("#txtCommon").css('font-size', '34px'); $("#txtCommon").css('left', '8%'); money = total - MONEYZ; $("#money").text("Schmeckles: " + money); setTimeout( function(){ $('#shopKeeper1').css('opacity','0'); $("#shopKeeper1").hide(); $('#shopKeeper2').show(); $('#shopKeeper2').css('opacity','1'); }, 85); setTimeout( function(){ $("#shopKeeper2").hide(); $('#shopKeeper1').css('opacity','1'); $('#shopKeeper1').show(); }, 500); trueCS = false; } else { $("#txtCommon").css('font-size', '34px'); $("#txtCommon").text("Not enough cash!"); error.play(); } } }); // end of common click /* David Cacorovski / Jeremy Thummel 11/9/20 7:49 PM Added more shop functionality. */ $('#uncommon').click(function(event) { /* Act on the event */ if(trueUS == true) { total = money; if(money >= 25){ $("#txtUncommon").text("Bought"); shopBuy.play(); $("#txtUncommon").css('font-size', '34px'); $("#txtUncommon").css('left', '8%'); money = total - MONEYZ2; $("#money").text("Schmeckles: " + money); trueUS = false; setTimeout( function(){ $('#shopKeeper1').css('opacity','0'); $("#shopKeeper1").hide(); $('#shopKeeper2').show(); $('#shopKeeper2').css('opacity','1'); }, 85); setTimeout( function(){ $('#shopKeeper2').css('opacity','0'); $("#shopKeeper2").hide(); $('#shopKeeper1').show(); $('#shopKeeper1').css('opacity','1'); }, 500); } else { $("#txtUncommon").css('font-size', '34px'); $("#txtUncommon").text("Not enough cash!"); error.play(); } } }); // end of uncommon click // START OF RARE SWORD FUNCTIONALITY $('#rare').click(function(event) { /* Act on the event */ if(trueRS == true) { total = money; if(money >= 50){ $("#txtRare").text("Bought"); shopBuy.play(); $("#txtRare").css('font-size', '34px'); $("#txtRare").css('left', '8%'); money = total - MONEYZ3; $("#money").text("Schmeckles: " + money); trueRS = false; setTimeout( function(){ $('#shopKeeper1').css('opacity','0'); $("#shopKeeper1").hide(); $('#shopKeeper2').show(); $('#shopKeeper2').css('opacity','1'); }, 85); setTimeout( function(){ $('#shopKeeper2').css('opacity','0'); $("#shopKeeper2").hide(); $('#shopKeeper1').show(); $('#shopKeeper1').css('opacity','1'); }, 500); } else { $("#txtRare").css('font-size', '34px'); $("#txtRare").text("Not enough cash!"); error.play(); } } }); // end of rare click // START OF LEGENDARY SWORD FUNCTIONALITY $('#legendary').click(function(event) { /* Act on the event */ if(trueLS == true) { total = money; if(money >= 100){ $("#txtLegendary").text("Bought"); shopBuy.play(); $("#txtLegendary").css('font-size', '34px'); $("#txtLegendary").css('left', '8%'); money = total - MONEYZ4; $("#money").text("Schmeckles: " + money); trueLS = false; setTimeout( function(){ $('#shopKeeper1').css('opacity','0'); $("#shopKeeper1").hide(); $('#shopKeeper2').show(); $('#shopKeeper2').css('opacity','1'); }, 85); setTimeout( function(){ $('#shopKeeper2').css('opacity','0'); $("#shopKeeper2").hide(); $('#shopKeeper1').show(); $('#shopKeeper1').css('opacity','1'); }, 500); } else { $("#txtLegendary").css('font-size', '34px'); $("#txtLegendary").text("Not enough cash!"); error.play(); } } }); // end of legendary click // START OF MAGE FUNCTIONALITY $('#mage').click(function(event) { /* Act on the event */ if(trueM == true) { total = money; if(money >= 75){ mageBought = true; $("#txtMage").text("Bought"); shopBuy.play(); $("#txtMage").css('font-size', '34px'); $("#txtMage").css('left', '8%'); $('#btnMage').css('opacity','1'); money = total - MONEYZ5; $("#money").text("Schmeckles: " + money); trueM = false; setTimeout( function(){ $('#shopKeeper1').css('opacity','0'); $("#shopKeeper1").hide(); $('#shopKeeper2').show(); $('#shopKeeper2').css('opacity','1'); }, 85); setTimeout( function(){ $('#shopKeeper2').css('opacity','0'); $("#shopKeeper2").hide(); $('#shopKeeper1').show(); $('#shopKeeper1').css('opacity','1'); }, 500); } else { $("#txtMage").css('font-size', '34px'); $("#txtMage").text("Not enough cash!"); error.play(); } } }); // end of mage click // Button Exit of shop $('#btnExit').click(function(event) { /* Act on the event */ shopOpen = false; $("#btnAttack").show(); $("#btnShop").show(); $("#btnShop").css('animation', 'fadeIn ease 0.25s'); $("#btnAttack").css('animation', 'fadeIn ease 0.25s'); $("#image-final").css('background-image', 'url(../images/backgroundInGame.png)'); backgroundMusic.play(); backgroundMusic.addEventListener('ended', function() { backgroundMusic.currentTime = 0; backgroundMusic.play(); $("#enemy1").show(); $("#enemy2").show(); $("#enemy3").show(); $("#enemyBoss").show(); $("#chest").show(); }, false); shopMusic.pause(); if(trueCS == true) { $("#txtCommon").text("Common Sword $10"); } if(trueUS == true) { $("#txtUncommon").text("Uncommon Sword $25"); $("#txtUncommon").css('font-size', '29px'); } if(trueRS == true) { $("#txtRare").text("Rare Sword $50"); $("#txtRare").css('font-size', '36px'); } if(trueLS == true) { $("#txtLegendary").text("Legendary Sword $100"); $("#txtLegendary").css('font-size', '26px'); } if(trueM == true) { $("#txtMage").text("Mage $75"); } // Sohail Meghani 10/11/2020 12:40 AM Show enemies on shop click if(enemyNumber == 1){ $("#enemy1").show(); $("#enemy1").css('animation', 'fadeIn ease 0.25s'); } else if(enemyNumber == 2){ $("#enemy2").show(); $("#enemy2").css('animation', 'fadeIn ease 0.25s'); } else if(enemyNumber == 3){ $("#enemy3").show(); $("#enemy3").css('animation', 'fadeIn ease 0.25s'); } else if(enemyNumber == 4){ $("#enemyBoss").show(); $("#enemyBoss").css('animation', 'fadeIn ease 0.25s'); } else if(enemyNumber == 5){ $("#chest").show(); $("#chest").css('animation', 'fadeIn ease 0.25s'); } $("#monsterHealth").show(); $("#monsterHealth").css('animation', 'fadeIn ease 0.25s'); $("#wave").show(); $("#wave").css('animation', 'fadeIn ease 0.25s'); $("#lblShopStage").hide(); $("#shopKeeper1").hide(); $("#shopKeeper1").css('opacity', '0'); $("#shopKeeper2").hide(); $("#shopKeeper2").css('opacity', '0'); $("#btnShopBackground").css('opacity', '0'); $("#btnExit").hide(); $("#common").hide(); $("#uncommon").hide(); $("#rare").hide(); $("#legendary").hide(); $("#mage").hide(); $("#txtCommon").hide(); $("#txtUncommon").hide(); $("#txtRare").hide(); $("#txtLegendary").hide(); $("#txtMage").hide(); });// end of btnExit click });// end of btnShop click $('#btnMage').click(function(event) { /* Act on the event */ $("#btnMage").css('animation', 'fadeOut2 ease 0.5s'); $("#btnMage").css('opacity', '0'); setTimeout( function(){ $("#btnMage").hide(); }, 550); if(mageBought == true) { if(trueM == false && enemyHealth > 5) { setInterval( function(){ enemyHealth -= 5; $("#monsterHealth").text("Monster HP: " + enemyHealth); if(enemyHealth < 6) { $("#monsterHealth").text("Monster Defeated!"); //First Enemy Code if(enemyNumber==1) { $("#enemy1").css('animation', 'fadeOut2 ease 1s'); $("#enemy1").css('opacity', '0'); } //Second Enemy Code else if(enemyNumber==2) { $("#enemy2").css('animation', 'fadeOut2 ease 1s'); $("#enemy2").css('opacity', '0'); } //Third Enemy Code else if(enemyNumber==3) { $("#enemy3").css('animation', 'fadeOut2 ease 1s'); $("#enemy3").css('opacity', '0'); } //*******Jeremy Thummel 07/11/2020 3:03 PM Added Boss Code ********* //Boss Enemy Code else if(enemyNumber==4) { $("#enemyBoss").css('animation', 'fadeOut2 ease 1s'); $("#enemyBoss").css('opacity', '0'); } //*******Jeremy Thummel 07/11/2020 3:32 PM Added Chest Code ********* //Chest Code else if(enemyNumber==5) { $("#chest").css('animation', 'fadeOut2 ease 1s'); $("#chest").css('opacity', '0'); } if(moneyLoop==0) { moneyRandom = (Math.round(Math.random()*4)+1); money = money + moneyRandom; } moneyLoop=1; wave++; loopNumber = wave; enemyNumber=(Math.round(Math.random()*2)+1); //*******Jeremy Thummel 07/11/2020 3:12 PM Added Boss Check Loop ********* while(loopNumber>=0) { loopNumber=loopNumber-5; } if(loopNumber==-5) { enemyNumber=4; } if(chest==1) { enemyNumber=5; wave-=1; chest=0; } //First Enemy Code if(enemyNumber==1) { if(shopOpen == false) { $('#enemy1').show(); $("#enemy1").css('animation', 'fadeIn ease 0.25s'); $("#enemy1").css('opacity', '1'); $("#monsterHealth").text("Monster HP: " + enemyHealth); $("#wave").text("Wave: " + wave); } $("#money").text("Schmeckles: " + money); } //Second Enemy Code else if(enemyNumber==2) { if(shopOpen == false) { $('#enemy2').show(); $("#enemy2").css('animation', 'fadeIn ease 0.25s'); $("#enemy2").css('opacity', '1'); $("#monsterHealth").text("Monster HP: " + enemyHealth); $("#wave").text("Wave: " + wave); } $("#money").text("Schmeckles: " + money); } //Third Enemy Code else if(enemyNumber==3) { if(shopOpen == false) { $('#enemy3').show(); $("#enemy3").css('animation', 'fadeIn ease 0.25s'); $("#enemy3").css('opacity', '1'); $("#monsterHealth").text("Monster HP: " + enemyHealth); $("#wave").text("Wave: " + wave); } $("#money").text("Schmeckles: " + money); } //Boss Enemy Code else if(enemyNumber==4) { chest = 1; if(shopOpen == false) { $('#enemyBoss').show(); $("#enemyBoss").css('animation', 'fadeIn ease 0.25s'); $("#enemyBoss").css('opacity', '1'); $("#monsterHealth").text("Boss HP: " + enemyHealth); $("#wave").text("Wave: " + wave); } $("#money").text("Schmeckles: " + money); } //Chest Code else if(enemyNumber==5) { enemyHealth = 1; if(shopOpen == false) { $('#chest').show(); $("#chest").css('animation', 'fadeIn ease 0.25s'); $("#chest").css('opacity', '1'); $("#monsterHealth").text("Chest Opening"); $("#wave").text("Wave: " + wave); } $("#money").text("Schmeckles: " + money); } if(enemyNumber==1 && wave >=51){ enemyHealth = (Math.round(Math.random()*150)+300); $("#monsterHealth").text("Monster HP: " + enemyHealth); }else if(enemyNumber==1 && wave <=50 && wave >=16){ enemyHealth = (Math.round(Math.random()*100)+200); $("#monsterHealth").text("Monster HP: " + enemyHealth); }else if(enemyNumber==1 && wave <= 15 && wave >= 6){ enemyHealth = (Math.round(Math.random()*75)+125); $("#monsterHealth").text("Monster HP: " + enemyHealth); }else if(enemyNumber==1 && wave <= 5 && wave >= 0){ enemyHealth = (Math.round(Math.random()*49)+75); $("#monsterHealth").text("Monster HP: " + enemyHealth); } if(enemyNumber==2 && wave >=51){ enemyHealth = (Math.round(Math.random()*250)+350); $("#monsterHealth").text("Monster HP: " + enemyHealth); }else if(enemyNumber==2 && wave <=50 && wave >=16){ enemyHealth = (Math.round(Math.random()*150)+250); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==2 && wave <= 15 && wave >= 6){ enemyHealth = (Math.round(Math.random()*100)+150); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==2 && wave <= 5 && wave >= 0){ enemyHealth = (Math.round(Math.random()*50)+100) $("#monsterHealth").text("Monster HP: " + enemyHealth); } if(enemyNumber==3 && wave >=51){ enemyHealth = (Math.round(Math.random()*150)+200); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==3 && wave<= 50 && wave >=16){ enemyHealth = (Math.round(Math.random()*75)+100); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==3 && wave<= 15 && wave >=6){ enemyHealth = (Math.round(Math.random()*50)+75); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==3 && wave<= 5 && wave >= 0){ enemyHealth = (Math.round(Math.random()*25)+50); $("#monsterHealth").text("Monster HP: " + enemyHealth); } if(enemyNumber==4 && wave >= 51){ enemyHealth = (Math.round(Math.random()*1000)+1500); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==4 && wave<= 50 && wave >=26){ enemyHealth = (Math.round(Math.random()*500)+800); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==4 && wave<= 25 && wave >=11){ enemyHealth = (Math.round(Math.random()*300)+500); $("#monsterHealth").text("Monster HP: " + enemyHealth); } else if(enemyNumber==4 && wave <=10 && wave >=0){ enemyHealth = (Math.round(Math.random()*200)+300); $("#monsterHealth").text("Monster HP: " + enemyHealth); } if(enemyNumber==5){ enemyHealth = 1; } //*******Jeremy Thummel 07/11/2020 3:32 PM Added Money Checking Code (so player recieves more money for beating the boss) ********* if(enemyNumber == 3 || enemyNumber == 2 || enemyNumber == 1 || enemyNumber == 4) { moneyRandom = (Math.round(Math.random()*3)+2); } else if(enemyNumber==5) { moneyRandom = (Math.round(Math.random()*10)+10); } money = money + moneyRandom; $("#money").text("Schmeckles: " + money); } }, 1000); } mageBought = false; } }); // End of btnMage clickk }); // end of gameStart click });//end of doc ready