The Essential Guide to HTML5

BOUNCING BALL Code Explanation <form name="f" id="f" onSubmit=
"return change();"> Start of form. Give name and id (may n ...

CHAPTER 3 Code Explanation background-color:#b10515; padding:20px; } var boxx = 20; var boxy = 30; var boxwidth = 350; var box ...

BOUNCING BALL Code Explanation img.src="pearl.jpg"; Set the src for this image to be the "pearl.jpg" file. var ctx; var grad; Se ...

CHAPTER 3 Code Explanation color = 'rgb('+hue[h][0]+','
+hue[h][1]+','+hue[h][2]+')'; Set up color as a character string that i ...

BOUNCING BALL Code Explanation var nballx = ballx + ballvx; var nbally = bally +ballvy; if (nballx > boxboundx) { ballvx =-ba ...

CHAPTER 3 Code Explanation } function change() { ballvx = Number(f.hv.value); ballvy = Number(f.vv.value); return false; } &l ...

BOUNCING BALL Code Explanation I chose to put the modest change of the style information in the first application. Table 3-4 ...

CHAPTER 3 Code Explanation var cwidth = 400; var cheight = 300; var ballrad = 10; var boxx = 20; var boxy = 30; var boxwidth = 3 ...

BOUNCING BALL Code Explanation setInterval(moveball,100); } function moveball(){ ctx.clearRect(boxx,boxy,boxwidth,boxheight); mo ...

CHAPTER 3 Code Explanation nballx = inboxboundx ballvx = -ballvx; } if (nbally > boxboundy) { nbally = boxboundy; ballvy =-ba ...

BOUNCING BALL Code Explanation Your browser doesn't support the HTML5 element canvas. Horizontal velocity <input name="h ...

CHAPTER 3 If you want to use more than two balls, you may want to consider using arrays. Subsequent chapters will show you how t ...

Chapter 4 Cannonball and Slingshot In this chapter, you will learn techniques for maintaining a list of objects to draw on the ...

CHAPTER 4 A slingshot. The parameters of flight are determined by the player dragging, then releasing a ball shape tethered to ...

CANNONBALL AND SL INGSHOT Figure 4-2. Rotating cannon with image as target Figure 4-3 shows the scene after a successful hit. No ...

CHAPTER 4 Figure 4-4. Opening screen of the slingshot application For the slingshot, I decided I wanted the ball to keep going u ...

CANNONBALL AND SL INGSHOT The vertical velocity at the start of the interval is verticalvel1 The vertical velocity at end of th ...

CHAPTER 4 I am using the term objects in both the English and the programming sense. In programming terms, an object consists of ...

CANNONBALL AND SL INGSHOT The next statement, declaring the variable cball, builds a new object of type Ball by using the operat ...

CHAPTER 4 The result is shown in Figure 4-6. Figure 4-6. Rectangle (no rotation) In this exercise, the goal is to rotate the lar ...