Build an incremental CLICKER game with vanilla HTML, CSS and JS – Project Initialisation
In this episode, we initialise the project and working towards making the gem clickable and make it generate income when clicked. We also add our first upgrade which can be purchased when the gem threshhold is met.
Thank you for watching the video! If you have any questions or suggestions, feel free to drop a comment. Hope to see you there in the next episode 😀
Unfortunately I can’t include the link to the assets folder right now as my verification level isn’t high enough for YouTube to allow me to include links in the description. Apologies for that.
If you want to use the same assets as me: you can search up the keywords “gem cartoon” and “transparent cursor white” to find the images.
#javascript #clickergame #html #css #jstutorial #tutorial #coding
so underrated!!!
I'm a 190 th subscriber brooooo heelllooooo
Hi 👋 like like you video I am trying to find such type of video from few days but couldn't find anyone like yours can you please upload the second part of this project and also can you tell me how many part is there in making this clicker game.
omg, just 5 mins into the video and i learnt so much. I am very eager to see more of this. please make the next video and upload asap! <3
bro pls part 2
So… first, I have a question : WHEN WILL YOU UPLOAD THE PART 2
Just keep going and create projects without forgeting to finish them.
You have a great potential on Youtube, I can feel it.
Hope to see you in my notifications tab 🙂
Part 2 please! ☺️
Thx a lot, we have projects for next week but wanted to prepare myself since I thought a clicker game would be pretty unique and wanted to do it(didn't want to repeat the quiz template a 100th time) and learned a ton in this. Subbed!
Your teaching style is so comfortable. I loved it
I will be following you all the way thanks for this amazing tutorial
soy tu sub 50 :).muy buenos tus tutoriales
When trying to stop the clicker from upgrading into negative costs. It wouldn't count clicks after I made the changes to the code. Is something wrong with the code? I can't see where it is going wrong 🙁
let gem = document.querySelector('.gem-cost')
let parsedGem = parseFloat(gem.innerHTML)
let clickerCost = document.querySelector('.clicker-cost')
let parsedClickerCost = parseFloat(clickerCost.innerHTML)
function incrementGem(){
parsedGem +- 1
gem.innerHTML = parsedGem
}
function buyClicker(){
if (parsedGem >= parsedClickerCost) {
parsedGem -= parsedClickerCost
gem.innerHTML = parsedGem
}
}
100th like. Loved your teaching style! thank you
tysm, working on my website looking for some way to increment numbers on <p> and this helped.
I ran across an issue with trying to use your initial function for incremental use.
If anyone else is running into errors declaring the formatting and why it cant be a number with parseint, you can use this function instead:
Go to the span, and add the tag id="gemCost" next to the word "span" like this
<span id="gemCost" class="gemCost">
//uses numbers without parseint
function incrementGem() {
let gemUp = document.getElementById('gemCost');
let gemCount = gemUp.innerHTML;
gemCount++;
gemUp.innerHTML = gemCount;
}
I am your 140th sub! remember me when you get to 1m 🙂
thanks
this is teaching me so much about HTML, CSS, and JS. TYSM!!!
Um, for clickercost, it appears "TypeError: Cannot read properties of null (reading 'innerHTML')"
div class='right' is not in the right of the image is below the gem image @boozz do you have the solution? edit i have do a mistake i have dont create div class="main" now the problem is not the problem (sorry for the english i'm a 11 years old french)
That's an amazing video