Game Development Reference
In-Depth Information
(octahedronVertexIndices), gl.STATIC_DRAW);
octahedronVertexIndexBuffer.itemSize = 1;
octahedronVertexIndexBuffer.numItems = 24;
}
Now it is time for us to draw the dart, as shown in Listing 7-29.
Listing 7-29.
Drawing the Dart
function drawDart(){
gl.useProgram(shaderPrograms[COLOR_SHADER]);
if(!paused){
checkIfReachedBoard();
}
mat4.identity(mvMatrix);
dart_z += dart_z_velocity;
dart_z = Math.max(dart_z, dartboard_z);
mat4.translate(mvMatrix, [dart_x, dart_y, dart_z]);
mat4.rotate(mvMatrix, 225, [1, 0, 0]);
setMatrixUniforms(COLOR_SHADER);
gl.bindBuffer(gl.ARRAY_BUFFER, octahedronVertexPositionBuffer);
gl.vertexAttribPointer(vertexPositionAttributes[COLOR_SHADER], 3,
gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, octahedronVertexColorBuffer);
gl.vertexAttribPointer(vertexColorAttributes[COLOR_SHADER], 4,
gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, octahedronVertexIndexBuffer);
gl.drawElements(gl.TRIANGLES, octahedronVertexIndexBuffer.numItems,
gl.UNSIGNED_SHORT, 0);
}
In Listing 7-29, we use the color shader and check if our dart has reached the dartboard. We reset the
matrix to the identity and then translate and rotate our dart. We bind our buffers and draw the triangle
elements as usual.
Mouse events
To determine where our dart should end up, we keep track of the vector between the initial and final
mouse position when the user clicks the mouse, moves it with the mouse down, and then releases the
mouse. We also calculate the “velocity” of this event, which is the distance divided by event duration. We
attach
mousedown
and
mouseup
event handlers to the
canvas
DOM element. We have also added a HTML
<
button>
to reset the dart position.
Listing 7-30.
User Interaction and Mouse Events
<button id="reset" >Reset</button>
…
positionStart = [],
