Entire Site
Free Trial
Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- PrintPrint
Chapter 7: Beginning WebGL > A basic game
A basic game
When creating a game, you should plan what you wish to accomplish and how to implement it (at a high level) before you write any code. This can always be modified during development. but is a good start.
Planning
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]);
}