One of the many things I’ve been trying to accomplish with HTML5 is clicking inside or at least make it look like the user is clicking inside the application.
Before I go any further, I would like to give credit to: http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/, HTML5 Canvas For Games and Entertainment book, and HTML5 Games Development by Example book. For clarification, I’m not being paid for advertising those books or websites. In all of these resources, they helped in some way to make this example possible. The website and the HTML5 Canvas book showed how to make something with HTML5 with the help of JQuery.
I searched online before using these resources and found out how you could click a object in the HTML5 canvas, but it involved around 40 lines of code. I don’t know about you, but I don’t want to write that much code just to click one object. The resources showed another way of getting objects into or on I should say, the canvas. After many tries, I finally got it to work.
HTML
CSS
#canvas{
background-color:#CCCCCC;
z-index:100;
}
#button{
position:absolute;
top:100px;
left:50px;
z-index:5000;
}
Javascript
var _gameButton = $(“#button”);
function init(){
$(‘#button’).mouseup(function(){
alert(“Start Game”);
});
}
Click picture to try it for yourself.
