Learn to Code via Tutorials on Repl.it!

← Back to all posts
Make your first web game as a clicker game!
Squirrel777 (144)

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

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.

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

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

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

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:

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:
  • 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!

Comments
hotnewtop
programmeruser (618)
badst (242)

add can be minified to score++

KavinSekar (1)

oof i got 12563 score