HTML and CSS Reference
In-Depth Information
$("a#start-button").on("click",function(event) {
event.preventDefault();
alert('Starting Game!');
$(this).hide();
});
You need to wrap the this object in the jQuery object selector using $(this) .
JavaScript also has the capability to do event delegation, which means that you can bind an element to events
on its children. This can be useful for mobile game development because mobile games often contain a multi-
tude of elements that are frequently added and removed from the page that needs to be interacted with via touch
events.
Binding events to each of these elements individually would be both time-consuming and slow. If instead
you were to use event delegation, you could bind only to the container element but still receive all the events as
needed.
To give a concrete example of the usefulness of this, you create a simple game called Block Clicker , the code
for which is shown in Listing 5-1 . The goal of the game is to click as many blocks that appear on the page before
time runs out. If the player clicks 15 of the 20 blocks, they win; otherwise, they lose.
Listing 5-1: binding.html—A simple shape clicking game
var width=$(window).width(), height=$(window).height(),
countdown = 20, countup = 0;
var nextElement = function() {
if(countdown == 0) {
gameOver();
return;
}
var x=Math.random()*(width - 50),
y=Math.random()*(height - 50);
$("<div>").css({
position:'absolute',
left: x, top: y,
width: 50, height: 50,
backgroundColor: 'red'
}).appendTo("#container");
countdown--;
}
var gameOver = function() {
// Stop additional nextElement calls from firing
clearInterval(timer);
if(countup > 15) {
alert("You won!");
} else {
alert("You lost!");
}
}
 
 
Search WWH ::




Custom Search