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:
09.10.2022
oh i fixed it i typed oneclick instead of onclick
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>
yay
it didn't work for me😢😢😣😣😔
its cool but it would not work for me 🙁
Ah yes, enslaved cookie clicker
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 🙂
I tried to make a clicker game, but I'm stuck on the invertal step. Apparently 'setInvertal is not defined'.
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?
thank you
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
YOu helped me so much, thanks i am a Brazilian with a BrUhStAtIc
Thankyou, so far this is a great tutorial series and is really helping me understand how to actually use javascript to do things!
hello how are you doing i am trying to make a idle mmo for the beaker browser
I know how to make a clicker game, just this gives me lots of ideas and kinda helps me, (your sub) #37
It says that document.getelementbyid is not a function
awesome tutorial, loved it
Most underrated channel no cap
when im click dont work score
Nice tutorial but get a new mic it will help alot
im da 84th sub to you also thx for making this
omg i am new with Js and i think he writes "oneclick" and i wondered why it doesnt work hahah
isCool = false
when ever i buy a new cursor the price and cursor amount doesnt go up
hello, thank you for this video. it was really concise and helped me a lot
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?
Thank you a lot 🙂 This helped me with my school project.
my cursor button won't get updated if i buy it pls help me
Absolute Legend
When i click the image it doesnt update my score helpppp
You are a legend. The videos are so clear and easy to learn. Thanks so much.
Absolute legend bro
Very cool
This video deserves a lot more views. If only CS professors / teachers can explain coding this well.
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.
18:50 im leaving this.
Excuse me could I have the link to this project?
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
Using fibonacci for the upg price
why i try and by a cursor it wont subtract from my price and doesnt work and i get no errors
great video i love how you teach what stuff does not just tell poeple to copy and paste code.
the code to buy cursors does not work by me. And the console does not say what the problem is
Unexpected Token if on line 19 aaaaaa
its not working on me. Do you no the problem?
Huh, nice, rly good tutorial for a beginner :). Thank you.
Button onclick won't buy cursors. Please help. Will provide code.
It baffles me they didn't copy and paste the code somewhere to use in the description.
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
12:32 why did it say "orphans"
how do i setup the localhost? instead i have file and it doesnt reacts to cliking