HTML & JS - How to make an incremental/clicker game - #1 The Basics - androidgamestore.net

HTML & JS – How to make an incremental/clicker game – #1 The Basics

Tanktot Games
Views: 18423
Like: 399
In this tutorial I show you how to make the basics of an incremental game using only HTML and JS.

I also dive into the fundamentals of setting up an HTML page and including some JS to make the page seem more alive. In this tutorial I go over how to make a image to click on, and have it add to a score (cookies, salsa, etc.). I also go over how to make buildings that cost a score to automatically produce more of the score. All in all I go over the fundamentals of a very basic incremental game that can be expanded further right out of the gate. Such as adding far more buildings.

Official Website:

68 Comments

  1. oh i fixed it i typed oneclick instead of onclick

  2. is there anything wrong<html>
    <body>
    <title>taco clicker</title>

    <body>
    <p>score: <span id="score">0</span></p>
    <img src = "pls.jpg" height="256px" width="256px" oneclick="addToScore(1)">

    <script>
    var score = 0;

    function addToScore(amount) {
    score = score + amount;
    document.getElementById("score").innerHTML = score;
    }
    </script>
    </body>
    </html>

  3. it didn't work for me😢😢😣😣😔

  4. I have been looking around for something like this because I am totally new to coding but want to mess around with things. Everything that I found on Yt was too complicated or not enough content. I am loving your series and will build my own version using your tutorials. Please keep making them 🙂

  5. I tried to make a clicker game, but I'm stuck on the invertal step. Apparently 'setInvertal is not defined'.

  6. Hello. nice video but i have a problem. I would like the game to automate only when I click a button. but when I write your function (setInterval etc), the game automates itself before I call the function in the button. how do i only automate when i click the button?

  7. I tried installing the game from your website. I installed the .NET core. After opening the launcher I get:
    Error finishing download: System,.(O.lnvalidDataException: End of
    Central Directory record could not be found.

    at System,1O. Compression. ZipArchive ReadEndOrcentralDirectary))

    at System.1.Campression.ZipArchive.Init(Stream stream,
    ZipArchiveMade made, Boolean leaveOpen|

    at System.IO.Campression.ZipArchive..ctor(Stream stream,
    ZipArchiveMade made, Boolean leaveOpen, Enicading
    entryNameEncoding]

    at System 1O.Compression.ZipFile, Open(string archiveFileName,
    ZipArchiveMode mode, Encoding entryNameEncading)

    at System,1O. Compression. ZipFile Extra ctToDirectory(String
    sourceArchiveFileName, String destinationDirectoryName, Encoding
    entryNameEncoding, Boolean cvensriteFiles)

    at System.1O. Compression. ZipFile.ExtractToDirectory(String
    sourceArchiveFileName, String destinationDirectoryName, Boolean
    overwriteFiles)

    at
    Noslraclauncher.Main¥vindow.DownloadGameCompletedCallback[Obj
    ect sender, AsyncCompletedEventArgs ¢) in
    C:AUserstanktsourcereposNoslraclauncherMoslracLauncherMainWi
    ndow.xaml.csiline 114

    Any way to fix? The game looks fun and I would like to play

  8. YOu helped me so much, thanks i am a Brazilian with a BrUhStAtIc

  9. Thankyou, so far this is a great tutorial series and is really helping me understand how to actually use javascript to do things!

  10. hello how are you doing i am trying to make a idle mmo for the beaker browser

  11. I know how to make a clicker game, just this gives me lots of ideas and kinda helps me, (your sub) #37

  12. It says that document.getelementbyid is not a function

  13. Nice tutorial but get a new mic it will help alot

  14. im da 84th sub to you also thx for making this

  15. omg i am new with Js and i think he writes "oneclick" and i wondered why it doesnt work hahah

  16. when ever i buy a new cursor the price and cursor amount doesnt go up

  17. hello, thank you for this video. it was really concise and helped me a lot

  18. everytime i buy a cursor i get Cursor [[object HTMLSpanElement]] — 1 after gaining 15 points and buying it, it locks, the number of owned cursors goes up but the object HTMLSpanElement stays? Does anyone know how to fix this?

  19. Thank you a lot 🙂 This helped me with my school project.

  20. my cursor button won't get updated if i buy it pls help me

  21. When i click the image it doesnt update my score helpppp

  22. You are a legend. The videos are so clear and easy to learn. Thanks so much.

  23. This video deserves a lot more views. If only CS professors / teachers can explain coding this well.

  24. The score wont update. im 10 mins in. It wont seem to change it to 1. i am using a separate js and css page linked to my index.html but i dont see why it wouldnt update.

  25. Excuse me could I have the link to this project?

  26. Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

  27. why i try and by a cursor it wont subtract from my price and doesnt work and i get no errors

  28. great video i love how you teach what stuff does not just tell poeple to copy and paste code.

  29. the code to buy cursors does not work by me. And the console does not say what the problem is

  30. Huh, nice, rly good tutorial for a beginner :). Thank you.

  31. Button onclick won't buy cursors. Please help. Will provide code.

  32. It baffles me they didn't copy and paste the code somewhere to use in the description.

  33. I tried doing this but it didn't change the text when I did the code to do it

    Here's the code and the error

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Universe Clicker</title>

    <script>

    var money = 0;

    money = money + 1;

    document.getElementById("money").innerHTML = money;

    </script>

    <style>

    .clicker {

    position: fixed;

    margin-top: -100px;

    margin-left: 320px;

    size: fixed;

    }

    .moneytext {

    text-align: center;

    size: fixed;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 50px;

    }

    </style>

    </head>

    <body>

    <h1 class="moneytext">Money: <span id="money">0</span><h1>

    <img src="img/planet.png" alt="Click This For Money" class="clicker" height="700" width="1200">

    </body>

    </html>

    Now here's the error

    Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
    at index.html:13:56

  34. how do i setup the localhost? instead i have file and it doesnt reacts to cliking

Leave a Reply

Your email address will not be published.