0
\$\begingroup\$

So i have a pretty good clicker quest system in place( click/ use spells/collect stuff etc) but im having a hard to making it a reward system. The reward should only go off once then the quest should be done. how would i show the player the quest is done and continue onto the next set of quests. i want the first 2 quests to be the only ones shown until the player has a certain amount of quest points to unhide more. then i eventually want repeatable quests that would be like if numberofclicks=maxnumberofclicks gold= gold+100 then the quest would restart https://jsfiddle.net/xzyat57v/2/ this is a fiddle with all my code. at the moment the quest kind fo finishes but you keep getting 1 quest points everytime the else goes off. it should be 1 quest point once then quest finishes. having a hard time makeing it mode on.

html

<html>

<head>
   <title> Basic Clicker</title>
   <link rel="stylesheet" href="css/style.css" />
</head>

<body>
    <div class="nav_bar">
    <ul>
       <li id="HomeTab"><a href="GameMainWindow.html" >Home</a></li>
        <li id="SkillTreeTab"><a href="SkillTree.html">SkillTree</a></li>
        <li id="EquipmentTab"><a href="Equipment.html">Equipment</a></li>
        <li id="PetsTab"><a href="Pets.html">Pets</a></li>
        <li id="SkillsTab"><a href="Skills.html">Skills</a></li>
        <li id="QuestsTab"><a href="Quests.html"id="onlink">Quests</a></li>
        <li id="ShopTab"><a href="Shop.html">Shop</a></li>
    </ul>
</div>
<div class="main_container">
    <p>
        <html>

        <head>
            <link rel="stylesheet" type="text/css" href="interface.css" />
        </head>
        <title> Basic Clicker</title>

        <body>
            <style>
                div,
                a {
                    text-align: center;
                }
            </style>
            Quests
            <br />
            Quest Points: <span id="QuestPoints">0</span>
            <br />
            <button onclick="Clickquest1()">Click Me!</button>
            <br />
            Click 1000 times <span id="Numberofclicks">0</span> / <span id="Maxnumberofclicks">10</span> 
            <br />
            Use skills 50 times <span id="Spelluses">0</span> / <span id="Maxspelluses">50</span>
            <br />
            <span id="Clickquest2">Click 10000 times <span id="Numberofclicks">0</span> / <span id="Maxnumberofclicks">10000</span>
            <br />
           <span id="Useskills2"> Use skills 100 times <span id="Spelluses">0</span> / <span id="Maxspelluses">100</span>
            <br />
            <span id="Bronzeorecollect1">Collect 100 Bronze Ore <span id="Spelluses">0</span> / <span id="Maxspelluses">100</span>
            <br />
           <span id="Shrimpcollect1"> Collect 100  Shrimp  <span id="Spelluses">0</span> / <span id="Maxspelluses">100</span>
            <br />
            <span id="Bronzeorecollect2">Collect 1000 Bronze Ore <span id="Spelluses">0</span> / <span id="Maxspelluses">1000</span>
            <br />
            <span id="Shrimpcollect2">Collect 1000 Shrimp <span id="Numberoffish">0</span> / <span id="MaxFish">1000</span>
            <br />
            Use skills 50 times <span id="Spelluses">0</span> / <span id="Maxspelluses">50</span>
            <br />
            Use skills 50 times <span id="Spelluses">0</span> / <span id="Maxspelluses">50</span>
            <br />
            Use skills 50 times <span id="Spelluses">0</span> / <span id="Maxspelluses">50</span>
            <br />
            Use skills 50 times <span id="Spelluses">0</span> / <span id="Maxspelluses">50</span>
            <br />
            Use skills 50 times <span id="Spelluses">0</span> / <span id="Maxspelluses">50</span>
            <br />
            Use skills 50 times <span id="Spelluses">0</span> / <span id="Maxspelluses">50</span>
            <br />
            Use skills 50 times <span id="Spelluses">0</span> / <span id="Maxspelluses">50</span>
            <br />
            Use skills 50 times <span id="Spelluses">0</span> / <span id="Maxspelluses">50</span>
            <br />
            Use skills 50 times <span id="Spelluses">0</span> / <span id="Maxspelluses">50</span>
            <br />
            Use skills 50 times <span id="Spelluses">0</span> / <span id="Maxspelluses">50</span>
            <br />
            Use skills 50 times <span id="Spelluses">0</span> / <span id="Maxspelluses">50</span>
            <br />
            Use skills 50 times <span id="Spelluses">0</span> / <span id="Maxspelluses">50</span>
            <br />
            Use skills 50 times <span id="Spelluses">0</span> / <span id="Maxspelluses">50</span>
            <br />
            Use skills 50 times <span id="Spelluses">0</span> / <span id="Maxspelluses">50</span>
            <br />
            Use skills 50 times <span id="Spelluses">0</span> / <span id="Maxspelluses">50</span>
            <br />
            Use skills 50 times <span id="Spelluses">0</span> / <span id="Maxspelluses">50</span>
            <br />

            <script type="text/javascript" src="main.js"></script>
            <script type="text/javascript" src="Quests.js"></script>
    </p>
</div>

javascript: ( i dont have alot but i would like a example for clicks, spell uses, a repeatable quest, and ore collection. i was just going to have on my mineing page later once i have the quests working if rebirths>=5 && Questpoints>=4 ) add to that counter.

var Numberofclicks = 0;
var Maxnumberofclicks = 10;
var Spelluses = 0;
var Maxspelluses = 50;
var NumberofBore = 0;
var MaxnumberofBore = 10;
var rebirths = 5;
var QuestPoints = 0;
document.getElementById('rebirths').innerHTML = rebirths;


function Clickquest1(){
    if (rebirths >=5 && Numberofclicks < Maxnumberofclicks){
        Numberofclicks = Numberofclicks +1
    document.getElementById('Numberofclicks').innerHTML = Numberofclicks;

    }else{
        QuestPoints = QuestPoints + 1
        document.getElementById('QuestPoints').innerHTML = QuestPoints;

    }
}

function Clickquest2(){
    if (rebirths >=5 && Numberofclicks < Maxnumberofclicks && QuestPoints>=1){
        Numberofclicks = Numberofclicks +1
    document.getElementById('Numberofclicks').innerHTML = Numberofclicks;
    }else{
        QuestPoints = QuestPoints + 1
        document.getElementById('QuestPoints').innerHTML = QuestPoints;

    }
    }



function CollectingOre(){
    if (rebirths >=5 && NumberofBore < MaxnumberofBore){
        NumberofBore = NumberofBore +1
    document.getElementById('NumberofBore').innerHTML = NumberofBore;
    }else{
        QuestPoints = QuestPoints + 1
        document.getElementById('QuestPoints').innerHTML = QuestPoints;

    }
    }

I expect when the first or any quest is complete unless it is repeatable for it to finish, give the reward once, then move onto the next quest. for example after you click 100 times for first quest it gives you a quest point then unlocks the next click quest. then it moves onto that quest. But at the moment after the quest finishes if u keep clicking it keeps adding 1 questpoint( i know why it does this but not sure how to make it do it once). I want a working quest page for the player

\$\endgroup\$
  • \$\begingroup\$ Hi please summarize your question \$\endgroup\$ – Seyed Morteza Kamali Jun 26 at 13:48
1
\$\begingroup\$

You need an if statement to check against your variable. Such as:

if (clickedTotal == questClickAmount){
    questPoints++;
}

This will insure that you will only get 1 quest point whenever you reach the correct amount.

I have another way you could easily implement click quests. I have made the changes in this jsfiddle.

I have created a ClickableQuest class:

class ClickableQuest {
    clickAmount = 10; //Default 10
    clickTotal = 0;

    elementID = "";

    constructor(clickAmount, elementID){ //Ran once you initalize class
        this.clickAmount = clickAmount;
        this.elementID = elementID
        this.UpdateDisplay();
    }

    GetQuestString(){
        return "Quest: Click 10 times. " + this.clickTotal + " / " + this.clickAmount;
    }

    Incrementer(){
        this.clickTotal++;
        if (this.clickTotal == this.clickAmount){
            QuestPoints++;
        }
    }

    UpdateDisplay(){
           if (this.clickTotal > this.clickAmount){
            document.getElementById(this.elementID).innerHTML = ""; //Hide
        } else {
              document.getElementById(this.elementID).innerHTML = this.GetQuestString()
        }
    }
}

If you don't know what a class is then imagine it like reusable code. Classes are objects that have variables related to it. If you wanted to make a class about a table you could have variables inside the class for how many legs, how tall is it, how wide it is etc.

When you create a new instance of this class you will need to pass it two parameters. Those are: clickAmount and elementID.

You can create a new instance with this code:

var tenClick = new ClickableQuest(10, "tenClickID");

When a new class object is made like above it runs the constructor function within the class.

You can see that it sets the class's clickAmount variable to be 10 and the class's elementID variable to "tenClickID". It also runs the class's UpdateDisplay function which uses the elementID and QuestString to update it on the screen.

The class's Incrementor function will update the clickTotal and if it is the same number as the clickAmount it will reward 1 questPoint.

I created a function called UpdateQuest:

function UpdateQuest(clickableQuest) {
    clickableQuest.Incrementer();
    clickableQuest.UpdateDisplay();
}

This require a quest object aka tenClick that we made above. When ever you call the function it will run the Incrementer and UpdateDisplay function in that object. I called UpdateQuest from within your button click code.

If you wanted to make a lot more click quests you could just create new quest objects like:

var tenClick = new ClickableQuest(10, "tenClickID");
var twentyClick = new ClickableQuest(20, "twentyClickID");
var onehundredClick = new ClickableQuest(100, "onehundredClickID");

Remember you have to pass each quest through the UpdateQuest function for it to increment.

I would recommend looking up how to make an array of objects so you can loop through each quest to increment them.

You could also create Quest objects for your other quest types just like I did.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.