Skip to content
Sign upLog in
← Back to Community

Make your first web game as a clicker game!

Profile icon
Squirrel777

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!

Voters
Profile icon
l0ganbyrne
Profile icon
superchubbyducky
Profile icon
kirukirami
Profile icon
TsunamiOrSumth
Profile icon
Squirrel777
Comments
hotnewtop
Profile icon
KavinSekar

oof i got 12563 score

Profile icon
StephenCMorales

I have been also working on a project of making games but I am stuck on a task. Even after many tries, I can't resolve this. But today, after reading your post I think I can find a solution. By the way, I need to make a web game based on best online casino Toronto and that's why I am reading an article also for this and I think your console command will help me out with this.

Profile icon
DylanGibbons1

I made this with the tutorial https://codepen.io/dylanmoo/pen/xxXmXgV

Profile icon
356734

This isn't a storey you need to remember. But I'm here to inform you about an Arctic Magic. this is an online gaming platform where you can try out games and play for real money. You can check over here I've made quite a bit of money. They are dependable and trustworthy.

Profile icon
lolkikmoddi

@356734
Why should we gamble while coding? You idiot.

Profile icon
JackGordon10

Thanks a lot dude!

Profile icon
SubToLiFe

@Tanner-Dietriek
ikr

Profile icon
davidgrey

Thanks a lot dude! Im playing lightning roulete on 9winz. it is really good online casino, where I win extra [email protected]

Profile icon
programmeruser
<button onclick="window.c?0:c=0;++c;this.innerText=`Clicked ${c} times`;">Clicked 0 Times</button>
Profile icon
badst

add can be minified to score++

Profile icon
Squirrel777

updated

@pepelaugh