1
\$\begingroup\$

I am a new coder and im trying to learn html. i have started working on a clicker game but im trying to figure out how to give a reward when my total clicks var has reached a certain value. the reward would be one "var total-clicks" = 10 have the click value go up so each time you click after that its worth 2 clicks

<!DOCTYPE html>
    <html>
     <body>
    
<p>
    The button was clicked
    <span class="total-clicks"></span>
    times
</p>

<button id="btn1" onclick="addClick()">
    Click Me!
</button>

<script type="text/javascript">
    let clicks = 0;

    function addClick() {
        clicks = clicks + 1;
        document.querySelector('.total-clicks').textContent
            = clicks;
    }

    // Simulate click function
    function clickButton() {
        document.querySelector('#btn1').click();
    }
     
</script>
</body>
</html>
\$\endgroup\$
2
  • \$\begingroup\$ Note that you are not just using HTML here, but HTML in combination with the JavaScript programming language. And your problem here is in the JavaScript part, not the HTML part. \$\endgroup\$
    – Philipp
    Nov 14 at 16:23
  • \$\begingroup\$ ok what would i need to do to give a reward using js \$\endgroup\$ Nov 14 at 16:29

1 Answer 1

1
\$\begingroup\$

If you want to reward the player with additional click power, then it would make sense to make that a separate variable, and use that variable instead of the constant value of 1 when you increase the click count:

let clicks = 0;
let click_power = 1;

function addClick() {
    clicks = clicks + click_power;

Now your game should still behave as before. But by turning a constant into a variable we created the possibility for the player's click power to change over the course of the game.

Now how do we increase the click power? Well, whenever we increase the click count of the player, we need to have some conditional code that only executes if the click count reached a certain level. We can do that with the if statement.

function addClick() {
    clicks = clicks + click_power;
    if(clicks == 10) {
        click_power = click_power + 1;
    }

This simple solution should increase the players click power by 1 the moment they reach 10 clicks. This works for now, but could lead to problems down the road. What if we add more than one way to increase the click power? And what if the player does that before reaching the 10 click threshold? In that case it is possible that clicks jumps from 9 right to 11. It would never be exactly equals to 10. So the reward for reaching 10 would get skipped. How do we solve that?

Well we could try to increase it when the player reached or exceeded 10 clicks:

    if(clicks >= 10) {
        click_power = click_power + 1;
    }

But this causes another problem. Now the player gets the reward every time they click the button after 10 clicks. We have to somehow memorize that the player already received the reward. We can do that with a 3rd variable that keeps track of whether or not the player received the reward and only give it to the player when he hasn't received it yet:

let clicks = 0;
let click_power = 1;
let reward_received = false;

function addClick() {
    clicks = clicks + click_power;
    if(clicks >= 10 && reward_received == false) {
        click_power = click_power + 1;
        reward_received = true;
    }

Now the player only receives the reward if two conditions are true: They reached or exceeded 10 clicks and they didn't receive the reward yet.

Note that if you decide to add more rewards with different conditions, then you are probably going to need a separate variable for each reward. That means you could end up with quite a lot of variables and conditions. There are ways to structure that in a better way. But that's a more advanced topic for another question.

\$\endgroup\$
3
  • \$\begingroup\$ You don't need to compare reward_received to false; you can just do if(clicks >= 10 && !reward_received). Also, your profile says that English is not your first language. Jumping to the conclusion that you are French, I direct you to notice the differing translations for [personne] versus computer (computing) here: collinsdictionary.com/dictionary/french-english/m%C3%A9moriser . (There's also the word memoize, which is in turn slightly different). \$\endgroup\$ Nov 15 at 3:51
  • \$\begingroup\$ @Acccumulation I know that, but as OP is clearly a beginner I didn't want to introduce the boolean negation operator as yet another new language element they have to learn. So I decided to go for the more verbose but more intuitive == false instead. \$\endgroup\$
    – Philipp
    Nov 15 at 7:57
  • \$\begingroup\$ @Acccumulation And no, my first language isn't French. It's German. \$\endgroup\$
    – Philipp
    Nov 15 at 7:58

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .