Skip to content
Sign upLog in
← Back to Community

Make the Easiest HTML Game

Profile icon
thatpyguy

Clicker Game

Hello!

This is a beginner's tutorial on how to make a clicker game. I am

@thatpyguy
and will release more tutorials in the future. Without further ado, lets get started!

//first, decide what you want your theme to be

My theme is Social Media.

Once you've done this step, go to Google© and search for something related to your theme, preferably on the lower end of the totem pole.

Mine starts with FaceBook.

Then, right click the image and select 'Copy Image Address'. Go back to your project (which i forgot to include up there sorry :) and create an img element.

<img id="main" src="your src"> <div id="score">Score: 0</div>

Once you have this MAIN element, go to the CSS and type this:

#img { height:400px; width:400px; display:block; margin-right:auto; margin-left:auto; } body { background:whatever color fits; }

You can adjust the colors and dimensions according to your circumstances. Now we have the starting screen complete

Then, go to the JS:

var toClick = document.getElementById('main'); var score = document.getElementById('score'); var points = 0; function addPointAndClick() { points += 1 //adds a point score.innerHTML = "Score: "+points; //this accesses the score text and updates it if (points === a number) { toClick.src = "some src" } } toClick.addEventListener('click', addPointAndClick);

You should have a working basic clicking functionality. Have fun making it your own!

Voters
Profile icon
thatpyguy
Comments
hotnewtop
Profile icon
thatpyguy

sorry it should say #main, not #img