What does this mean for me? You will always be able to play your favorite games on Kongregate. However, certain site features may suddenly stop working and leave you with a severely degraded experience.
What should I do? We strongly urge all our users to upgrade to modern browsers for a better experience and improved security.
We suggest you install the latest version of one of these browsers:
# **Introduction**
# **The Basics**
# **How do I make games for Kongregate?**
Kongregate is a browser game hosting website owned by the Gamestop Corporation. You can upload Adobe Flash, HTML 5/Javascript, Iframe, and Unity games.
To upload an HTML5 game to Kongregate, you need to create a working .html file and, possibly, corresponding .js files.
* * *
# **So, what’s an .html file?**
An .html file is used, primarily, for websites! Even the guide you’re looking at is written like an .html file. Well, kinda. I’m not going to go into this. Point is, .html files are for websites and stuff.
**What about .js files?**
HTML (Hypertext Marukp Language) utilizes Javascript (.js files), an object-oriented computer programming language commonly used to create interactive effects within web browsers.
* * *
# **Where can I get these .html/.js files?**
You use text editors to make them! So exciting, am I right?
* * *
# **What software do I need?**
You’ll need a text editor and a web browser, preferably one that has a debug mode. These are all suggestions, and you may find better tools later on, but this is what I use.
- **Notepad++** ( [Official Site](https://notepad-plus-plus.org/) | [6.9.2 Download](https://notepad-plus-plus.org/download/v6.9.2.html) )
- Optional: **Firefox Developer Edition** ( [Official Site](https://www.mozilla.org/en-US/firefox/developer/) )
* * *
# **What code do I need to learn to make an HTML5 game?**
HTML and Javascript! I mean, there are other things that can help you out, too. JQuery, probably, but it’s good to start the the basics! HTML and Javascript.
* * *
# **Tutorials and References: Where do I learn HTML and Javascript?**
[W3Schools](http://www.w3schools.com/)
Honestly, that’s the best utility for me. It has documentation, easy lesson plans, etc. Please comment other websites if anyone knows any other websites.
* * *
# **Creating a Goal: Your First Game**
So, you may have dreams of this amazing epic game full of twists and turns and puzzles. Maybe a FPS with epic graphics and storyline. I’m proud of your dreams, good work! However, your first game is going to look worse than most of my games. Unless you have a lot of money, time, employees, and other stuff, your very first game will look pretty bad. That being said, here’s some general tips:
- Create 1 level, with a single task.
- Spend about 10% or less of your time on graphics.
- Only spend a few hours on this project.
- Regardless of what your game looks or feels like, be proud.
- Don’t worry if it’s buggy or not playable, if it kinda works, you did great.
* * *
# **My game won’t work at all**
If you’re running Firefox Developer, while your game is open, open the browser console window. One way to do this is to right-click your game and click “inspect element”. A screen should pop up that looks similar to your HTML file. Go ahead and click the window that says, “Console”. From there, you’ll see debugging errors.
* * *
# **HTML isn’t really my thing**
Try Flash! This guide is a complete rip-off of [the Flash programming guide](http://www.kongregate.com/forums/4-game-programming/topics/160453-how-to-make-flash-games)
# **Making your First Game**
This is it, the moment we’ve all been waiting for (or, I mean, like at least 4 of us have been waiting for). We’re going to make a quick game using HTML/Javascript!
Go ahead and create two text files:
- main.html
- main.js
Fill your **main.html** file with the following code:
```
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="BackgroundBox" style="overflow:hidden; position: absolute; left: 0px; top: 0px; width: 600px; height: 400px; background-color: #D3D3D3; border-color: black; border-style: solid; border-width: 2px;">
<canvas id="GraphicsBox" width="601px" height="401px" style="overflow:hidden; position: absolute; width: 601px; height: 401px; left: 1px; top: 1px;">Your browser requires Canvas support to play this game.</canvas>
<div id="EventCatcher" style="overflow:scroll; position: absolute; left: -100px; top: -100px; width: 800px; height: 600px;">
<div style="height: 4000px; width: 10px;"></div>
</div>
</div>
<script>
/*
// For those of you interested in the Kongregate API, take a look at this later on.
// For now, skip this commented code block.
var kongregate;
var LoadingAPI = window.parent.LoadingAPI;
if (LoadingAPI)
kongregate = window.parent.kongregateAPI.getAPI();
*/
// Initialize
startLoading()
</script>
</body>
</html>
```
Fill your **main.js** file with the following code:
```
var gameInterval;
var gameCanvas;
var eventCatcherDiv;
function startLoading()
{
eventCatcherDiv = document.getElementById("EventCatcher");
// eventCatcherDiv events go here
gameCanvas = document.getElementById("GraphicsBox");
gameInterval = setInterval(hasLoaded, 250);
}
function hasLoaded()
{
if (true) // Check to see if all info is loaded
{
clearInterval(gameInterval);
startGame();
}
}
function startGame()
{
gameInterval = setInterval(runGame, 25);
}
function runGame()
{
}```
Some quick notes on what these functions do:
**startLoading** : When the game’s page is loaded, this function runs. It gets everything set up and loads additional information.
**hasLoaded** : Every 250 milliseconds (can be changed in the startLoading function), this function is called to check all of your assets (sounds, graphics, etc).
**startGame** : If hasLoaded has checked all of your assets and gives you the okay, it’ll run this function. This resets all of your variables and gets ready for the game. Anything pre-rendered or immediately before-play functions should run here.
**runGame** : This runs every 25 milliseconds (can be changed in the startGame function) and will process events in your game.
From here, you’ll have an empty canvas with no events. Let’s go ahead and draw something on your window! Let’s add the following function, and make changes to the StartGame function:
```
var heroX = 10;
var heroY = 10;
function drawTheHero(g)
{
g.fillStyle = "#0000FF";
g.fillRect(heroX, heroY, 20, 20);
}
function startGame()
{
drawTheHero(gameCanvas.getContext("2d"));
gameInterval = setInterval(runGame, 25);
}
```
If you open the main.html file, you should see a little blue square in the top left corner, 10×10 px from the top left corner, and 20×20 px large. Now, let’s get some action going. You know, record those key inputs and what-not. Every time we move the mouse, let’s move the hero’s position.
```
// eventCatcherDiv events go here
eventCatcherDiv.addEventListener("mousemove", canvasMove);
```
```
function canvasMove(E)
{
E = E || window.event;
heroX = E.pageX;
heroY = E.pageY;
}
function runGame()
{
gameCanvas.getContext("2d").clearRect(0, 0, gameCanvas.width, gameCanvas.height);
drawTheHero(gameCanvas.getContext("2d"));
}
```
Now that the hero is following our mouse cursor, let’s create a coin for our hero to pick up.
```
var coinX = 100;
var coinY = 100;
function drawCoin(g)
{
g.fillStyle = "#FFD700";
g.beginPath();
g.arc(coinX, coinY, 20, 0, 2*Math.PI);
g.fill();
}
```
```
function runGame()
{
gameCanvas.getContext("2d").clearRect(0, 0, gameCanvas.width, gameCanvas.height);
drawCoin(gameCanvas.getContext("2d"));
drawTheHero(gameCanvas.getContext("2d"));
}```
```
function startGame()
{
drawCoin(gameCanvas.getContext("2d"));```
Every time we touch that coin, let’s move it around the map.
```
function isTouchingCoin()
{
// 20x20 is the size of the hero.
// The radius of the coin is 20.
if (heroX + 20 > coinX - 20 && heroX < coinX + 20
&& heroY + 20 > coinY - 20 && heroY < coinY + 20)
return true;
}
function moveCoin()
{
coinX = Math.random() * 600; // width of draw area
coinY = Math.random() * 400; // height of draw area
}```
```
function runGame()
{
if (isTouchingCoin())
moveCoin();
gameCanvas.getContext("2d").clearRect(0, 0, gameCanvas.width, gameCanvas.height);
drawCoin(gameCanvas.getContext("2d"));
drawTheHero(gameCanvas.getContext("2d"));
}```
# **Advanced Tutorial – Stats**
Stats are just variables that you edit as certain events happen. Where it might be hit detection, or some kind of special user action. Different games may use different layouts for stats. Two common ones I use are:
**Stat Arrays**
```
var default_Stats = [];
default_Stats.push(10); // Health
default_Stats.push(10); // Max Health
default_Stats.push(1); // Attack
default_Stats.push(0); // Defense
```
Working with Stat Arrays:
```
var Monster1 = [10, 10, 1, 0];
var Monster2 = [10, 10, 1, 0];
someCombat(Monster1, Monster2);
function someCombat(attacker, defender)
{
// defender's HP = attacker's Attack - defender's Defense, no less than 0.
defender[0] -= Math.max(attacker[3] - defender[4], 0);
}
```
**Individual Stats**
```
var player_Speed = 0;
var player_Score = 0;
```
Working with Individual Stats:
```
function hitsSpeedBoost()
{
player_Speed += 10;
}
```
# **Advanced Tutorial – Text**
If you want to draw text, you have a couple of ways to go about doing it. Here’s a quick function that lets you draw text at a given X and Y position. If you set fillText to false, the text will be hollow.
```
function drawText(g, stringValue, fillText, x, y)
{
g.font = "30px Arial";
g.fillStyle = "#00FF00";
if (fillText)
g.fillText(stringValue, x, y);
else
g.strokeText(stringValue, x, y);
}
```
# **Advanced Tutorial – Audio and Images**
Suggest you load this all up in the preloader. If you follow the first game example, you want to call your preloader function at the end of the StartLoading Function. To check if everything is fully loaded, run the DidEverythingLoad Function.
**IF YOU USE AN ASSET THAT YOU DID NOT MAKE:** Make sure you have the creator’s permission and give credit to the creator. In your game description, write the creator’s name, public profile, or other contact info that they would prefer. Never assume anything about the creator of resources you are using, always ask before doing anything with their public image.
```
var all_Images = [];
var all_Audio = [];
function preLoader()
{
all_Images.push(getImageFile("Sample_Image.png"));
all_Audio.push(new Audio("Sample_Audio.mp3"));
}
function getImageFile(filename)
{
var imgVar = document.createElement("img");
imgVar.setAttribute("src", filename);
return imgVar;
}
function didEverythingLoad()
{
for (var j = 0; j < all_Images.length; j++)
if (!all_Images[j].complete) return false;
for (var j = 0; j < all_Audio.length; j++)
if (all_Audio[j].readyState != 4) return false;
return true;
}
```
Don’t forget to check all of your assets before starting your game.
```
function hasLoaded()
{
if (didEverythingLoad()) // Check to see if all info is loaded
{
// ...
}
}
```
**Working with Audio**
There are only 3 supported audio files, and not all browsers support all files. **MP3** is supported by all the popular browsers, but requires a license in order to use (link below). **WAV** is **not** supported by internet explorer. **OGG** is **not** supported by internet explorer or Safari. **AAC** is **not** supported by Firefox or Opera. Make sure your audio file is managed by the browsers you’re presenting to.
**MP3 Licensing:** [http://mp3licensing.com/royalty/games.html](http://mp3licensing.com/royalty/games.html)
```
all_Audio[0].play(); // Starts the sound effect
all_Audio[0].pause(); // Pauses the sound effect
all_Audio[0].currentTime = 0; // Sets current time to 0.
all_Audio[0].volume = 0.5; // Sets current volume to 50%.
function muteAll()
{
for (var j = 0; j < all_Audio.length; j++)
{
all_Audio[j].volume = 0; // Option 1
all_Audio[j].pause(); // Option 2
}
}
```
**Sound Effects**
Sound effects are short bursts of sound that may play over and over again, overlapping itself, as compared to music, which typically plays it’s track only once. That being said, you may end up having to create multiple of the same sound effect at the same time. Here’s an example on how to accomplish this.
```
var currentlyPlayingSoundEffects = [];
playSoundEffect(all_Audio[0]);
function playSoundEffect(var audioFile)
{
// If a previously played sound effect has ended, retake that sound effect's position.
for (var j = 0; j < currentlyPlayingSoundEffects.length; j++)
{
if (currentlyPlayingSoundEffects[j].paused)
{
currentlyPlayingSoundEffects[j].src = audioFile.src;
currentlyPlayingSoundEffects[j].play();
return;
}
}
// Otherwise, create a new position for the newly played sound effect.
currentlyPlayingSoundEffects.push(new Audio(audioFile.src));
currentlyPlayingSoundEffects[currentlyPlayingSoundEffects.length - 1].play();
return;
}
```
**Displaying Images**
```
g.drawImage(all_Images[0], x, y);
```
# **Advanced Tutorial – Other Events**
Here are some other events you might find useful and a short description of what they do.
```
// Mouse click
eventCatcherDiv.addEventListener("click", canvasClicked);
// Right-Mouse click
eventCatcherDiv.addEventListener("contextmenu", canvasContext);
// Mouse button is pressed down
eventCatcherDiv.addEventListener("mousedown", canvasDragStart);
// Mouse is moved
eventCatcherDiv.addEventListener("mousemove", canvasDrag);
// Mose button is unpressed
eventCatcherDiv.addEventListener("mouseup", canvasDragEnd);
// Keyboard key is pressed down
eventCatcherDiv.addEventListener("keydown", canvasKeyDown);
// Keyboard key is unpressed
eventCatcherDiv.addEventListener("keyup", canvasKeyUp);
// Keyboard key is clicked
eventCatcherDiv.addEventListener("keypress", canvasKeyPress);
// Check if user scrolled
// Note: We set the scroll position to the
// center every time the event is triggered
// to see how much the user scrolled.
eventCatcherDiv.scrollTop = 2000;
eventCatcherDiv.addEventListener("scroll", canvasScroll);
```
# **Advanced Tutorial – Collision Detection (Rectangles)**
Often you’ll find you have two objects, and when these two objects ‘touch’, an event should occur. There are many ways to go about detecting all objects, but when you have your two objects, you’ll need to find out if these two objects overlap or ‘touch’. As you may have read above with the isTouchingCoin function, we have a basic way of testing for square areas by checking if the edges of the squares overlap one-another. Here’s a function to help:
```
function rectanglesTouching(rect1, rect2)
{
if (
// rect1's right side position is greater than or equal to rect2's left side position
rect1.x + rect1.width >= rect2.x
// rect1's bottom side position is greater than or equal to rect2's top side position
&& rect1.y + rect1.height >= rect2.y
// rect1's top side position is less than or equal to rect2's bottom side position
&& rect1.y <= rect2.y + rect2.height
// rect1's left side position is less than or equal to rect2's right side position
&& rect1.x <= rect2.x + rect2.width
)
return true; // The two are touching
else
return false;
}
```
# **Advanced Tutorial – Screen Transitions**
When you’re performing a transition between two screens, you would typically just change the functions you’re using to draw the screen. Example:
```
function drawCombat()
{
// ...
}
function drawMenu()
{
// ...
}
function runGame()
{
if (inCombat())
drawCombat();
else
drawMenu();
}
```
# **Advanced Tutorial – Saving**
‘Saving’ between sessions can be performed in your browser through the form of cookies. Cookies are little bits of information that websites save onto your browser. It’s an easy function or two that can be added in to allow your game to save cookies. So, let’s get started on making some delicious cookies!
Yummy! Basically, this is just a copy from here: [W3 School – JavaScript Cookies](http://www.w3schools.com/js/js_cookies.asp)
**Getting Cookies**
```
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for (var j = 0; j < ca.length; j++)
{
var c = ca[j];
while (c.charAt(0) == ' ')
c = c.substring(1);
if (c.indexOf(name) == 0)
return c.substring(name.length, c.length);
}
return "";
}
```
**Saving Cookies**
```
function setCookie(cname, cvalue, exdays)
{
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
```
# **Advanced Tutorial – Hiding the Cursor**
Alright, this one is something we’ll do in the main.html file. Move yourself over to the body tag and make the modification:
```
<body style="cursor: none;">
```
There you have it! The cursor is no longer visible on your game. You can, also, effect this in your javascript code, and you can set it to specific elements instead of the entirety of your game.
```
[element].style.cursor = “none”;
```
# **Advanced Tutorial – Highscores**
For starters, check out your main.html file. Remember that little piece I had commented out? Let’s go ahead and uncomment it.
**main.html**
```
<script>
var kongregate;
var LoadingAPI = window.parent.LoadingAPI;
if (LoadingAPI)
kongregate = window.parent.kongregateAPI.getAPI();
// Initialize
startLoading()
</script>
```
In the next subsection, we’ll show how to setup the kongregate parent’s API, but go ahead and take a look at the different things you can do with the kongregate API, such as submitting highscores, or getting the user’s name! [Client API: Javascript](http://developers.kongregate.com/docs/api-overview/client-api)
For a quick tip, you can submit scores using the Kongregate API with a simple line of code:
```
kongregate.stats.submit('Score', 1000);
```
Replace ‘Score’ with whatever name of the stat you’d like to submit a score for. Replace ‘1000’ with the value of that score. Take a look at more Kongregate Documentation here! [Kongregate API Documentation](http://docs.kongregate.com/docs)
# **Advanced Tutorial – Uploading to Kongregate**
Before we begin, take a look at the [Kongregate Game Shell](http://developers.kongregate.com/docs/client-api/kongregate-shell)
I’ve written up a ‘cleaner’ version for your game, but it’s important to always link the original. The version below will get your game Kongregate-ready in a quick second!
**kongregate\_shell.html**
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kongregate Game Shell</title>
<style type="text/css">
html{border: none; overflow: hidden; background-color: #333; height: 100%;}
body{border: none; background-color: #333;margin:0; padding:0;}
</style>
<script src='https://cdn1.kongregate.com/javascripts/kongregate_api.js'></script>
</head>
<body>
<!-- The div that the game will be placed into. Make sure to set the width and height properly -->
<div id="contentdiv" style="top:0px; left:0px; width:604px; height:404px; borders:none;">
<!-- You can manually put your game iframe in here instead of calling embedFrame above if you wish -->
<iframe id="TheGAME" width="604" height="404"></iframe>
</div>
<script>
// Load the API
var LoadingAPI = !window.location.protocol.startsWith("file");
if (!LoadingAPI) onComplete();
else kongregateAPI.loadAPI(onComplete);
// Callback function
function onComplete()
{
console.log("Loading Game");
document.getElementById("TheGAME").src = "main.html";
}
</script>
</body>
</html>
```
Now, here’s the final piece to-do before you upload your game. Make sure all .js and .html files are in the root folder (to say, all of those files are in the same folder as kongregate\_shell.html). Your images and audio can be in subfolders, so you shouldn’t have to worry to much about that. You’re going to need to select all of your files/folders (excluding kongregate\_shell.html) and compress it into a .zip file. I’ll name mine ‘version 001.zip’
Head over to the [Upload a Game](http://www.kongregate.com/games/new) page.
Enter in all of the information for your game. If you have art, music, or assets from someone other than yourself, **make note of them in the description**. Also, if any of them have Kongregate accounts, add them as collaborators. Remember, this is a group project if they helped you, and everyone in the group deserves to be recognized for their achievements.
Click the continue button. From here, you’ll upload the actual game. Upload your game file, which is **kongregate\_shell.html**. Checkmark “I would like to upload additional files”. Upload your zip file ( **version 001.zip** ). Enter in the remaining information, including your icon, screenshots, tags, and even api data. If you added highscores, make sure to mark the highscore data here. Fill in the remaining form information and, tada, you’re done! Upload your game.
It’ll come up with a preview for you to test the game and make sure it’s working properly. It may take a while for your game to fully load, so be patient. I’d suggest waiting about 24 hours before you actually publish the game to make sure all of the assets are loaded properly.
Final note, your game may not function properly in the first few hours of publishing. I don’t know why, Kongregate gets so many game submissions that is probably backs up their server from time to time. In any case, don’t sweat it, just check back in a couple of hours to make sure it’s running smoothly.
And, as always, happy developing!
# **Miscellaneous**
Thank you for reading through the whole guide! Down here I have a few notes.
# **To-Do List**
1. Accept more Q&A from people (that means your questions will be answered by someone!)
2. Add more detail to various tutorials
3. More tutorials!
# **Contributors and Specials**
A special thanks to the following people/groups and their assistance in running the forums, editing this tutorial, organizing events, or for everything you do to help the Kongregate Game Development forums!
- [JohannasGarden](http://www.kongregate.com/accounts/JohannasGarden)
- [Tulrog](http://www.kongregate.com/accounts/Tulrog)
- [DarkRainyKnight](http://www.kongregate.com/accounts/DarkRainyKnight)
Please head on over to the Game In Ten Days forum thread and join in the competition! Look for the **[GiTD]** tag on the [Game Development](http://www.kongregate.com/forums/4-game-programming) forum!
Looks good. I’m thinking about doing the GiTD in HTML5 just to try this out, if I can get myself going on it.
One question: what audio formats does it support? Specifically, can I play .mid files (since it is Javascript, I assume the answer is yes)?
Actually, doing a quick search, there were several “real” audio formats listed (on a wiki), but no MIDI… I don’t know if that’s because it isn’t supported, or if they just didn’t consider it relevant. It seems extremely wasteful to me to use a “real” audio format for a simple browser game, bloating its size, where a small MIDI file would suffice.
***@[dragon\_of\_celts](/forums/4/topics/640187?page=1#posts-10520400):*** There are only 3 supported audio files, and not all browsers support all files. **MP3** is supported by all the popular browsers. **WAV** is **not** supported by internet explorer. **OGG** is **not** supported by internet explorer or Safari. Make sure your audio file is managed by the browsers you’re presenting to.
It is worth noting that you need to [pay the licensing fee](http://mp3licensing.com/royalty/games.html) to use MP3s in your game. Stick to wav files, even if it means losing your IE audience.
> *Originally posted by **[EndlessSporadic](/forums/4/topics/640187?page=1#posts-10547875):***
>
> It is worth noting that you need to [pay the licensing fee](http://mp3licensing.com/royalty/games.html) to use MP3s in your game. Stick to wav files, even if it means losing your IE audience.
Thank you very much! I didn’t know about licensing, so you saved me (and a bunch of others) a lot of tail.
> *Originally posted by **[IAHHAI1](/forums/4/topics/640187?page=1#posts-10638497):***
>
> is there a way to make something pop up once hero is touching coin\>?
You can add text, perhaps a score or something?
[http://www.kongregate.com/forums/4/topics/640187?page=1#posts-10520122](http://www.kongregate.com/forums/4/topics/640187?page=1#posts-10520122)
Or, you could literally draw on the screen. I suggest you set up some sort of timer or counter, so the pop-up will fade away over time.
```
var popUpDuration = 30;
function drawThePopUp(g)
{
g.fillStyle = "#00FFFF";
g.fillRect(0, 0, 100, 40);
g.fillText("You did it!", 0, 40);
}
function runGame()
{
// ... Other code here
if (isTouchingCoin())
{
moveCoin();
popUpDuration = 30;
}
if (popUpDuration > 0)
{
popUpDuration --;
drawThePopUp(gameCanvas.getContext("2d"));
}
// ... Other code here
}
```
is there a way to check, only using javascript (no changes to html) if something specific (like a button) is being clicked (if using jquery, then 2.1.0 please)?
> *Originally posted by **[hazard_Gamer](/forums/4/topics/640187?page=1#10687838)**:*
> is there a way to check, only using javascript (no changes to html) if something specific (like a button) is being clicked (if using jquery, then 2.1.0 please)?
There are many ways to go about doing this, but the one I prefer is adding an event to the button.
```
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
// Event occurs
}
```
You can see additional event listener information from here: http://www.w3schools.com/jsref/met_element_addeventlistener.asp
> *Originally posted by **[Shay9999](/forums/4/topics/640187?page=1#10691472)**:*
> > *Originally posted by **[hazard_Gamer](/forums/4/topics/640187?page=1#10687838)**:*
> > is there a way to check, only using javascript (no changes to html) if something specific (like a button) is being clicked (if using jquery, then 2.1.0 please)?
>
> There are many ways to go about doing this, but the one I prefer is adding an event to the button.
> ```
> document.getElementById("myBtn").addEventListener("click", myFunction);
> function myFunction() {
> // Event occurs
> }
> ```
>
> You can see additional event listener information from here: http://www.w3schools.com/jsref/met_element_addeventlistener.asp
Well, what I want is to check if a javascript button, or something else like a tree is being clicked. I know how to do the if an html button is clicked, but how to check if a thing made with the canvas using javascript is clicked?
EDIT
I got it to check where it was clicked, but when I check the coordinates it doesn't work. Here's my script
>```
>function clickHandler(event) {
>console.log(event.pageX + " " + event.pageY);
>if (event.pageX <= 160 && event.pageX >= 60 && event.PageY <= 110 && event.pageY >= 60) {
> console.log("button clicked");
> //buyIronMine.buy();
>}
>}
>//stuff here
>//inside runGame function
>$("canvas").click(clickHandler);
>//jQuery 2.2.4
>```
However it doesn't work. It says where I clicked but if I clicked that button (I have a button, drawn in js canvas, not html <button> and such) it wouldn't say. Using newest version of chrome on a mac osx.
 "Shay9999"){kind=small}
 "dragon_of_celts"){kind=small}
 "EndlessSporadic"){kind=small}
 "IAHHAI1"){kind=small}
 "hazard_Gamer"){kind=small}