Beginning WebGL - HTML5 Games Most Wanted - page 169

positionChange = [],
timeChange = 0.0;
$(document).ready(function(){
var canvasObj = $("#canvas")
canvas = canvasObj.get(0);
canvasObj.mousedown(function(e){
positionStart = [e.pageX, e.pageY];
timeChange = new Date().getTime();
});
canvasObj.mouseup(function(e){
positionChange = [e.pageX - positionStart[0], e.pageY - positionStart[1]]
timeChange = new Date().getTime() - timeChange;
if(paused && (positionChange[1] < 0)){
throwDart();
}
});
$("#reset").click(function(){
resetDart();
});
initWebGL();
initShaders();
initTexture();
resetDart();
executeProgram();
});
function resetDart(){
paused = true;
dart_x = DART_START[0];
dart_y = DART_START[1];
dart_z = DART_START[2];
translation_angle = 0.0;
dart_z_velocity = 0.0;
$("#reset").attr("disabled", true);
}
To throw the dart, we take the positionChange array and find the inverse angle, by calling Math.atan2 .
Then we set the x position to the cosine of this angle. To find the y position, we take the difference of the
mouse throw velocity and a precomputed expected velocity. Admittingly, the calculations of these values
could use an improved model. For example, a moving lever that the user clicks on to determine their aim,
like the type found in many golf simulators, could be a better user interface.
Listing 7-31. Throwing the Dart
function throwDart(){
resetDart();
paused = false;
var angle = Math.atan2(positionChange[1], positionChange[0]);