I need help with a clicker game

I am trying to make a clicker game that has a button you click, and the amount of clicks is from everbody who ever visits the website. But I am new to javascript, so I have no idea. Pls Help?

I am going to assume you are absolutely brand new to JavaScript and programming in general. So my first tip is to maybe read a tutorial or book on how JavaScript works first before trying to make your project.

One great free tutorial you can start with is https://www.w3schools.com/js/

The tutorial allows you to step-by-step learn the language and try things in real time with a series of interactive demos. I suggest you work your way through the language and try things out and when you get to the section on events, you will learn specifically what you need to know about counting button clicks.

For my second tip, I would maybe first tackle how to count clicks of the button for each user and not for everyone who visits the website. This is because to count everyone on the website, you are going to need to store the current click count on the server (like in a file or database) which involves a bit more than just JavaScript.

Start with the guide, play around and get familiar with the language and then you should be able to easily figure out how to get started with your idea. :slight_smile:

If not, you will at least have some code you have written and worked out that you can then show us and we can help you out further.

I am not an absolute beginner, I know Html and Css, but I am working on javascript. I have the game going, this is just source code, no styling, but here is the javascript code

//Variables
let clicks = 0;

//end

function add() {
    clicks++;
    document.getElementById("clickcount").innerHTML = 'Clicks: ' + clicks;

}

here is the html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clicker Game</title>
</head>
<body>
    <button onclick="add()">Click Me!</button>
    <p id="clickcount">Clicks: 0</p>
</body>
<script src="ClickerJavaScript.js"></script>
</html>

Ok maybe lead with that next time. :wink:

Are you just wanting to make this so that it works across the entire website for everyone? A running total? If that is the case, you can have your JS submit your clicks to a server to record and then have the server return that value back to your Javascript. Are you familiar with Ajax requests?

1 Like

Yes to 1st question and no not really to the last, as I said, I am not the best with javascript. And also I am already on w3 schools. I have a w3 space at noblocked.w3spaces.com/main-website.html. I learned html/css at freecodecamp.org

Could You Give Me A Code Solution with exact steps? I just researched it and it is very difficult.

This is not a do-it-for-me kind of website. Folks here will help you get a woeking solution but not do it for you. After all, where’s the learning in that?

4 Likes

I know English and Norwegian so should have no trouble writing a novel in say German?
That being said, as with css, you should not be using inline js. Put your js code in a .js file. Just be sure to use the “defer” property in the script tag.
If your research has not included the developer tools, go and get acquainted with them, especially the debugger.
The debugger enables you to set break points to a code line and read the values held by the variables.

I am putting all of this in my website, which is a w3space, so I do have them in different files.
Screenshot 2023-11-29 9.13.41 AM
And also I Am kinda on a school chromebook, so they blocked the developer tools on chrome. :frowning:

Sorry I stopped reading when I got to onclick()
I recommend that the script tag be moved into the head section and include the ‘defer’ property.
Put an alert(Clicker count: ${clicks} into your add function.
Global variables are frowned upon, for good reason.
Instead use either local storage or custom data
Custom data stores the data in an element and so does not persist between sessions
Local storage stores it in the browser(I think) and persists. It is associated with the domain.
Data set in something.com/viewer/index.html is available to something.com/editor/index.html