Learn to Code via Tutorials on Repl.it!

← Back to all posts
Make the Easiest HTML Game
thatpyguy (0)

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!

Commentshotnewtop
thatpyguy (0)

sorry it should say #main, not #img