Make your first web game as a clicker game!
h
Squirrel777 (138)

Introduction

Ok, so you want to make games? And you dont know where to start? Well you came to the right place! Today you will be developing your very first web game which will just be a very simple clicker game! So what are we waiting for? Let's get started!

What you need

  • A new HTML repl
  • A basic knowledge of HTML and Javascript, if you dont have that, here is a tutorial

The tutorial

Ok so first we are going to make a button

<button>Click me!</button>

Now, that does not do anything yet, so lets add the onclick attribute! This can be added on to anything such as images, text, etc. But today were going to be using a button.

<button onclick="">Click me!</button>

Ok, so we added the onclick attribute, now lets add some JavaScript so the button can actually do something

var score = 0; //This is going to be the score
function add() { //This function is what makes the button add!
 score++
}

And lets add the add() function to the button.

<button onclick="add()">Click me!</button>

Run your repl, and it should add the score. But the thing is, you cant see your score. So lets do that!

var score = 0;
function add() {
  score++
  //We are using the document.getElementById('').innerHTML method
  document.getElementById("score").innerHTML = "Score: " + score; 
  //updates the score every time the button is clicked
}

If you dont know about the `document.getElementById(""), well read this Javascript tutorial! Ok so now we have to actually display it now. Use the following HTML code to do this:

<p id="score"></p>

You can change p to h1 or anything else to change how the score looks like, it does not really matter as long as it has id="score" and it's text, not another form of media such as images, videos, audio etc.

Conclusion

So congratulations! You have made your first web game which, is a clicker game! Below is a repl that was completed in under a minute lol. It basically just covers everything that we did today, and below is some "homework" to challenge you:

  • Add CSS. Clue:
#ID {

}
  • Maybe try adding a shop!

  • Try changing the button to an image or some text

Well, that's it for today! Leave an upvote if this helped you!

You are viewing a single comment. View All
badst (640)

add can be minified to score++