How to make a next level

I made this game and i got an idea. I have seen works on code pen where they can move to different pages in the same HTML.
This is my game:

I want to have the player accumulate a certain number of points and then move to a next level with like 8 holes with monkeys in them rather than 4. How do i do that?

That was fun! Good stuff.

You could simply make a section with 8 monkeys and when user hits a certain score hide the section with 4 and show the section with 8.

Some food for thought…
You have a lot of repetitive code though. The code for each monkey is almost exactly the same. 4 monkeys - 4 sets of almost identical code. 8 more and you’re up to 12 sets. Ideally you would have one set of monkey code and use it over again for making each monkey maybe throwing in some random differences in speed for each one. Set up this way you could create (or destroy - have you considered exploding monkeys?) as many monkeys as you wanted whenever you wanted. Grid would take care of the layout.

Maybe have just one click handler for the entire page that when user clicks you were able to detect 1) was a monkey clicked 2) if so, which monkey was clicked. Search for “event target” or “event delegation” to get an idea how that would work. Or maybe not. Possibly each monkey should have an attached click handler

how do i hide the sections? And i dont how to use one set of monkey code over and over.
Thank you for replying

Put entire sections in different containers. So when you get arbitrary number of points, use $(selector).hide() on won “game terrain” and show() on next “terrain”. An active “terrain” is visible while inactive, be there are previously beaten or as you would say “next level” are hidden. That how you do on codepen, since you can’t create separate html files.

do you mean div containers?

Yes. Hide beaten level(container). Show new ones when you beat previous one.

Thank you. I will try. “selector” in the brackets will be an Id right?

also, how do i hide the 2nd level while the first unbeaten level is still showing?

As a second thought, … You should just increment some level variable. Level don’t necessary needs to be different per se … Change dynamically your whole position and monkey’s speed and also as you progress, make more holes, also randomly positioned. And in some variable remember previous score and random generate name stage.

Make it hidden by default. Only when “it’s” turn, make it visible.

I currently have this. In the JS file i said hide the second first but its showing both sections and not hiding it.

He’s showing you with jQuery, not Javascript.

You could do the same with plain old Javascript though. When you detect the threshold score

const secondRound = document.getElementById("secondRound");
const firstRound = document.getElementById("firstRound");

function checkScore(){ 
  if(points > 10){ = "none"; = "block";  

Below is very crude demo of concept - I only check score on the first monkey so click that one to see the change above 10 pts

That basically how you’d do it. On codepen at least. Whenever you hit a monkey, this function should activate, checking for points and if point threshold is achieved, hide first, show second and so on …

In addition to what @alhazen1 suggested, you should probably “disable” a monkey from being clicked multiple times in a row after it is clicked. Right now, I can click the same monkey 3-4 times before it goes back in the hole. Maybe when the hole background turns red, you prevent the score from increasing if the monkey is clicked?

Let’s say I had the following html (25 boxes). Instead of adding a click event to each box, I can add a click event to the container holding the boxes and change the color of a box to red ONLY if it is blue. The following jsfiddle shows how to set the onclick event for the container instead of having a click event on each box inside the container.

You may have only one section(board) and generate in js as many holes and monkeys as you wish based on level number. When you are going to next level you clear the board and generate corresponding holes and monkeys for the next level.

You can set the levels and holes numbers in a settings json var that you can easily modify after.

You can make the game time based, so in an interval of 5mins you have to accumulate a certain number of points to get access to the next level.

You can show only one hole at a time but in different place. There are a lot of possibilities. You should plan ahead.

One thing we have all failed to mention is that if you see something on codepen that you like you are free to use that code for yourself. Just form any project that you like and start tinkering