Game Development Reference
In-Depth Information
Planning
A simple dart game.
Game:
Models:
A 2D dartboard/target will be rendered in a circular shape using triangle primitives
and a textured image. A 3D “dart,” an elongated tetrahedron, will be rendered.
Input:
We will use mouse events to throw the dart and an HTML form button to reset the
dart.
Collision Detection: The dart will stop when it reaches the dartboard z position.
Scoring:
We will use dart position to find the score associated with a dartboard circular
segment.
Adding a texture
We will generate a triangle fan and then texture it to produce our dartboard. This is shown in Listing 7-22.
Listing 7-22. Our Dartboard Variables and Buffer Initialization
...
dartboardVertexPositionBuffer = null,
dartboardVertexTexCoordBuffer = null,
dartboardTexture = null,
dartboardDiameter = 2.5,
dartboard_sections = 20, //number of circular sections
dartboard_z = -7.0,
...
function initDartboardBuffer(){
var vertices = [0,0,0], //center vertex
texCoords = [0,0],
x,
y,
radians = 0;
//programatically create vertices.
//will divide circle into 20 sections = 18 degrees each
for(var i=0; i < dartboard_sections; i++){
radians = i * 2.0 * Math.PI/dartboard_sections;
x = Math.cos(radians);
y = Math.sin(radians);
vertices = vertices.concat([x*dartboardDiameter, y*dartboardDiameter,
dartboard_z]);
texCoords = texCoords.concat([x/2.0 + .5, y/2.0 + .5]);
}
 
Search WWH ::




Custom Search